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

分享 未结 精帖
32 1602
傅小峰
悬赏: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 回复
  • @傅小峰 大佬能否共享下你的ui啊 感觉很漂亮
    1 回复
  • 牛逼啊,大佬
    0 回复
  • 胡歌
    7天前
    666 刚好产品说要 我看看可以放上去了 赞个
    0 回复
  • 胡歌
    7天前
    你这个 更多条件筛选 隐藏和显示 可以分享下吗?前端小白,会用不会写 ,写的也是不太好的代码,求精
    0 回复
  • 挺好的,赞一个。
    0 回复
  • 收藏备用,感谢分享
    0 回复
  • 大佬 有出现这种情况吗?http://fly.layui.com/jie/29386/
    0 回复
  • 我现在使用的Jq 隐藏字段 同样会出现 right fixed字段 重复问题、 没有解决、大佬有遇到吗?
    0 回复
  • 陈豪
    6天前
    牛。[互粉]
    0 回复
  • 胡歌
    6天前
               done: function(res, curr, count){
    //渲染html复选框隐藏和显示
    for(var i=0;tGrid.config.cols[0].length>i;i++){
    console.log(tGrid.config.cols[0][i])
    if(i!=0 && i!=1){
    var html='<div class="layui-col-md6 checkbox_col">\
    <input type="checkbox" name="'+tGrid.config.cols[0][i].field+'" title="'+tGrid.config.cols[0][i].title+'" lay-skin="primary" >\
    </div>';
    $('.hidden_div .cols').append(html)
    }
    }

    $(document).on('click','.checkbox_col',function(){
    if($("#grid").next().find(".layui-table-box").children(".layui-table-header").find("th[data-field='"+$(this).find("input").attr("name")+"']").css("display")=="none"){
    $("#grid").next().find(".layui-table-box").find("[data-field='"+$(this).find("input").attr("name")+"']").css("display","table-cell");
    }else{
    $("#grid").next().find(".layui-table-box").find("[data-field='"+$(this).find("input").attr("name")+"']").css("display","none");
    }
    });
    }
    }));
    这样不用手动一个个加
    0 回复
  • @monodang 互相学习
    0 回复
  • @苦逼代码哥 看了一下,没看到你调用的那个方法的具体写法
    0 回复
  • @苦逼代码哥 重复字段的原因是当列的宽度不足以填满table的宽度时,因为冻结列其实就是一个定位的列浮动在原来的列上,解决方法可以重载表格或者用jq监听宽度变化做出处理。具体的打字也说不清楚,重载表格我试过这个解决方法我试过了,没有问题。
    0 回复
  • @傅小峰 重载表格 会重新请求 有点浪费服务器 我试过那个 到那时那个方案被我Pass了、 我现在用的JQ 直接动态隐藏的列 但是、那个列还是会出来
    因为 fixed: "right" 的属性、还没解决
    0 回复
  • @苦逼代码哥 当列总和宽度小于table宽度时隐藏冻结列:right。当>列总和+冻结列宽时显示。在动态隐藏的时候判断一下就行了。
    0 回复
  • @傅小峰 ok 今天到公司试试、
    0 回复
  • @胡歌 你是说我的更多筛选内容的那个提示怎么写的?还是说筛选内容?
    0 回复
  • 胡歌
    6天前
    就是那个 更多 按钮 筛选条件,你是怎么布局的 我不太会写前端 兼容和 css ,很多在条件太多的情况下 需要隐藏部分[嘻嘻]
    0 回复
  • 0 回复
  • 麟梦
    6天前
    给点html 代码吧[泪]
    0 回复
  • @麟梦 复选框不会写吗?
    0 回复
  • 胡歌
    6天前
    有个小问题:1、选择几个隐藏 2、点击查询 3、再打开隐藏显示弹窗 选择复选框 隐藏和显示 全部无效了 ;只有重新勾上全部,然后关闭弹窗,再打开 就又可以达到效果了
    0 回复
  • [给力] [给力] [给力]
    0 回复
  • 达莫
    5天前
    hidden_col is not defined 定义了 这个函数还是报无效
    0 回复
  • @达莫 hidden_col是我自己定义的js函数名,你检查一下自己写错啥了
    0 回复
  • 达莫
    4天前
    @傅小峰 搞定了,自己写了一下 。赞
    0 回复
  • 枫雪叶归
    22小时前
    楼主6666
    0 回复
  • 枫雪叶归
    18小时前
    123466666
    0 回复