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


Posted in Javascript onOctober 25, 2019

在使用layui做数据表格的时候,插入的数据的id是不是一组连续的数字,那么就需要用到layui的cols的type属性。

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

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)

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

那么问题来了,我们的id怎么获取呢,难道id再开一列吗,如果id有意义,那么再开一列是可以的,如果没有意义但有需要用的话,那么把id隐藏起来更为美观。在layui2.4版本以前我们可以用layui的数据表格的done参数

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

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.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 相关文章推荐
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Jul 21 Javascript
js利用数组length属性清空和截短数组的小例子
Jan 15 Javascript
JavaScript中通过提示框跳转页面的方法
Feb 14 Javascript
JavaScript 计算笛卡尔积实例详解
Dec 02 Javascript
js实现tab选项卡切换功能
Jan 13 Javascript
mock.js实现模拟生成假数据功能示例
Jan 15 Javascript
微信小程序bindinput与bindsubmit的区别实例分析
Apr 17 Javascript
AngularJs中$cookies简单用法分析
May 30 Javascript
vue配置文件实现代理v2版本的方法
Jun 21 Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
Sep 04 Javascript
uniapp实现可以左右滑动导航栏
Oct 21 Javascript
vue动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
关于在LayUI中使用AJAX提交巨坑记录
Oct 25 #Javascript
浅谈layui 绑定form submit提交表单的注意事项
Oct 25 #Javascript
详解如何在Vue项目中发送jsonp请求
Oct 25 #Javascript
layui实现form表单同时提交数据和文件的代码
Oct 25 #Javascript
vue实现弹幕功能
Oct 25 #Javascript
vue指令v-html使用过滤器filters功能实例
Oct 25 #Javascript
使用layui前端框架弹出form表单以及提交的示例
Oct 25 #Javascript
You might like
php获取汉字首字母的函数
2013/11/07 PHP
Zend Framework使用Zend_Loader组件动态加载文件和类用法详解
2016/12/09 PHP
Thinkphp事务操作实例(推荐)
2017/04/01 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
Laravel 的数据库迁移的方法
2017/07/31 PHP
Javascript中的变量使用说明
2010/05/18 Javascript
js URL参数的拼接方法比较
2012/02/15 Javascript
javascript实现微信分享
2014/12/23 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
2016/06/07 Javascript
JS获取input file绝对路径的方法(推荐)
2016/08/02 Javascript
浅谈jQuery添加的HTML,JS失效的问题
2016/10/05 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
2016/10/31 Javascript
微信小程序 扎金花简单实例
2017/02/21 Javascript
vue-quill-editor富文本编辑器简单使用方法
2018/09/21 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
2019/03/11 Javascript
Vue实现根据hash高亮选项卡
2019/05/27 Javascript
Vue的生命周期操作示例
2019/09/17 Javascript
Vue.js仿Select下拉框效果
2020/02/18 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
2020/11/11 Javascript
[53:21]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-CDEC
2014/05/22 DOTA
Django自定义用户认证示例详解
2018/03/14 Python
详解python解压压缩包的五种方法
2019/07/05 Python
使用Python给头像戴上圣诞帽的图像操作过程解析
2019/09/20 Python
Anaconda配置pytorch-gpu虚拟环境的图文教程
2020/04/16 Python
Python如何获取文件指定行的内容
2020/05/27 Python
获取python运行输出的数据并解析存为dataFrame实例
2020/07/07 Python
美国领先的商务贺卡出版商:The Gallery Collection
2018/02/13 全球购物
香蕉共和国加拿大官网:Banana Republic加拿大
2018/08/06 全球购物
ANINE BING官方网站:奢华的衣橱基本款和时尚永恒的单品
2019/11/26 全球购物
学习决心书范文
2014/03/11 职场文书
《埃及的金字塔》教学反思
2014/04/07 职场文书
个人查摆问题及整改措施
2014/10/16 职场文书
基督教追悼会答谢词
2015/09/29 职场文书
vue完美实现el-table列宽自适应
2021/05/08 Vue.js
解决Laravel使用验证时跳转到首页的问题
2021/11/17 PHP