精华内容
下载资源
问答
  • 在使用layui做数据表格的时候,插入的数据的id是不是组连续的数字,那么就需要用到layui的cols的type属性。table.render({elem: '#test',url:'${pageContext.request.contextPath}/findcustomers',cols: [[{align:...

    13922ed20db31fb5d90af0b8b80a7ab1.png

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

    8a02962b0a3a6c446cd87ceec62526af.pngtable.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)

    51229fb2c0a4b51406b41841677ef4ab.png

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

    70720caac53f2c88cbc58789901301c9.pngtable.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(隐藏)属性。

    48ed765a8a34c709d97d7d68eeb74207.pngtable.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

    });

    更多layui知识请关注layui使用教程栏目。

    展开全文
  • 今天小编就为大家分享layui实现数据表格隐藏列的示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 某些业务场景需要把一些信息带入页面,而这些信息又不用给展示出来,一般来说想到的就是隐藏列,利用LayUI表格的 hide:true 就能实现,它还提供筛选功能,但LayUI的表格筛选功能就有个问题,就是会把表格中隐藏...

    某些业务场景需要把一些信息带入页面,而这些信息又不用给展示出来,一般来说想到的就是隐藏列,利用LayUI表格的 hide:true 就能实现,它还提供筛选功能,但LayUI的表格筛选功能就有个问题,就是会把表格中隐藏的列也给显示出来,如图
    在这里插入图片描述
    列名为ID的很明显我已经设置成了hide,效果图(表格)中不会显示这一列,而筛选中有出现了这一列,这样在筛选中如果把ID给勾上了,ID就会显示出来,那我们前面设置的 hide:true 就没有任何意义了,后来在群里面交流了一波,解决了这个问题,就是不用 hide:true 这个属性,直接拿这一行的所有的数据,也能达到目的,举个例子:
    在这里插入图片描述查看详情(按钮或者链接(A标签),我这里是按钮 ),

    {
    	title: '操作',
    	width: 120,
    	fixed: 'right',
    	align: 'center',
    	templet : function (cell) {
    		//这里的cell可以拿到当前行的所有数据
    		var id = parseInt(cell.id);
    		return '<div><a class="layui-btn layui-btn-xs" lay-event="chakan" style="background-color:#009688">查看详情</a></div>'
    	}
    },
    

    一般来说会传一个ID,只需要监听图中的查看按钮就可以了

    //监听按钮事件
    table.on('toolbar(table)', function(obj){
    	var data = obj.data;
    	//获得 lay-event 对应的值
    	var layEvent = obj.event; 
    	//获得ID
    	var id = data.id;
    	
    	//这里可以用if判断,也可以用swith,效果一样
    	if(layEvent === 'chakan'){ //查看
    		window.open('${base}/XXX/xxx?ID'+id,'_self');
    		return;
    	}
    
    	switch (obj.event) {
    		case 'chakan':			//查看
    			window.open('${base}/XXX/xxx?ID'+id,'_self');
    			break;
    	}
    })
    
    //好像监听事件代码写上下这两种都可以监听到
    
    //监听按钮事件
    table.on('tool(table)',function (obj) {
    	
    })
    

    这样查看功能就实现了,且筛选也不会出现隐藏的字段了

    展开全文
  • 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隐藏表格一列

    2020-09-04 21:41:37
    假如我们想要表格中某一列的内容不在页面上出现,可以将其隐藏。 想要隐藏checkID这一列 在回调方法中加入下面这段代码就可以啦,(可以保证页面上隐藏,代码中还可以取到属性的值) 代码放在下面了 done:...

    假如我们想要表格中某一列的内容不在页面上出现,可以将其隐藏。

    想要隐藏checkID这一列

    在回调方法中加入下面这段代码就可以啦,(可以保证页面上隐藏,代码中还可以取到属性的值)

    代码放在下面了

    done:function(res,curr,count){ // 隐藏列
      $(".layui-table-box").find("[data-field='你想要隐藏的列']").css("display","none");
                         }

     

    展开全文
  • 该楼层疑似违规已被系统折叠隐藏此楼查看此楼Layui表格中单元格样式可通过templet-自定义模板改变单元格内容样式:在默认情况下,单元格的内容是完全按照数据接口返回的content原样输出的,如果你想对某的单元格...
  • 最近也是在用layui,需要隐藏id,不让他显示,但是我又必须有这个,废话不多说了上代码 第一种方法: hide: true (推荐) 我们来看一下结果: 很清楚的看到没有学号那一列 第二种方法: style: ‘display = ...
  • 今天小编就为大家分享layui按条件隐藏表格列的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • js相关:layui按条件隐藏表格列的实例发布于 2020-5-24|复制链接分享篇关于layui按条件隐藏表格列的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小妖过来看看吧我就废话不多说了,直接上关键代码吧!...
  • 传输layui表格的ID

    千次阅读 2019-07-29 09:27:09
    在渲染layui表格的需要在控制器先查询数据,在查询数据的时候把数据库表的主键ID也一并查询,然后把数据返回到视图的layui表格layui表格一列隐藏的列来接收ID, 接着渲染出一列操作按钮的列,然后用传参的方式...
  • 该楼层疑似违规已被系统折叠隐藏此楼查看此楼Layui表格中单元格样式可通过templet-自定义模板改变单元格内容样式:在默认情况下,单元格的内容是完全按照数据接口返回的content原样输出的,如果你想对某的单元格...
  • 该楼层疑似违规已被系统折叠隐藏此楼查看此楼当表格有两个或多个不同的状态时,...如图所示:想要做到这样的效果,首先要在表头参数加上templet(自定义模板)并给它个名字,如代码所示:tabReceived= layuiTable.r...
  • 方法一 : 在cols中对应的列加hide:ture ; 就隐藏了当前的一列 , 表头和内容都隐藏了 ; 对表的样式没有影响 . 方法二 : 添加样式 display : none;
  • {field: 'address', title: '地址', hide: true}
  • 然后表头第一列需要type=“check”复选框。这样才能知道你选中了哪一行,接着通过循环选中行的长度,将该行的ID字段一个个添加到数组中,这样就获取到了需要删除多行的ID值了。 全程图片,完整过程!如不懂,可私聊...
  • 在开发的过程中遇到的layui数据表格的问题 为了表格展示美观,对一些内部ID数据进行隐藏,但发现在排序之后,已隐藏会再次出现,导致表格展示的数据错位 原因: done回调,是在render和reload的时候执行,...
  • 该楼层疑似违规已被系统折叠隐藏此楼查看此楼当表格有两个或多个不同的状态时,...如图所示:想要做到这样的效果,首先要在表头参数加上templet(自定义模板)并给它个名字,如代码所示:tabReceived= layuiTable.r...

空空如也

空空如也

1 2 3
收藏数 41
精华内容 16
关键字:

layui表格一列隐藏