欢迎来到小懒的博客~email:568705236@qq.com

layui table js动态操作列的隐藏和显示

2020/9/3 6:05:22站长

    在layui的示例中,https://www.layui.com/demo/table/toolbar.html,这个头部工具栏有个一个列的隐藏与显示操作。但是这个是需要人去手动点选。

    在layui的文档中,只有表头数据有列初始化时隐藏还是显示的属性,没有动态隐藏列的基础方法。那么只能去layui的table的源代码那抄一下头部工具栏的隐藏实现部分的代码了。代码是不能直接复制的,因为有些方法不能在外部调用,复制出来稍作修改。

layui.use(['table'], function(){
    var table = layui.table;
  
    var kt= table.render({
      //自行补充参数
    });
    TableExt(kt);
    
    //需要隐藏某列时
    //kt.toggleCol(1,false);//列数从0开始
  });
  function TableExt(table){
    table.HIDE = 'layui-hide';
    table.setParentCol = function(hide, parentKey){
        var that = this
        ,options = that.config
        
        ,parentTh = options.elem.next().find('th[data-key="'+ options.index +'-'+ parentKey +'"]') //获取父列元素
        ,parentColspan = parseInt(parentTh.attr('colspan')) || 0;
        
        if(parentTh[0]){
            var arrParentKey = parentKey.split('-')
            ,getThisCol = options.cols[arrParentKey[0]][arrParentKey[1]];

            hide ? parentColspan-- : parentColspan++;

            parentTh.attr('colspan', parentColspan);
            parentTh[parentColspan < 1 ? 'addClass' : 'removeClass'](that.HIDE);
            
            getThisCol.colspan = parentColspan; //同步 colspan 参数
            getThisCol.hide = parentColspan < 1; //同步 hide 参数
            
            //递归,继续往上查询是否有父列
            var nextParentKey = parentTh.data('parentkey');
            nextParentKey && that.setParentCol(hide, nextParentKey);
        }
    };
    table.toggleCol=function(colIndex,isShow){
        var that = this;
        var item2 =table.config.cols[0][colIndex];
        item2.hide = !isShow;
        that.config.elem.next().find('*[data-key="'+ that.config.index +'-'+ item2.key +'"]')[isShow ? 'removeClass' : 'addClass'](that.HIDE);
                      
                      //根据列的显示隐藏,有需要就同步多级表头的父级相关属性值
                    //that.setParentCol(!isShow, parentKey);
                    
                      
                      
                      
                      //重新适配尺寸
                      that.resize();
    }
}


赞赏