精华内容
下载资源
问答
  • 今天小编就为大家分享一篇关于Layui Table隐藏列问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layui table隐藏列

    千次阅读 2019-06-06 00:28:54
    layui的官网table demo如下: layui.use('table', function(){ var table = layui.table; table.render({ elem: '#test' ,url:'/demo/table/user/' ,cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui...

    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');
            }
      });
    });
    
    展开全文
  • Layui Table列隐藏问题

    千次阅读 2019-01-11 16:35:15
    针对layui table列隐藏问题有以下几种方法 1.在需要隐藏的列加CSS样式来控制 {field: 'data_id', title: 'ID', width: 50,style:'display:none;'} 但是这种处理方式知识对列中的值隐藏,对列标题不会做任何...

    针对layui table的列隐藏问题有以下几种方法
    1.在需要隐藏的列加CSS样式来控制

    {field: 'data_id', title: 'ID', width: 50,style:'display:none;'}
    

    但是这种处理方式知识对列中的值隐藏,对列标题不会做任何作用。
    2.在done函数中设置该列的display为none

    cols:[
    	[{field : 'orgId', width : 80, title : '单位ID ', hide : true }]
    ],
    totalRow: true //开启合计行
    ,done:function(){
    	// 隐藏列
    	$(".layui-table-box").find("[data-field='orgId']").css("display","none");   
    }
    

    这种方式只对表格的列表格隐藏,不会隐藏整个列如下图所示
    在这里插入图片描述

    3.在表格列中加入 hide属性hide : false,代码如下

    {field : 'orgId', width : 80, title : '单位ID ', hide : false}
    

    在需要做隐藏操作的地方改变属性的汁就可以。如下

    cols[0][2].hide = true;// [0]代表第一个表格,[2]代表第三列,给他的hide属性值改为true即可隐藏该列
    
    展开全文
  • Layui Table隐藏列问题

    万次阅读 2018-06-09 10:55:44
    layui没有提供Table隐藏列的功能(只是写这个文档的时候没有提供)。 第一步:获取Layui的TableBox Jquery对象 var _table_box = $(this._table_elem).next().find(".layui-table-box"); this._table_...

    layui没有提供Table隐藏列的功能(只是写这个文档的时候没有提供)。

    第一步:获取Layui的TableBox Jquery对象

    var _table_box = $(this._table_elem).next().find(".layui-table-box");

    this._table_elem 是指的Table标签的ID 

    layui-table-box 是layui的类名 

     

    第二步:将需要隐藏的列添加 display:none 的样式 :

    _table_box.find("[data-field="+value+"]").csss("display","none");

    value 指的就是需要隐藏列的 field 值 

    附上源码:

    以上是对layui Table的简单封装。

     

    其实只要改行对象有数据,就能取出来比如列名为 :姓名,性别,年龄 而数据为 userid,username,sex,age 

    尽管列名里面没有关于userid的字段,但是取行数据的时候实际上是可以取出来的。

    展开全文
  • Layui table隐藏某一

    千次阅读 2020-01-09 15:44:48
    Layui table隐藏某一 1、使用 【done - 数据渲染完的回调】 ,done(res, curr, count){ $("[data-field='hobby']").css('display', 'none'); ...

                                                                                  Layui table隐藏某一列

    1、使用 【done - 数据渲染完的回调

    ,done(res, curr, count){
        $("[data-field='hobby']").css('display', 'none');    //隐藏
    }

    2、官方文档:https://www.layui.com/doc/modules/table.html#done

    类型:Function,默认值:无
    无论是异步请求数据,还是直接赋值数据,都会触发该回调。你可以利用该回调做一些表格以外元素的渲染。

    table.render({ //其它参数在此省略
      done: function(res, curr, count){
        //如果是异步请求数据方式,res即为你接口返回的信息。
        //如果是直接赋值的方式,res即为:{data: [], count: 99} data为当前页数据、count为数据总长度
        console.log(res);
        
        //得到当前页码
        console.log(curr); 
        
        //得到数据总量
        console.log(count);
      }
    });

    3、思路:返回的数据中,如果字段 is_display 为 yes ,则展示name列,否则隐藏(默认隐藏)。

        相关代码如下所示:

    table.render({
        elem: '#table_id'   //表格ID
        ,url: '/.../.../...'    //请求数据地址
        ,where:  {type : '1', name: 'hello'}//默认传参,可不设置
        ,cols: [[   //列字段设置
            ,{field: 'hobby', width:'30%', title: '爱好'}
            ,{field: 'create_time', title: '时间'}
                ...
        ]]
        ,text: {
            none: '暂无相关数据!' //没有数据默认展示内容
        }
        ,page: false    //是否开启分页
        ,parseData: function(res) {//数据显示
            return {
                code: res.code,
                msg: res.msg,
                count: res.count,
                data: res.data
            }
        }
        //返回的数据中,如果字段is_display为yes,则展示field为hobby的列,否则隐藏(默认隐藏)。
        ,done(res, curr, count){
            $("[data-field='hobby']").css('display', 'none');    //默认隐藏
            let resData = res.data;
            if(resData.length != 0){
                if(resData[0]['is_display'] == 'yes' ){
                    $("[data-field='hobby']").css('display', 'block');
                }
            }
        }
    });

    4、相关博客:Layui动态修改列名

    展开全文
  • layui table隐藏某一

    千次阅读 2019-04-02 15:53:53
    在渲染的layui table中加入回调函数 done: function(res, curr, count){ $("[data-field=‘id’]").css(‘display’,‘none’); }
  • layui table 数据表格 隐藏列

    千次阅读 2020-01-17 10:11:44
    现在国内的模板,也就layui一家独大了,其中的数据...数据表格中保留id,是为了编辑修改的时候获取改行数据的id值,但又不需要展示出来,所以需要隐藏。 id的代码是: , cols: [[ //标题栏 {field: 'data...
  • 为了表格展示美观,对一些内部ID数据进行隐藏,但发现在排序之后,已隐藏会再次出现,导致表格展示的数据错位 原因: done回调,是在render和reload的时候执行,sort方法并不会执行 解决办法: 既然sort放到不...
  • Layui table点击按钮显示隐藏列

    千次阅读 2019-12-19 17:38:15
    var hideArr=['swzj','sjzj'] if($(this)[0].innerHTML === '显示细节'){ for(var i in hideArr){ $("th[data-field='"+ hideArr[i] +"']").removeClass('layui-hide'); $("td[data-field='"+ hideA...
  • layui隐藏列

    万次阅读 2018-08-17 18:09:33
    layui数据表格中隐藏列方式,如果直接在 {field: 'id', title: 'ID', style:'display:none;'},导致thead中th中ID仍然在, 我们要做的是表格头中ID也需要隐藏。 、 官网简单demo如下: layui.use('table', ...
  • layui table 自动表单 隐藏id

    千次阅读 2019-10-11 11:33:24
    现在国内的模板,也就layui一家独大了,其中的数据表格...数据表格中保留id,是为了编辑修改的时候获取改行数据的id值,但又不需要展示出来,所以需要隐藏。 id的代码是: , cols: [[ //标题栏 {field:...
  • layui按条件隐藏表格的实例发布时间:2019-11-03 17:37来源:互联网当前栏目:web技术类我就废话不多说了,直接上关键代码吧!给大家做个参考layui.use(['table','form','laypage'], function() {var table = ...
  • 看了网上很多的教程,各种对field进行隐藏,通过display:none等常规手段,虽然隐藏了,但是整个表格的展现却出了问题。 今天仔细看了文档,原来layui中已经封装了field隐藏的方法: 用法: {field:’id’,title...
  • layui.use(['table', 'common'], function () {var table = layui.table;...var Columns = [{ field: 'Id', title: 'ID' } //该一会隐藏掉, { field: 'field1', title: '1', width: 100, align: ...
  • js相关:layui按条件隐藏表格的实例发布于 2020-5-24|复制链接分享一篇关于layui按条件隐藏表格的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小妖过来看看吧我就废话不多说了,直接上关键代码吧!...
  • 我就废话不多说了,直接上关键代码吧!给大家做个参考 layui.use(['table','form','laypage'], ... id:"item",//用作于隐藏列名为item的 elem: '#QD', url:path+'test.do', cols: [[ //表头 {field: '
  • layui按条件隐藏表格

    万次阅读 2018-11-01 18:53:44
    直接上代码: layui.use(['table','form','laypage'... var table = layui.table ,form = layui.form ,laypage = layui.laypage; layer.load(0); setTimeout(function() { table.render(...
  • 在使用layui做数据表格的时候,插入的数据的id是不是一组连续的数字,那么就需要用到layui的cols的type属性。table.render({elem: '#test',url:'${pageContext.request.contextPath}/findcustomers',cols: [[{align:...
  • 地址:https://github.com/yelog/layui-soul-table

空空如也

空空如也

1 2 3 4 5
收藏数 85
精华内容 34
关键字:

layuitable列隐藏