不重载表格的情况下实现动态隐藏显示列

项目有个需求是可以通过点击隐藏显示表格列，之前用过bootstrap-table有自带这个功能，但是bootstrap-table不能冻结操作列。所以开始使用了layui数据表格，有了冻结列，但是没有动态隐藏列，这就很尴尬了。查了好多方法想自己改，有看见大神改了源码，有的大神推荐重载表格列，后来直接使用了jquery的dom操作实现了。下面看具体：

---

---

---

---

实现过程：

---

1.在表格渲染完成后添加了点击按钮

---

done: function(res, curr, count){
	$(".layui-table-box").find("th[data-field='guanli']").children(".layui-table-cell").append("<i onclick='hidden_col()' role='button' class='fa fa-th '></i>");
}

2.为了后期做存储列配置到数据库，弹出层获取列的隐藏或显示属性。

---

var index =layer.open({
	  title:false,
	  type: 1,
	  area: ['300px', '520px'],
	  fixed: false, //不固定
	  resize:false,
	  maxmin: false,
	  content: $('.hidden_div'),
	  success: function(layero, index){
		var th = $("#zsTable").next().find(".layui-table-box").children(".layui-table-header").find("th");
		for(var i=0;i<th.length;i++){
			if($("#zsTable").next().find(".layui-table-box").children(".layui-table-header").find("th").eq(i).css("display")!="none"){
				var name = $("#zsTable").next().find(".layui-table-box").children(".layui-table-header").find("th").eq(i).attr("data-field");
				$("input[type='checkbox'][name='"+name+"']").attr("checked",'checked');
			}
		}
	  }
});

3.通过点击事件勾选和取消勾选

---

$(".checkbox_col").click(function(){
	if($("#zsTable").next().find(".layui-table-box").children(".layui-table-header").find("th[data-field='"+$(this).find("input").attr("name")+"']").css("display")=="none"){
		$("#zsTable").next().find(".layui-table-box").find("[data-field='"+$(this).find("input").attr("name")+"']").css("display","table-cell");
	}else{
		$("#zsTable").next().find(".layui-table-box").find("[data-field='"+$(this).find("input").attr("name")+"']").css("display","none");
	}
});

4.HTML代码就不贴了，UI自由发挥！