layui数据表格隐藏列的方法介绍

layui数据表格隐藏列的方法介绍

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

1.jpg

 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)

2.jpg

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

3.jpg

  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(隐藏)属性。

4.jpg

  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  });

登录后复制

更多layui知识请关注layui使用教程栏目。

以上就是layui数据表格隐藏列的方法介绍的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3005832.html

(0)
上一篇 2025年3月13日 01:03:29
下一篇 2025年3月3日 17:04:15

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • layui时间控件清空之后无法正常使用的问题

    解决layui时间控件清空之后无法正常使用的问题,以及时间范围的选择。 共有两种解决方式: 方式一(layui 1.x): html代码: 登录后复制登录后复制 js代码: var start = {istime: true,format:…

    2025年3月13日
    200
  • layui框架form表单使用介绍

    虽然对layui比较熟悉了,但是今天有时间还是将layui的form表单模块重新看一下。 一、更新渲染  layui没有双向绑定机制,但是有经典模块化框架 只需要执行下面的方法即可: form.render(type,filter) 第一个…

    2025年3月13日
    200
  • layui的本地存储方法介绍

    本地存储是对 localStorage 和 sessionStorage 的友好封装,可更方便地管理本地数据。 localStorage 持久化存储:layui.data(table, settings),数据会永久存在,除非物理删除。 s…

    2025年3月13日
    200
  • Django+Layui后台布局介绍

    Layui后台布局: 一、后台布局之顶边栏         layui 后台布局                            控制台            商品管理            用户                   …

    2025年3月13日
    200
  • layui使用iconfont的方法介绍

    layui的图标取自于阿里巴巴的矢量图标库 Iconfont,同样的,这篇教程也是基于Iconfont进行扩展。 第一步,通过浏览器打开http://iconfont.cn/ ,访问阿里巴巴矢量图标库。 第二步,通过右上角的用户图标,授权登…

    2025年3月13日
    200
  • layui文件上传、预览及修改方法

    单文件上传 1、HTML 上传客服二维码* @@##@@ 开始上传 温馨提示: 每次最多上传一张图片, 单张图片的大小不超过2MB 登录后复制 2、js部分 layui.use([‘form’, ‘element’, ‘up…

    2025年3月13日
    200
  • layui表格动态显示变换

    在使用Layui的表格组件时有时会用到可变换的操作比如显示或隐藏功能,那么就需要按钮的动态变换 实现方法在layui的barDome中加入如下代码 预览 编辑 删除 {{# if(d.img_status == “yes”){ }} 轮播隐…

    2025年3月13日
    200
  • layui表单中的inline和block介绍

    layui表单中的inline和block: block: block元素会独自占一行,多个block元素各自新起一行,默认情况下 ,block元素宽度自动填充其父元素宽度     单行输入框                      验证…

    2025年3月13日
    200
  • layui多图上传实现删除功能的方法

    在使用layui的多图上传时发现没有删除功能 在网上搜索解决办法时有的感觉太复杂有的不符合自己所需要的所以就自己动手 下面附上代码 HTML:     多图片上传            预览图:                       …

    2025年3月13日
    200
  • layui框架的flow组件常见用法总结

    该模块包含 信息流加载 和  图片懒加载  两大核心支持,无论是对服务端、还是前端体验,都有非常大的性能帮助。下边分别给出了这两种技术的使用方法: 一、信息流加载 信息流加载的核心方法时  flow.load(options) ,下边给了一…

    2025年3月13日
    200

发表回复

登录后才能评论