layui-table刷新、筛选等操作时，不改变表格的宽度

layui-table刷新、筛选等操作时，不改变表格的宽度

做了个项目，客户提了个bug,希望手动修改表格的宽度以后，排序啦，筛选了，可以不改变表格的宽度。

找了好久...

😏

有一篇博客，看着挺好，虽然没有解决我的问题（不知道是不是版本的问题），但是也许对在看的有帮助页说不定。

虽然没有解决问题，仍然感谢：

https://blog.csdn.net/anjiongyi/article/details/103980427?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2_{aggregatepage}first_rank_v2~rank_aggregation-9-103980427.pc_agg_rank_aggregation&utm_term=layui%E5%AE%9E%E7%8E%B0table%E5%88%B7%E6%96%B0&spm=1000.2123.3001.4430

。

下面是我的解决方案，傻瓜式解决方案：

平常的js渲染layui table:

layui.use('table', function () {
    table = layui.table;
    element = element;
    //方法级渲染
    tableIns = table.render({
        id: 'xxx',
        elem: '#xxx',
        height: "full-230",
        url: '/aa/bb/cc',
        cols:[[
            {checkbox: true, fixed: true, width: '5%'},
            {title: '序号', width: '5%', templet: function (res) {
                return res.LAY_INDEX;
            }
            },
            .
            .//省略的一些字段
            .
        ]],
        page: true,
        done: function (res, currentCount) {
            console.log("done......")
            //表格渲染完的一些事件
        }
    });
});

那么我们可以在筛选、排序等需要table.reload()的事件之前，改一下这个cols

怎么做呢？

1.把cols提取出来：

var tableCols =  [[
    {checkbox: true, fixed: true, width: '5%'},
    {
        title: '序号', width: '5%', templet: function (res) {
            return res.LAY_INDEX;
        }
    },
    .
    .//这里是省略的字段
    .
]];

2.然后，渲染表格的地方就变成了：

layui.use('table', function () {
    table = layui.table;
    element = element;
    //方法级渲染
    tableIns = table.render({
        id: 'xxx',
        elem: '#xxx',
        height: "full-230",
        url: '/aa/bb/cc',
        cols:tableCols,
        page: true,
        done: function (res, currentCount) {
            console.log("done......")
            //表格渲染完的一些事件
        }
    });
});

3.写一个方法，动态获取当前的表格各个列的宽度：

function saveTableWidth(){
    //把表格的宽度设置到数组里面：
    var theTable = $(".layui-table")[0];
    var theThs = $(theTable).find('th');
    $.each(theThs,function(ind,e){
        //这里为什么是6呢？因为我的表格一共有7列，数组的下标是从0到6，所以大于6，tableCols就越界了，
        //但是如果列被认为拉超过屏幕宽度，theThs会多一个元素，这样处理，防止报错。
       if(ind > 6){
           return false;
        }
        tableCols[0][ind].width = $(e)[0].clientWidth;
    })
}

4.在筛选方法调用：

//筛选按钮调用的方法：
function query(a) {
   //组装的筛选的条件
    var jsondata = {
        ooo: ooo,
        xxx: xxx
    };
    //调用动态设置宽度的方法
    saveTableWidth();
    //注意，reload里面要带上cols:tableCols，不然会不生效的！！
    table.reload('projectList', {where: jsondata,cols: tableCols});
}