表格出现表头与内容错位的情况

提问 未结
5 49
小键子
小键子 2018-10-12
悬赏:20飞吻
版本:layui 浏览器:chrome
就是客户在 这里选择隐藏列过后出现的情况表头与内容错位,筛选就是没有往右拉用的chrome,1366分辨率
回帖
  • 425607807_m
    2018-10-12
    表头和内容都隐藏?[挖鼻]
    0 回复
  • 小键子
    2018-10-12
    @425607807_m 隐藏一些字段后就错乱,不知道怎么搞
    0 回复
  • 425607807_m
    2018-10-12
    @小键子 贴代码
    0 回复
  • 小键子
    2018-10-12
    TableFilter.init("filterKey1",cols1,tableReport); //引用模板(对象,表格,表格初始化实例)
    {
    console.log("筛选");
    console.log($("#filterKey1_filter_wrapper"));
    $("#filterKey1_filter_wrapper").find("input[title='订单类型']").next().click();
    $("#filterKey1_filter_wrapper").find("input[title='企业名称']").next().click();

    }


    import Checkbox from "../templates/checkbox.html"
    let {laytpl,form} = layui;
    const filterCols = (cols,deleteCols) =>{
    let cls = JSON.parse(JSON.stringify(cols));
    for(let i = cls.length-1;i>=0;i--){
    let item = cls[i];
    for(let key of deleteCols){
    if(key == item.field){
    cls.splice(i,1);
    }
    }
    }
    return cls;
    };
    export default {
    init(id,cols,tabInst,cb,fn){
    $("#"+id).click((e)=>{
    $("#"+id+"_filter_wrapper").show().css("right","0");
    console.log("弹出窗口");

    // if(id == "filterKey"){
    // console.log("筛选");
    // /**
    // * user.html;其他页面不影响不要删除了
    // * */
    // console.log("筛选");
    // console.log($("#filterKey_filter_wrapper"));
    // $("#filterKey_filter_wrapper").find("input[title='所属机构']").next().click();
    // $("#filterKey_filter_wrapper").find("input[title='部门']").next().click();
    // $("#filterKey_filter_btn").click();
    // }
    });
    let wrapper = $(`<div id="${id}_filter_wrapper" class="filter_wrapper lline flex-v" style="display: none;">
    <div class="bg"></div>
    <div class="flex pd20"><span class="flex-1">字段筛选</span><i class="layui-icon hand">ဆ</i></div>
    <div class="layui-form pdl20 flex-1 scroll" id="${id}_filters" lay-filter="${id}_filters_form"></div>
    <div class="flex flex-pack-between tline pdt10 pdl20 pdr20 pdb10 layui-form flex-align-center" lay-filter="${id}_filters_form_op">
    <input type="checkbox" name="check_all" lay-skin="primary" title="全选" lay-filter="${id}_check_all" checked="">
    <button class="layui-btn layui-bg-cyan" id="${id}_filter_btn">保存</button>
    </div>
    </div>`);
    wrapper.find(".hand").click(()=>{
    $("#"+id+"_filter_wrapper").css("right","-260px");
    setTimeout(()=>{
    $("#"+id+"_filter_wrapper").hide()
    },300)
    });

    wrapper.find(".bg").click(()=>{
    $("#"+id+"_filter_wrapper").css("right","-260px")
    setTimeout(()=>{
    $("#"+id+"_filter_wrapper").hide()
    },300)
    })
    $("body").append(wrapper);
    laytpl(Checkbox).render({filterKey:`${id}_filters`,list:cols}, function(html){
    $(`#${id}_filters`).html(html);
    form.render("checkbox");
    form.on(`checkbox(${id}_filters)`, (data)=>{
    let checked = data.elem.checked;
    if(checked){
    let flag = false;
    $(`#${id}_filters`).find("input[type=checkbox]").each((index,item)=>{
    if(!item.checked){
    flag = true;
    }
    });
    if(flag){
    form.val(`${id}_filters_form_op`,{check_all:""});
    }else{
    form.val(`${id}_filters_form_op`,{check_all:"on"});
    }

    }else{
    form.val(`${id}_filters_form_op`,{check_all:""});
    }

    });
    form.on(`checkbox(${id}_check_all)`, (data)=>{
    let checked = data.elem.checked;
    if(checked){
    let obj = {};
    for(let item of cols){
    obj[item.field] = "on";
    }
    form.val(`${id}_filters_form`,obj);
    }else{
    let obj = {};
    $(`#${id}_filters`).find("input[type=checkbox]").each((index,item)=>{
    let name = item.name;
    let checked = item.checked;
    obj[name] = !checked ? "on":"";
    });
    form.val(`${id}_filters_form`,obj);
    }
    });
    });
    $(`#${id}_filter_btn`).click(()=> {
    let deleteCols = [];
    $(`#${id}_filters`).find("input[type=checkbox]").each((index,item)=>{
    let name = item.name;
    let checked = item.checked;
    if(!checked){
    deleteCols.push(item.name);
    }
    });
    tabInst.reload({
    cols:[filterCols(cols,deleteCols)]
    });
    $("#"+id+"_filter_wrapper").css("right","-260px");
    setTimeout(()=>{
    $("#"+id+"_filter_wrapper").hide();
    if(typeof cb === 'function'){
    cb();
    }
    },300)
    })

    }
    }
    0 回复
  • 这个是layui本身的一个bug,在2.4.3中已经解决,具体可以看看更新的日志!
    0 回复