layui實現(xiàn)數(shù)據(jù)表格隱藏列的示例
在使用layui做數(shù)據(jù)表格的時候，插入的數(shù)據(jù)的id是不是一組連續(xù)的數(shù)字，那么就需要用到layui的cols的type屬性。
table.render({
elem: '#test'
,url:'${pageContext.request.contextPath}/findcustomers'
,cols: [[
{align:'center', title: '編號', sort: true,type:'numbers',width:100}
]]
,page: true
});
我們就會獲得一列有序的數(shù)列（ps:這里的必須加width屬性，使用minWidth沒有用，如果沒用width，那么會使用layui的表格默認寬度40）
那么問題來了，我們的id怎么獲取呢，難道id再開一列嗎，如果id有意義，那么再開一列是可以的，如果沒有意義但有需要用的話，那么把id隱藏起來更為美觀。在layui2.4版本以前我們可以用layui的數(shù)據(jù)表格的done參數(shù)
table.render({
elem: '#test'
,url:'${pageContext.request.contextPath}/findcustomers'
,cols: [[
{align:'center', title: '編號', 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隱藏，但有那么零點幾秒，id的列是加載出來了，最后隱藏的。那么有沒有更有效的辦法呢，只能layui自己在加載的時候，實現(xiàn)隱藏。所以在layui2.4版本的時候，layui的cols的參數(shù)新添了hide（隱藏）屬性。
table.render({
elem: '#test'
,url:'${pageContext.request.contextPath}/findcustomers'
,cols: [[
{align:'center', title: '編號', sort: true,type:'numbers',width:100}
,{field:'cust_id', title: 'ID', hide:true}
]]
,page: true
});
我們只需添加 hide：true就可以將id列隱藏，并且能獲得數(shù)據(jù)。
以上這篇layui實現(xiàn)數(shù)據(jù)表格隱藏列的示例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
下面小編就為大家分享一篇js將鍵值對字符串轉(zhuǎn)為json字符串的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
JS數(shù)組進階示例【數(shù)組的幾種函數(shù)用法】
這篇文章主要介紹了JS數(shù)組進階,結(jié)合實例形式總結(jié)分析了數(shù)組的幾種常見函數(shù)基本用法,涉及JavaScript數(shù)組元素刪除、拼接、添加、倒序排列等相關(guān)操作技巧,需要的朋友可以參考下2020-01-01
前幾天在朋友的iPhone上面玩了一個連鎖泡泡游戲，頭腦發(fā)熱就想用js寫一個。2009-09-09
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)alert彈框效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
JS使用AudioContext實現(xiàn)音頻流實時播放
這篇文章主要為大家詳細介紹了JavaScript如何使用AudioContext實現(xiàn)音頻流實時播放功能,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
Map與WeakMap類型在JavaScript中的使用詳解
這篇文章主要介紹了Map與WeakMap類型在JavaScript中的使用,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-11-11
教學(xué)演示-UBB,剪貼板,textRange及其他
教學(xué)演示-UBB,剪貼板,textRange及其他...2006-07-07
js實現(xiàn)帶農(nóng)歷和八字等信息的日歷特效
本文主要介紹了js實現(xiàn)帶農(nóng)歷和八字等信息的日歷特效,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考2016-05-05
JS面向?qū)ο螅?）之Object類，靜態(tài)屬性，閉包，私有屬性， call和apply的使用，繼承的三種實現(xiàn)方法
這篇文章主要介紹了JS面向?qū)ο螅?）之Object類，靜態(tài)屬性，閉包，私有屬性， call和apply的使用，繼承的三種實現(xiàn)方法的相關(guān)資料,需要的朋友可以參考下2016-02-02
簡單的兩種Extjs formpanel加載數(shù)據(jù)的方式
這篇文章介紹了兩種Extjs formpanel加載數(shù)據(jù)的方式，有需要的朋友可以參考一下2013-11-11