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

分享 未结 精帖 37 4351
傅小峰
傅小峰 2018-7-8
悬赏:20飞吻
项目有个需求是可以通过点击隐藏显示表格列,之前用过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自由发挥!





回帖
  • [good] 正准备折腾呢
    1 回复
  • 厉害厉害,点赞点赞[威武]
    1 回复
  • Kiss_night
    2018-7-14
    @傅小峰 大佬能否共享下你的ui啊 感觉很漂亮
    1 回复
  • 牛逼啊,大佬
    0 回复
  • 胡歌
    2018-7-8
    666 刚好产品说要 我看看可以放上去了 赞个
    0 回复
  • 胡歌
    2018-7-8
    你这个 更多条件筛选 隐藏和显示 可以分享下吗?前端小白,会用不会写 ,写的也是不太好的代码,求精
    0 回复
  • 挺好的,赞一个。
    0 回复
  • 收藏备用,感谢分享
    0 回复
  • 大佬 有出现这种情况吗?http://fly.layui.com/jie/29386/
    0 回复
  • 我现在使用的Jq 隐藏字段 同样会出现 right fixed字段 重复问题、 没有解决、大佬有遇到吗?
    0 回复