本文摘自PHP中文网,作者尚,侵删。
在使用layui做数据表格的时候,插入的数据的id是不是一组连续的数字,那么就需要用到layui的cols的type属性。
1 2 3 4 5 6 7 8 | table.render({
elem: '#test'
,url: '${pageContext.request.contextPath}/findcustomers'
,cols: [[
{align: 'center' , title: '编号' , sort: true ,type: 'numbers' ,width:100}
]]
,page: true
});
|
我们就会获得一列有序的数列(ps:这里的必须加width属性,使用minWidth没有用,如果没用width,那么会使用layui的表格默认宽度40)
那么问题来了,我们的id怎么获取呢,难道id再开一列吗,如果id有意义,那么再开一列是可以的,如果没有意义但有需要用的话,那么把id隐藏起来更为美观。在layui2.4版本以前我们可以用layui的数据表格的done参数。
1 2 3 4 5 6 7 8 9 10 11 12 13 | 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自己在加载的时候,实现隐藏。所以在layui2.4版本的时候,layui的cols的参数新添了hide(隐藏)属性。
阅读剩余部分
相关阅读 >>
layui日期控件使用(实例)
表格工具按钮列显示更多时也能触发table的事件
如何运用layui数据添加页面的前端布局?(附源码)
layui表单元素怎么校验
layui怎么关闭当前弹窗
layui怎么实现下载功能
layui是基于vue的吗?
layui不支持ie兼容吗
layui之弹出层关闭和刷新问题
layui时间控件闪退的问题介绍
更多相关阅读请进入《layui》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » layui数据表格隐藏列的方法介绍