码迷,mamicode.com
首页 > 编程语言 > 详细

[Javascript] 动态隐藏和显示 Layui 数据表格的列

时间:2019-10-11 18:02:51      阅读:1935      评论:0      收藏:0      [点我收藏+]

标签:idt   col   代码   var   宽度   field   UNC   soft   单元   

需求:

  设置一个按钮,动态隐藏或展示数据表格的列。默认隐藏部分列,点击按钮进行显示,再次点击就隐藏。

  基于 layui 的数据表格。

 

代码:

  绑定按钮事件。

  这里需要设置的列比较多,表格字段名格式:d1_roi、d1_ltv、d2_roi、d2_ltv...

  原理:先清除每列的 layui-hide 的 class,然后给当前列每个格子加上固定宽度即可。

 1 //拓展列切换
 2         $(".js-showhide").click(function(){
 3             var roi_key = ‘‘;
 4             var ltv_key = ‘‘;
 5             var roi_cell_key = ‘‘;
 6             var ltv_cell_key = ‘‘;
 7             var days = [2,4,5,6,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,40,50,60,70,80,90];
 8 
 9             $.each(days, function (key, d) {
10                 //每一列的 key
11                 roi_key = "[data-field=‘d"+d+"_roi‘]";
12                 ltv_key = "[data-field=‘d"+d+"_ltv‘]";
13 
14                 //每个单元格的 类
15                 roi_cell_key = ‘laytable-cell-‘ + $(roi_key).attr(‘data-key‘);
16                 ltv_cell_key = ‘laytable-cell-‘ + $(ltv_key).attr(‘data-key‘);
17 
18                 //LTV 列
19                 if($(ltv_key).hasClass(‘layui-hide‘)){
20                     $(ltv_key).removeClass(‘layui-hide‘);
21                     $(‘.‘ + ltv_cell_key).css(‘width‘, ‘70px‘);
22                 }else{
23                     $(ltv_key).addClass(‘layui-hide‘);
24                 }
25 
26                 //ROI 列
27                 if($(roi_key).hasClass(‘layui-hide‘)){
28                     $(roi_key).removeClass(‘layui-hide‘);
29                     $(‘.‘ + roi_cell_key).css(‘width‘, ‘70px‘);
30                 }else{
31                     $(roi_key).addClass(‘layui-hide‘);
32                 }
33             });
34         });

[Javascript] 动态隐藏和显示 Layui 数据表格的列

标签:idt   col   代码   var   宽度   field   UNC   soft   单元   

原文地址:https://www.cnblogs.com/reader/p/11655588.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!