在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();
}
}
