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 相关文章推荐
JS 有名函数表达式全面解析
Mar 19 Javascript
JavaScript 的继承
Oct 01 Javascript
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
Feb 10 Javascript
javascript动态添加样式(行内式/嵌入式/外链式等规则)
Jun 24 Javascript
jquery隐藏标签和显示标签的实例
Nov 11 Javascript
js中的setInterval和setTimeout使用实例
May 09 Javascript
JS替换字符串中字符即替换全部而不是第一个
Jun 04 Javascript
jQuery中:reset选择器用法实例
Jan 04 Javascript
分享12个非常实用的JavaScript小技巧
May 11 Javascript
前端框架Vue.js构建大型应用浅析
Sep 12 Javascript
Vue实现简易翻页效果源码分享
Nov 08 Javascript
js实现录音上传功能
Nov 22 Javascript
关于在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/06/09 PHP
php 魔术方法详解
2014/11/11 PHP
PHP 枚举类型的管理与设计知识点总结
2020/02/13 PHP
实现连缀调用的map方法(prototype)
2009/08/05 Javascript
了解jQuery技巧来提高你的代码
2010/01/08 Javascript
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
2010/10/20 Javascript
Jquery插件编写简明教程
2014/03/25 Javascript
js 设置缓存及获取设置的缓存
2014/05/08 Javascript
javascript获取本机操作系统类型的方法
2015/08/13 Javascript
基于javascript实现泡泡大冒险网页版小游戏
2016/03/23 Javascript
使用vue.js开发时一些注意事项
2016/04/27 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
2017/09/14 Javascript
使用javaScript实现鼠标拖拽事件
2020/04/03 Javascript
vue 不使用select实现下拉框功能(推荐)
2018/05/17 Javascript
Vue组件之单向数据流的解决方法
2018/11/10 Javascript
vue按需加载实例详解
2019/09/06 Javascript
[06:49]2018DOTA2国际邀请赛寻真——VirtusPro傲视群雄
2018/08/12 DOTA
以911新闻为例演示Python实现数据可视化的教程
2015/04/23 Python
在Python中使用判断语句和循环的教程
2015/04/25 Python
python+VTK环境搭建及第一个简单程序代码
2017/12/13 Python
对python判断ip是否可达的实例详解
2019/01/31 Python
如何使用Python实现斐波那契数列
2019/07/02 Python
Python read函数按字节(字符)读取文件的实现
2019/07/03 Python
python实现ip代理池功能示例
2019/07/05 Python
pandas读取CSV文件时查看修改各列的数据类型格式
2019/07/07 Python
django rest framework 自定义返回方式
2020/07/12 Python
python与idea的集成的实现
2020/11/20 Python
世界上最大的在线旅行社新加坡网站:Expedia新加坡
2016/08/25 全球购物
Parfume Klik丹麦:香水网上商店
2018/07/10 全球购物
The Hut英国:英国领先的豪华在线百货商店
2019/07/26 全球购物
澳大利亚礼品篮网站:Macarthur Baskets
2019/10/14 全球购物
求最大连续递增数字串(如"ads3sl456789DF3456ld345AA"中的"456789")
2015/09/11 面试题
军训自我鉴定
2014/01/22 职场文书
2014年高一班主任工作总结
2014/12/05 职场文书
2014年机关党委工作总结
2014/12/11 职场文书
解决vue $http的get和post请求跨域问题
2021/06/07 Vue.js