精华内容
下载资源
问答
  • 今天小编就为大家分享layui实现数据表格隐藏列的示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享layui 表格操作按钮动态显示的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享篇解决layui表格内文本超出隐藏的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享layui按条件隐藏表格列的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layui表格隐藏列的简单实现方法

    万次阅读 2018-07-26 19:06:12
    需求:渲染表格的时候,比如id在内的一些是不需要展示给用户看的,但是在操作表格的时候还需要用得到,这就需要隐藏列 的功能 实现效果:页面上不显示,但是能获取到id的值。   实现方法: table.render...

    需求:渲染表格的时候,比如id在内的一些列是不需要展示给用户看的,但是在操作表格的时候还需要用得到,这就需要隐藏列 的功能

    实现效果:页面上不显示,但是能获取到id的值。

     

    实现方法:

        table.render({
          id:'id',    //可以在这里设置需要隐藏的列的字段名,如果是要隐藏多列的话这样写 id:'id,sex'
          elem: '#table'
          ,url:'/html/api/ztable.json'
          ,cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
          ,page: { //支持传入 laypage 组件的所有参数(某些参数除外,如:jump/elem) - 详见文档
            layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
            //,curr: 5 //设定初始在第 5 页
            ,groups: 1 //只显示 1 个连续页码
            ,first: false //不显示首页
            ,last: false //不显示尾页
            
          }
          ,cols: [initTable]       //在id中配置完之后,这里不写那一列,才能实现列的隐藏
          ,page: true
        });

    注意:1.如果需要多列隐藏实现方法是   id:'id,sex',

                 2.在表格的配置中编写完成之后,要注意在cols中不要在写这一列,这样才能实现列的隐藏。而且在获取表格的数据时是能获取到的

    展开全文
  • layui数据表格隐藏列的办法

    万次阅读 2018-10-21 11:36:25
    在使用layui做数据表格的时候,插入的数据的id是不是组连续的数字,那么就需要用到layui的cols的type属性。 table.render({ elem: '#test' ,url:'${pageContext.request.contextPath}/findcustomers' ,...

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

     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)

     

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

      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(隐藏)属性。

      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没有提供Table隐藏列的功能(只是写这个文档的时候没有提供)。 第步:获取Layui的TableBox Jquery对象 var _table_box = $(this._table_elem).next().find(".layui-table-box"); this._table_elem 是指的...
  • 问题描述:多个功能使用同个页面时,有时要求不同的功能中展示的表格列数据不同,这就需要动态设置表格列的显示或隐藏。 解决方案:layui渲染表格数据后有个完成的回调函数,在回调函数中根据你的逻辑条件动态...

    问题描述:多个功能使用同一个页面时,有时要求不同的功能中展示的表格列数据不同,这就需要动态设置表格列的显示或隐藏。

    解决方案:layui渲染表格数据后有个完成的回调函数,在回调函数中根据你的逻辑条件动态设置相应列的显示/隐藏样式,代码如下:

    // 此处只给出了关键代码
    table.render({
                elem: '#tableId',
                url: 'xxxUrl',
                cols: [
                    [
                        {
                            field: 'testA',
                            title: 'testA'
                        },
                        {
                            field: 'testB',
                            title: 'testB'
                        }
                    ]
                ],
                done: function (res, curr, count) { // 表格渲染完成之后的回调
                    if (res.count == null) 
                    { // 无数据时直接返回了
                        return;
                    }
                    // 获取第一列testA的值,此处是根据首列testA的值来判断是否显示testA列
                    // 这里可以换成你的逻辑,也可以对其它列做处理
                    var testAValue = res.data[0].testA;
                    if(testAValue != 1)
                    {
                        // 符合隐藏条件的设置隐藏样式,关键代码!
                		$("[data-field='testA']").css('display','none');
                	}
                    // 重新渲染
                    table.render('select');
                }
            });

    问题解决。

    展开全文
  • 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');

    终于完结……

    展开全文
  • {field: 'address', title: '地址', hide: true}
  • Layui隐藏表格一列

    2020-09-04 21:41:37
    假如我们想要表格中某一列的内容不在页面上出现,可以将其隐藏。 想要隐藏checkID这一列 在回调方法中加入下面这段代码就可以啦,(可以保证页面上隐藏,代码中还可以取到属性的值) 代码放在下面了 done:...
  • 最近也是在用layui,需要隐藏id,不让他显示,但是我又必须有这个,废话不多说了上代码 第一种方法: hide: true (推荐) 我们来看一下结果: 很清楚的看到没有学号那一列 第二种方法: style: ‘display = ...
  • 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 表格隐藏id

    千次阅读 2018-12-29 17:45:33
  • Layui Table 的列隐藏问题

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

    千次阅读 2019-12-11 14:37:55
    方法一 : 在cols中对应的列加hide:ture ; 就隐藏了当前的一列 , 表头和内容都隐藏了 ; 对表的样式没有影响 . 方法二 : 添加样式 display : none;
  • 解决layui 表格样式错位,表头最后多出一列 错误图片: 代码 <style> .layui-table-view .layui-table { width: 100% !importa; } .layui-table th { text-align: -webkit-center !important; } <...
  • layui table隐藏一列

    千次阅读 2019-04-02 15:53:53
    在渲染的layui table中加入回调函数 done: function(res, curr, count){ $("[data-field=‘id’]").css(‘display’,‘none’); }
  • layui 表格操作按钮动态显示变换

    千次阅读 2019-11-10 10:37:30
    在使用Layui表格组件时有时会用到可变换的操作比如显示或隐藏功能,那么就需要按钮的动态变换 实现方法在layui的barDome中加入如下代码 <script type="text/html" id="barDemo"> <a class="layui-btn ...
  • layui 表格操作按钮动态显示

    千次阅读 2019-03-26 10:40:33
    1、根据表格数据动态显示操作按钮 <script type="text/html" id="barDemo"> {{# if (d.event_level ==4){}} <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="known"><i class=...
  • 某些业务场景需要把一些信息带入页面,而这些信息又不用给展示出来,一般来说想到的就是隐藏列,利用LayUI表格的 hide:true 就能实现,它还提供筛选功能,但LayUI的表格筛选功能就有个问题,就是会把表格中隐藏...
  • layui隐藏列

    万次阅读 2018-08-17 18:09:33
    layui数据表格隐藏列方式,如果直接在 {field: 'id', title: 'ID', style:'display:none;'},导致thead中th中ID仍然在, 我们要做的是表格头中ID也需要隐藏。 、 官网简单demo如下: layui.use('table', ...
  • 行代码搞定layui数据表格的表头checkbox复选框隐藏问题。
  • layui动态显示/隐藏表格中的操作按钮 在layui中我们可能会有需要在执行完某操作后使操作框变得不可选或者显示其他内容来进一步操作。例如: 这时我们就需要利用到layui中的一些语法 <script type="text/...
  • 在开发的过程中遇到的layui数据表格的问题 为了表格展示美观,对一些内部ID数据进行隐藏,但发现在排序之后,已隐藏会再次出现,导致表格展示的数据错位 原因: done回调,是在render和reload的时候执行,...
  • 今天小编就为大家分享layui加载表格,绑定新增,编辑删除,查看按钮事件的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

空空如也

空空如也

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

layui表格一列隐藏