项目有个需求是可以通过点击隐藏显示表格列,之前用过bootstrap-table有自带这个功能,但是bootstrap-table不能冻结操作列。所以开始使用了layui数据表格,有了冻结列,但是没有动态隐藏列,这就很尴尬了。查了好多方法想自己改,有看见大神改了源码,有的大神推荐重载表格列,后来直接使用了jquery的dom操作实现了。下面看具体:
实现过程:
1.在表格渲染完成后添加了点击按钮
实现过程:
1.在表格渲染完成后添加了点击按钮
done: function(res, curr, count){ $(".layui-table-box").find("th[data-field='guanli']").children(".layui-table-cell").append("<i οnclick='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自由发挥!