在使用 layui 做数据表格的时候我们会遇到需要隐藏表格列的情况, 那么我们该如何使用 layui 实现表格列隐藏的效果呢? 本文就来为大家介绍一下 layui 数据表格隐藏列的方法, 希望对大家有一定的帮助.
在使用 layui 做数据表格的时候, 插入的数据的 id 是不是一组连续的数字, 那么就需要用到 layui 的 cols 的 type 属性.
- 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 参数.
- 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(隐藏) 属性.
- 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
- });
本文转载自: https://blog.csdn.net/qq_41434612/article/details/83239957
更多相关知识, 请访问 html 中文网 Layui 教程 https://www.html.cn/framework/layui/ 栏目!!
来源: http://www.css88.com/framework/layui/17167.html