搜索
首页web前端Layui教程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数据表格隐藏列的方法介绍的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文转载于:CSDN。如有侵权,请联系admin@php.cn删除
如何使用Layui的流块模块进行无限滚动?如何使用Layui的流块模块进行无限滚动?Mar 18, 2025 pm 01:01 PM

文章讨论了使用Layui的流量模块进行无限滚动,涵盖设置,最佳实践,性能优化和自定义,以增强用户体验。

如何使用Layui的元素模块来创建选项卡,手风琴和进度条?如何使用Layui的元素模块来创建选项卡,手风琴和进度条?Mar 18, 2025 pm 01:00 PM

本文详细介绍了如何使用Layui的元素模块来创建和自定义UI元素,例如选项卡,手风琴和进度条,突出显示HTML结构,初始化和常见的陷阱,以避免。

如何自定义Layui旋转木制模块的外观和行为?如何自定义Layui旋转木制模块的外观和行为?Mar 18, 2025 pm 12:59 PM

本文讨论了自定义Layui的Carousel模块,重点介绍了外观和行为的CSS和JavaScript修改,包括过渡效果,自动播放设置以及添加自定义导航控件。

如何使用Layui的旋转木载模块来创建图像滑块?如何使用Layui的旋转木载模块来创建图像滑块?Mar 18, 2025 pm 12:58 PM

该文章指导使用Layui的Carousel模块用于图像滑块,详细介绍设置的步骤,自定义选项,实现自动播放和导航以及性能优化策略。

如何将Layui的上传模块配置为限制文件类型和尺寸?如何将Layui的上传模块配置为限制文件类型和尺寸?Mar 18, 2025 pm 12:57 PM

本文讨论了使用Accept,Exts和Size属性来限制Layui的上传模块,以限制文件类型和尺寸,并自定义错误消息以违反。

如何使用Layui的图层模块来创建模态窗口和对话框?如何使用Layui的图层模块来创建模态窗口和对话框?Mar 18, 2025 pm 12:46 PM

本文介绍了如何使用Layui的图层模块创建模态窗口和对话框,详细设置,类型,自定义和常见的陷阱要避免。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
4 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
4 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
4 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它们
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用