[Javascript] 動態隱藏和顯示 Layui 數據表格的列

需求：

　　設置一個按鈕，動態隱藏或展示數據表格的列。默認隱藏部分列，點擊按鈕進行顯示，再次點擊就隱藏。

　　基於 layui 的數據表格。

 

代碼：

　　綁定按鈕事件。

　　這里需要設置的列比較多，表格字段名格式：d1_roi、d1_ltv、d2_roi、d2_ltv...

　　原理：先清除每列的 layui-hide 的 class，然后給當前列每個格子加上固定寬度即可。

//拓展列切換
        $(".js-showhide").click(function(){
            var roi_key = '';
            var ltv_key = '';
            var roi_cell_key = '';
            var ltv_cell_key = '';
            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];

            $.each(days, function (key, d) {
                //每一列的 key
                roi_key = "[data-field='d"+d+"_roi']";
                ltv_key = "[data-field='d"+d+"_ltv']";

                //每個單元格的 類
                roi_cell_key = 'laytable-cell-' + $(roi_key).attr('data-key');
                ltv_cell_key = 'laytable-cell-' + $(ltv_key).attr('data-key');

                //LTV 列
                if($(ltv_key).hasClass('layui-hide')){
                    $(ltv_key).removeClass('layui-hide');
                    $('.' + ltv_cell_key).css('width', '70px');
                }else{
                    $(ltv_key).addClass('layui-hide');
                }

                //ROI 列
                if($(roi_key).hasClass('layui-hide')){
                    $(roi_key).removeClass('layui-hide');
                    $('.' + roi_cell_key).css('width', '70px');
                }else{
                    $(roi_key).addClass('layui-hide');
                }
            });
        });