layui实现数据表格隐藏列的示例

更新时间：2019年10月25日 17:09:29 作者：玛丽贝贝红

今天小编就为大家分享一篇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
 });

我们只需添加 hide：true就可以将id列隐藏，并且能获得数据。

以上这篇layui实现数据表格隐藏列的示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

JavaScript find()方法及返回数据实例
这篇文章主要介绍了JavaScript中的find()方法和返回数据的内存指向,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-04-04
js for循环，为什么一定要加var定义i变量
我知道，有些人（譬如之前的我）写js的for循环时，都不习惯加上var，这当然是语法允许的。
2010-06-06
js实现图片轮换效果代码
本教程使用js实现两张图片切换/多张图片轮换/结束执行等效果，感兴趣的朋友可以参考下哈，希望对你学习js有所帮助
2013-04-04
浅谈JS中的反柯里化( uncurrying)
本篇文章主要介绍了浅谈JS中的反柯里化( uncurrying)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
JavaScript实现网页五子棋小游戏
这篇文章主要为大家详细介绍了JavaScript实现网页五子棋小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-06-06
JavaScript文档加载模式以及元素获取
这篇文章主要介绍了JavaScript文档加载模式以及元素获取,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-07-07
鼠标滚轮改变图片大小的示例代码
这篇文章主要是对用鼠标滚轮改变图片大小的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2013-11-11
JS使用面向对象技术实现的tab选项卡效果示例
这篇文章主要介绍了JS使用面向对象技术实现的tab选项卡效果,结合具体实例形式分析了js面向对象技术与tab选项卡功能的具体实现技巧,需要的朋友可以参考下
2017-02-02
移动端H5页面返回并刷新页面（BFcache）的方法
这篇文章主要给大家介绍了关于移动端H5页面返回并刷新页面（BFcache）的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2018-11-11
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
这篇文章主要介绍了我要点爆”微信小程序云开发之项目建立与我的页面功能实现，本文图文并茂给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
2019-05-05