layui實(shí)現(xiàn)數(shù)據(jù)表格隱藏列的示例
在使用layui做數(shù)據(jù)表格的時(shí)候,插入的數(shù)據(jù)的id是不是一組連續(xù)的數(shù)字,那么就需要用到layui的cols的type屬性。
table.render({ elem: '#test' ,url:'${pageContext.request.contextPath}/findcustomers' ,cols: [[ {align:'center', title: '編號(hào)', sort: true,type:'numbers',width:100} ]] ,page: true });
我們就會(huì)獲得一列有序的數(shù)列(ps:這里的必須加width屬性,使用minWidth沒(méi)有用,如果沒(méi)用width,那么會(huì)使用layui的表格默認(rèn)寬度40)
那么問(wèn)題來(lái)了,我們的id怎么獲取呢,難道id再開(kāi)一列嗎,如果id有意義,那么再開(kāi)一列是可以的,如果沒(méi)有意義但有需要用的話,那么把id隱藏起來(lái)更為美觀。在layui2.4版本以前我們可以用layui的數(shù)據(jù)表格的done參數(shù)
table.render({ elem: '#test' ,url:'${pageContext.request.contextPath}/findcustomers' ,cols: [[ {align:'center', title: '編號(hào)', sort: true,type:'numbers',width:100} ,{field:'cust_id', title: 'ID'} ]] ,done:function(res,curr,count){ // 隱藏列 $(".layui-table-box").find("[data-field='cust_id']").css("display","none"); } ,page: true });
可以將id隱藏,但有那么零點(diǎn)幾秒,id的列是加載出來(lái)了,最后隱藏的。那么有沒(méi)有更有效的辦法呢,只能layui自己在加載的時(shí)候,實(shí)現(xiàn)隱藏。所以在layui2.4版本的時(shí)候,layui的cols的參數(shù)新添了hide(隱藏)屬性。
table.render({ elem: '#test' ,url:'${pageContext.request.contextPath}/findcustomers' ,cols: [[ {align:'center', title: '編號(hào)', sort: true,type:'numbers',width:100} ,{field:'cust_id', title: 'ID', hide:true} ]] ,page: true });
我們只需添加 hide:true就可以將id列隱藏,并且能獲得數(shù)據(jù)。
以上這篇layui實(shí)現(xiàn)數(shù)據(jù)表格隱藏列的示例就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)頭部進(jìn)度條刷新
這篇文章主要介紹了JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)頭部進(jìn)度條刷新實(shí)例代碼,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-04-04JavaScript實(shí)現(xiàn)兩個(gè)Table固定表頭根據(jù)頁(yè)面大小自行調(diào)整
正如標(biāo)題所言兩個(gè)Table固定表頭,可根據(jù)頁(yè)面大小自行調(diào)整使用JavaScript實(shí)現(xiàn),具體的示例如下,感興趣的朋友可以參考下2014-01-01在Javascript操作JSON對(duì)象,增加 刪除 修改的簡(jiǎn)單實(shí)現(xiàn)
下面小編就為大家?guī)?lái)一篇在Javascript操作JSON對(duì)象,增加 刪除 修改的簡(jiǎn)單實(shí)現(xiàn)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06js實(shí)現(xiàn)截取某個(gè)字符串前面的內(nèi)容
這篇文章主要介紹了js實(shí)現(xiàn)截取某個(gè)字符串前面的內(nèi)容,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04JS簡(jiǎn)單實(shí)現(xiàn)動(dòng)態(tài)添加HTML標(biāo)記的方法示例
這篇文章主要介紹了JS簡(jiǎn)單實(shí)現(xiàn)動(dòng)態(tài)添加HTML標(biāo)記的方法,結(jié)合實(shí)例形式分析了JavaScript使用createElement()方法針對(duì)頁(yè)面元素進(jìn)行動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-04-04用js代碼和插件實(shí)現(xiàn)wordpress雪花飄落效果的四種方法
這篇文章主要介紹了用js代碼和插件實(shí)現(xiàn)wordpress雪花飄落效果的四種方法,需要的朋友可以參考下2014-12-12JavaScript實(shí)現(xiàn)首頁(yè)圖片輪播圖效果
這篇文章主要介紹了JavaScript實(shí)現(xiàn)首頁(yè)圖片輪播圖效果,文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-06-06javascript實(shí)現(xiàn)鼠標(biāo)放上后下邊對(duì)應(yīng)內(nèi)容變換的效果
這篇文章主要介紹了javascript鼠標(biāo)放上后下邊對(duì)應(yīng)內(nèi)容變換的方法,實(shí)例分析了javascript實(shí)現(xiàn)tab切換的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08Bootstrap select實(shí)現(xiàn)下拉框多選效果
這篇文章主要為大家詳細(xì)介紹了Bootstrap select實(shí)現(xiàn)下拉框多選效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12