layui實現數據表格自動分配列寬的方法

本篇文章展示了layui實現數據表格自動分配列寬的具體操作，代碼簡明扼要容易理解，絕對能讓你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

layui數據表格自動分配列寬效果圖：

適用場景：
主要是解決窗口大小改變后表格尾列出現空白和滾動條的問題
-窗口由小變大，出現表格尾列出現空白

窗口由大變小，出現橫向滾動條

重新加載框架后恢復正常

使用前提：

-每一列的表頭必須全部設置minWidth（依靠minWidth屬性進行的判斷）

-自己中間使用的<iframe>，其他方式效果未知

-頁面只能有一個數據表格，多個數據表格的話需要自己修改代碼（表格的判斷，列數的獲取等）

具體步驟：

-監聽窗口大小改變事件

var resizeTimer;
    $(window).resize(function () {
        if (resizeTimer) {
            clearTimeout(resizeTimer);
        }
        resizeTimer = setTimeout(function () {
            resizeTimer = null;
            dstributionColumnWidth();
        }, 200);
    });
/*
經過測試發現，當窗口大小改變之后，這個方法會調用多次
所以需要使用clearTimeout方法取消由 setTimeout() 方法設置的 timeout
也就是說每一次調用后200毫秒內的下一次調用都會取消上一次的調用
這樣可以大概率保證最終只執行一次
如果還是不行就把200調大點比如500
當然值越小，給人的感覺越流暢
*/

獲取表格的寬度、列數、求出平均列寬

// 表格寬度
var tabWidth = $(".layui-table-header").width();
// 列數
var colNum = $("tr").eq(0).find("th").length;
// 平均列寬
var avgWidth = tabWidth / colNum;
/*
求寬度和列寬的方式比較簡單，也不知道有沒有通用性（水平所限），
自己使用沒有問題，如果大家拿不到值的話就根據自己的情況寫代碼拿到相應的值就行了，
當然要是有更好更優雅的方法也一定要留言告訴我
*/

獲取每一列的data-field和data-minwidth屬性的值并封裝為對象,并按照data-minwidth的值由大到小排序

/**
     * 列對象
     * @param index 所在列在當前行中的索引位置（沒用上可以不要）
     * @param name 對應表頭中設置的field
     * @param minWidth 對象表頭中的minWidth
     * @param width 最終的寬度
     * @constructor
     */
    function Column(index, name, minWidth, width) {
        this.index = index;
        this.name = name;
        this.minWidth = minWidth;
        this.width = width;
    }

// 獲取參數封裝對象
if (cols === undefined) {
            cols = $("tr").eq(0).find("th").map(function (index, item) {
                var col = new Column(index, $(this).attr("data-field"), $(this).attr("data-minwidth"));
                return col;
            });
            // 排序
            cols.sort(function (a, b) {
                return b["minWidth"] - a["minWidth"];
            });
        }

/**
     * 計算列寬
     * @param columns column對象數組
     * @param colNum 列數
     * @param tabWidth 表格寬度
     * @param avgWidth 平均寬度
     */
    function calculateColumnWidth(columns, colNum, tabWidth, avgWidth) {
        // 是否顯示表格橫向滾動條
        showOverflowX = false;
        // 是否完成比較
        var isComplete = false;
        for (var i = 0; i < columns.length; i++) {
            var column = columns[i];
            // 如果計算出的平均列寬比最大的minWidth還要大，那么剩下的就不用比較了，直接賦值即可
            if (column["minWidth"] <= avgWidth || isComplete) {
                column["width"] = parseInt(avgWidth);
                isComplete = true;
            } else {
               /* 
               如果minWidth > 平均列寬，那么就用表格寬度減去minWidth 
               然后除以列數-1，重新求平均列寬
                */
                column["width"] = column["minWidth"];
                tabWidth -= column["minWidth"];
                colNum -= 1;
                avgWidth = tabWidth / colNum;
                // 如果最后一列時，平均列寬大于最小列寬，說明當前頁面的寬度足夠顯示表格，就可以隱藏橫向滾動條，反之則需要顯示滾動條
                if (i == columns.length - 1) {
                    showOverflowX = true;
                }
            }
        }
    }

設置單元格寬度、設置滾動條

// 這里是根據名稱查找相應的th、td標簽，可能有更好的方法，歡迎留言
for (var i = 0; i < cols.length; i++) {
       var col = cols[i];
       var width = cols[i].width;
       $("[data-field='" + cols[i]["name"] + "']").each(function () {
               // 實際修改的是th、td下的div標簽
               // 我使用的是動畫的方式，也可以選擇直接賦值
               $(this).children().eq(0).animate({width: width}, 200);
        })
 }

// 根據showOverflowX的值判斷是否需要顯示滾動條
if (showOverflowX) {
     $('.layui-table-body').css({"overflow-x": "auto"});
} else {
     $('.layui-table-body').css({"overflow-x": "hidden"});
}

完成！
完整代碼

var cols, showOverflowX;

    /**
     * 列對象
     * @param index 所在列在當前行中的索引位置（沒用上可以不要）
     * @param name 對應表頭中設置的field
     * @param minWidth 對象表頭中的minWidth
     * @param width 最終的寬度
     * @constructor
     */
    function Column(index, name, minWidth, width) {
        this.index = index;
        this.name = name;
        this.minWidth = minWidth;
        this.width = width;
    }

    /**
     * 計算列寬
     * @param columns column對象數組
     * @param colNum 列數
     * @param tabWidth 表格寬度
     * @param avgWidth 平均寬度
     */
    function calculateColumnWidth(columns, colNum, tabWidth, avgWidth) {
        showOverflowX = false;
        var isComplete = false;
        for (var i = 0; i < columns.length; i++) {
            var column = columns[i];
            if (column["minWidth"] <= avgWidth || isComplete) {
                column["width"] = parseInt(avgWidth);
                isComplete = true;
            } else {
                column["width"] = column["minWidth"];
                tabWidth -= column["minWidth"];
                colNum -= 1;
                avgWidth = tabWidth / colNum;
                if (i == columns.length - 1) {
                    showOverflowX = true;
                }
            }
        }
    }

    /**
     * 分配列寬
     */
    function dstributionColumnWidth() {
        // 表格寬度
        var tabWidth = $(".layui-table-header").width();
        // 列數
        var colNum = $("tr").eq(0).find("th").length;
        // 平均列寬
        var avgWidth = tabWidth / colNum;

        if (cols === undefined) {
            cols = $("tr").eq(0).find("th").map(function (index, item) {
                var col = new Column(index, $(this).attr("data-field"), $(this).attr("data-minwidth"));
                return col;
            });
            cols.sort(function (a, b) {
                return b["minWidth"] - a["minWidth"];
            });
        }

        calculateColumnWidth(cols, colNum, tabWidth, avgWidth);

        for (var i = 0; i < cols.length; i++) {
            var col = cols[i];
            var width = cols[i].width;
            $("[data-field='" + cols[i]["name"] + "']").each(function () {
                $(this).children().eq(0).animate({width: width}, 200);
            })
        }

        if (showOverflowX) {
            $('.layui-table-body').css({"overflow-x": "auto"});
        } else {
            $('.layui-table-body').css({"overflow-x": "hidden"});
        }
    }

    var resizeTimer;
    $(window).resize(function () {
        if (resizeTimer) {
            clearTimeout(resizeTimer);
        }
        resizeTimer = setTimeout(function () {
            resizeTimer = null;
            dstributionColumnWidth();
        }, 200);
    });

使用方法

layui.config({
    // 放到這個目錄里
    base: '/static/js/extend/'
}).extend({formSelects: 'formSelects-v4.min'});
  // 這里
layui.use(['table', 'element', 'layer', 'jquery', 'form', 'formSelects', 'tools', 'autoColumnWidth'], function () {
    var table = layui.table,
        element = layui.element,
        layer = layui.layer,
        $ = layui.$,
        form = layui.form,
        formSelects = layui.formSelects,
        tools = layui.tools,
        // 這里
        autoColumnWidth = layui.autoColumnWidth;

然后在需要的地方直接調用

autoColumnWidth.resize();

ps:窗口大小監聽代碼還是要自己寫的

想要數據表格加載之后就分配列寬可以寫在done的回調里

done: function () {
      autoColumnWidth.resize();
}

看完上述內容，你們掌握layui實現數據表格自動分配列寬的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！