精华内容
下载资源
问答
  • layui没有提供Table隐藏列的功能(只是写这个文档的时候没有提供)。 第一步:获取Layui的TableBox Jquery对象 var _table_box = $(this._table_elem).next().find(".layui-table-box"); this._table_elem 是指的...
  • 今天小编就为大家分享一篇layui实现数据表格隐藏列的示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇layui按条件隐藏表格的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 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隐藏某一

    千次阅读 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-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 数据表格 隐藏列

    千次阅读 2020-01-17 10:11:44
    现在国内的模板,也就layui一家独大了,其中的数据...数据表格中保留id,是为了编辑修改的时候获取改行数据的id值,但又不需要展示出来,所以需要隐藏。 id的代码是: , cols: [[ //标题栏 {field: 'data...

    现在国内的模板,也就layui一家独大了,其中的数据表格功能强大,但我不会用python或者django拼接json,输出发送给数据表格,那只好用笨办法,循环遍历吧。

     

    数据表格中保留id列,是为了编辑修改的时候获取改行数据的id值,但又不需要展示出来,所以需要隐藏。

    id列的代码是:

    , cols: [[ //标题栏
                        {field: 'data_id', title: 'ID', width: 50,style:'display:none;'}

    这个代码就可以把下面的id列的值隐藏起来,但标题栏的id还在,那么,问题来了,就用强大的jquery解决呗。

     $('table.layui-table thead tr th:eq(0)').addClass('layui-hide');

    当有多个表格的时候,发现上面的代码只能把第一个表的第一列标题栏给隐藏起来,如果一个页面有多个表格需要用:

     $('table.layui-table thead tr th:nth-child(1)').addClass('layui-hide');

    ok,完美解决。

     

    哦,还有问题,如果表格中有选择框,默认会占据表格第一列,这个时候,上面的代码就出错了。只能推到,使用第一个代码,一个一个的选择。注意,layui的数据表格,自动会生成5个表格

    我当前页面只有两个表格,一个常规,一个有选择框,搜索发现里面竟然有10个 <table  开头,所以隐藏列只能:

    $('table:eq(1).layui-table thead tr th:eq(0)').addClass('layui-hide');
                $('table:eq(6).layui-table thead tr th:eq(1)').addClass('layui-hide');

    终于完结……

    展开全文
  • layui table隐藏某一

    千次阅读 2019-04-02 15:53:53
    在渲染的layui table中加入回调函数 done: function(res, curr, count){ $("[data-field=‘id’]").css(‘display’,‘none’); }
  • layuitable设置某默认隐藏 设置属性 hide:true , { field: 'goodsqty_wx', title: '卫星门店库存', style: "text-align:left", align: "center", sort: true, hide: true }
  • 今天小编就为大家分享一篇layui表格 自动适应大小失效的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 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_...
  • layuiTable固定

    千次阅读 2021-05-17 16:00:42
    平常写layuiTable表格的时候,如果太多就会发现一些经常查看的信息就需要来回拖动滚动条才能看到,十分麻烦。如果有什么办法可以让经常查看的那一定在一旁会不会方便很多呢? 其实要把经常查看的那一定在一旁...
  • layui 隐藏table的某一

    千次阅读 2020-07-14 10:16:38
    table lay-filter="goods-table" id="goods-table" class="table-list my-table-list" cellspacing="0" cellpadding="0" style="display: none;"> <thead> <tr> <th lay-data...
  • 为了表格展示美观,对一些内部ID数据进行隐藏,但发现在排序之后,已隐藏会再次出现,导致表格展示的数据错位 原因: done回调,是在render和reload的时候执行,sort方法并不会执行 解决办法: 既然sort放到不...
  • layui-table 注入点灵魂 当前layui版本 v2.5.6 在线demo及文档: 国内下载地址: 扩展功能 表头筛选、自定义条件(支持前端筛选、后台筛选介绍请看 ) 拖动调整顺序、隐藏显示 excel导出(根据筛选条件和...
  • 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 Table列的显示与隐藏可以通过CSS样式来控制,但是效果不是很满意。 这里我通过修改列hide属性后重载表格来实现个别列的显示与隐藏。 1.单独定义表格形式: let cols1 = [ { type: 'numbers', title: '...
  • Layui table复选框禁止勾选 var list = [0,1,3];//获得禁用的tr的行index //遍历设置复选框禁用 for(var i=0;i<list.length;i++){ $(".layui-table tr[data-index="+list[i]+"] input[type='checkbox']").prop...
  • layui table设置表格单元格换行 css /** 控制表格单元格换行 **/ .layui-table-cell { height: auto; word-break: normal; display: block; white-space: pre-wrap; word-wrap: break-word; overflow: ...
  • 解决方法:只需在done回调函数执行以下方法 done: function(res, curr, count){ $(".layui-table-main tr").each(function (index ,val) { $($(".layui-table-fixed .layui-table-b...
  • layui隐藏列

    万次阅读 2018-08-17 18:09:33
    layui数据表格中隐藏列方式,如果直接在 {field: 'id', title: 'ID', style:'display:none;'},导致thead中th中ID仍然在, 我们要做的是表格头中ID也需要隐藏。 、 官网简单demo如下: layui.use('table', ...
  • 同一张表,在不同的条件下显示数据,但有一数据在条件A下不需要显示,那么如何隐藏这一呢? ctrl+c+v 一下是最直接粗暴的方式了,但是这么low的方法自然匹配不了你我的颜值。 可以看到,基础参数cols其实是一个...
  • 这里写自定义目录标题前端代码页面脚本代码 ##前端界面效果图 前端代码 <style type="text/css"> .nav-tabs li { width: 15%; text-align: center; } .ui.button { cursor: pointer;... outline:
  • 针对layui table列隐藏问题有以下几种方法 1.在需要隐藏的列加CSS样式来控制 {field: 'data_id', title: 'ID', width: 50,style:'display:none;'} 但是这种处理方式知识对列中的值隐藏,对列标题不会做任何作用。...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 745
精华内容 298
关键字:

layuitable列隐藏