layui table隐藏列

朱雀 2021-06-24 16:12 736阅读 0赞

layui的官网table demo如下：

layui.use('table', function(){
      var table = layui.table;
      
      table.render({
        elem: '#test'
        ,url:'/demo/table/user/'
        ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
        ,cols: [[
          {field:'id', width:80, title: 'ID', sort: true}
          ,{field:'username', width:80, title: '用户名'}
          ,{field:'sex', width:80, title: '性别', sort: true}
          ,{field:'city', width:80, title: '城市'}
          ,{field:'sign', title: '签名', width: '30%', minWidth: 100} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
          ,{field:'experience', title: '积分', sort: true}
          ,{field:'score', title: '评分', sort: true}
          ,{field:'classify', title: '职业'}
          ,{field:'wealth', width:137, title: '财富', sort: true}
        ]]
      });
    });

如果我们想隐藏某一列应该怎么办呢？  
直接在field后面加上“style:'display:none;”显然是不行的。  
其实解决方法也很简单，直接在后面添加如下配置即可：

done: function () {
        $("[data-field='id']").css('display','none');
    }

完整代码如下：

layui.use('table', function(){
      var table = layui.table;
      
      table.render({
        elem: '#test'
        ,url:'/demo/table/user/'
        ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
        ,cols: [[
          {field:'id', width:80, title: 'ID', sort: true}
          ,{field:'username', width:80, title: '用户名'}
          ,{field:'sex', width:80, title: '性别', sort: true}
          ,{field:'city', width:80, title: '城市'}
          ,{field:'sign', title: '签名', width: '30%', minWidth: 100} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
          ,{field:'experience', title: '积分', sort: true}
          ,{field:'score', title: '评分', sort: true}
          ,{field:'classify', title: '职业'}
          ,{field:'wealth', width:137, title: '财富', sort: true}
        ]]
        ,done: function () {
                $("[data-field='id']").css('display','none');
            }
      });
    });

发表评论取消回复

表情：

评论列表（有 0 条评论，736人围观）

还没有评论，来说两句吧...

相关阅读

相关 ElementUI的el-table怎样隐藏某一列

场景使用el-table进行数据的展示时，某些列不需要展示，但是需要其存在。比如查询数据时要获取对象的ID属性，在展示时不需要展示ID这一列，但是在进行编辑时需

红太狼/ 2023年10月06日 13:49/ 0 赞/ 18 阅读

相关 layui table 数据表格固定列的行高和table其他列的行高不一致

![在这里插入图片描述][bedfeaf4ef818cfeb0b6dcc3ba901feb.png_pic_center] 1、问题描述：使用layui的table数据表格，

小鱼儿/ 2023年01月12日 01:55/ 0 赞/ 614 阅读

相关记录一次layui table 列宽设置失效的问题

table.render({ id: 'field',

柔光的暖阳◎/ 2022年11月24日 14:24/ 0 赞/ 385 阅读

相关 excel中隐藏列，隐藏行，增加列，取消隐藏，调节列宽

隐藏列：ctrl+shift+右键然后点击右键取消隐藏隐藏行:ctrl+shift+下键盘，然后点击右键取消隐藏调节列宽的时候要注意表格全部选中以后要在首行点击右键。

分手后的思念是犯贱/ 2022年10月05日 11:00/ 0 赞/ 390 阅读

相关 js隐藏table 列

var tab = document.getElementById("datatable"); function changeTable(tab)\{ var

超、凢脫俗/ 2022年09月22日 13:53/ 0 赞/ 233 阅读

相关在javascript中如何隐藏table的一列

在javascript中如何隐藏table的一列 function displayIncomeCol(col,obj) \{ var tb;

水深无声/ 2022年08月27日 02:26/ 0 赞/ 389 阅读

相关 BootStrapTable 隐藏列

$(function () \{ $("\cbFollowUpList").bootstrapTable(\{ url:'/npackage/naction\_nfun

川长思鸟来/ 2022年07月12日 05:08/ 0 赞/ 369 阅读

相关 layui按条件隐藏表格列

直接上关键代码： layui.use(['table','form','laypage'], function() { var table = layui

谁践踏了优雅/ 2022年04月22日 02:56/ 0 赞/ 632 阅读

相关 layui table列中参数转换（1=汽车 2=火车 3=飞机） & layui table列中的值替换（已解决）

问题：类别属性为sort 后台数据库存的是1 2 3 但是显示的需要转换成人才政策项目![watermark_type_ZmFuZ3poZW5naGVpdGk_sh

迈不过友情╰/ 2022年04月13日 05:51/ 0 赞/ 246 阅读

相关 layui table隐藏列

layui的官网table demo如下： layui.use('table', function(){ var table = layui.table;

朱雀/ 2021年06月24日 16:12/ 0 赞/ 737 阅读