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});
}