layui怎么隐藏表格行?

layui数据表格隐藏列

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

1.png

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.png

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

3.png

  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.png

  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 input只读属性是什么?

layuiinput只读属性是什么?layuiinput只读属性是readonly。readonly属性规定输入字段为只读。只读字段是不能修改的。不过,用户仍然可以使用tab键切换到该字段,还可以选中

浅谈layui中table.render的使用(附代码)

layui框架提供了丰富的内置模块,他们皆可通过模块化的方式按需加载,其中包括:layer、layDate、layPage、laytpl、table等。本篇文章给大家浅谈一下layui中table.r

layui时间控件清空之后无法正常使用怎么办?

解决layui时间控件清空之后无法正常使用的问题,以及时间范围的选择。共有两种解决方式:方式一(layui1.x):html代码: js代码:varstart={ istime:tru

layui模块化与非模块化的不同引用方式

layui模块化与非模块化的不同引用方式:1、模块化与非模块化的区别layui中有许多不同的内置模块,如弹出层、日期与时间选择器、分页等不同模块。模块化:使用时加载相应的模块。非模块化:一次性加载所有

项目中如何优雅地使用函数 layui.define

前言:1、如果你深刻理解并合理运用layui.define,那么本篇对你来说有点浪费时间了。2、如果你对于“Javascript模块化开发”听都没听过,更别说还要理解它。那么建议可以先在网络上找找什么

浅谈layui上传文件和数据表格中的一些问题

layui是一款我比较喜欢的框架,它的界面风格和颜色搭配都是让人比较舒服的,所以我非常喜欢使用layui。接下来就是在工作中使用layui遇到了一些比较细节的问题:第一:layui上传文件的问题,第二

layui和easyui的区别是什么?

layuilayui是一款采用自身模块规范编写的前端UI框架,它遵循原生的HTML/CSS/JS书写方式。它虽然外在极简,但是内容丰富,里面包含众多组件从核心代码到API都非常适合界面的快速开发。事实

浅谈layui前端遇到的难点(集合)

一、表格中插入下拉框的情况问题:表格遇到下拉框表单的情况,下拉框在表格中没办法显示出来,效果:1、表格中下拉框被隐藏----方法1这种方法解决了表格中下拉框被隐藏的状态了,但是显示并不是很美观,距离最

layui怎么固定表格的表头?

步骤:1、设置两个table,第一个table有thead没有tbody,第二个table有tbody没有table;2、第二个table需要一个div包住,并设置宽高,可用绝对布局3、tr下的th和

layui中的layer怎么进行宽高设置?

layui中的layer模块可以使用area设置宽高。类型:String/Array,默认:'auto'在默认状态下,layer是宽高都自适应的,但当你只想定义宽度时,你可以area:'500px',

浅谈Layui的时间选择框

Layui中时间格式的输入框:html代码: 选择日期: -- - js代码:layui.use(['layer','form','table','laydate'],function()

浅谈layui数据表格隐藏列的方法

在使用layui做数据表格的时候,插入的数据的id是不是一组连续的数字,那么就需要用到layui的cols的type属性。table.render({ elem:'#test' ,url:'${pag

layui如何实现下载功能?

layui实现下载功能的方法:a标签中的href属性可以直接给下载链接的地址,点击的时候会自动跳出下载保存窗口。用原生上传文件标签上传文件,获取上传文件的全路径:$('#file').change(f

layui open怎么更改按钮的颜色?

layuiopen中可以使用skin来设置按钮颜色。skin不仅允许你传入layer内置的样式class名,还可以传入您自定义的class名。这是一个很好的切入点,意味着你可以借助skin轻松完成不同

如何用layui实现图片上传?

layui上传功能的实现:一、前往官网下载layui的框架打开html文件,引用其中的layui.css和layui.js二、调用前端的html代码,设置id值。 上传图片   layui

详解layui模块化与非模块化的不同引用方式

layui模块化与非模块化的不同引用方式:1、模块化与非模块化的区别layui中有许多不同的内置模块,如弹出层、日期与时间选择器、分页等不同模块。模块化:使用时加载相应的模块。非模块化:一次性加载所有

layui有什么功能?

layui是一款采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到API的每一处细

layui怎么设置时间选择框?

Layui中时间格式的输入框:html代码: 选择日期: -- - js代码:layui.use(['layer','form','table','laydate'],function()

详解layui后台框架的搭建

layui(谐音:类UI)是一款采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到

layui之弹出form表单以及提交

第一步:引用两个文件第二步:点击删除按钮弹出提示框/*删除开始*/ $(".del").click(function(){ varid=$(this).attr("id"); layer.alert(