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