标签: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