layui table中固定表頭,彈框縮放之后,表頭對不齊問題


問題描述:

在彈框中的表格,表格設置height屬性

如果表格數據太多,表頭會固定,只有表內容會滾動

拖動彈框右下角縮放彈框時,表格的頭部對不齊

正常顯示如圖:

縮放之后如圖:

 

 

解決辦法:

layer有一個resizing屬性,是彈框縮放結束的回調放方法

在回調之后重新根據數據列設置表頭的寬度。

resizing: function (layero) {
    var tableDom = layero.find('.layui-table-box');
    var theadTable = tableDom.find('.layui-table-header');
    var tbodyTable = tableDom.find('.layui-table-body');
    tbodyTable.css({
        'overflow': 'auto'
    });
    theadTable.css('width', 'auto');
    theadTable.find('table').css('width', 'auto');
    var tbodyTrTable = tbodyTable.find('tr').eq(0);
    if (tbodyTrTable.length != 0) {
        theadTable.find('th').each(function (i) {
            var tdDom = tbodyTrTable.find('td').eq(i);
            $(this).css({
                'width': tdDom.outerWidth(true) + 'px'
            });
        });
    } else {
        theadTable.find('table').css('width', '100%');
    }
    tableDom.find('.layui-form').css('height', tbodyTable.outerHeight(true) + theadTable.outerHeight(true) + 'px');
 }


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM