layui實(shí)現(xiàn)數(shù)據(jù)表格自動(dòng)分配列寬的方法

本篇文章展示了layui實(shí)現(xiàn)數(shù)據(jù)表格自動(dòng)分配列寬的具體操作，代碼簡(jiǎn)明扼要容易理解，絕對(duì)能讓你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

layui數(shù)據(jù)表格自動(dòng)分配列寬效果圖：

適用場(chǎng)景：
主要是解決窗口大小改變后表格尾列出現(xiàn)空白和滾動(dòng)條的問題
-窗口由小變大，出現(xiàn)表格尾列出現(xiàn)空白

窗口由大變小，出現(xiàn)橫向滾動(dòng)條

重新加載框架后恢復(fù)正常

使用前提：

-每一列的表頭必須全部設(shè)置minWidth（依靠minWidth屬性進(jìn)行的判斷）

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

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

具體步驟：

-監(jiān)聽窗口大小改變事件

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

獲取表格的寬度、列數(shù)、求出平均列寬

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

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

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

// 獲取參數(shù)封裝對(duì)象
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"];
            });
        }

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

設(shè)置單元格寬度、設(shè)置滾動(dòng)條

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

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

完成！
完整代碼

var cols, showOverflowX;

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

    /**
     * 計(jì)算列寬
     * @param columns column對(duì)象數(shù)組
     * @param colNum 列數(shù)
     * @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();
        // 列數(shù)
        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({
    // 放到這個(gè)目錄里
    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;

然后在需要的地方直接調(diào)用

autoColumnWidth.resize();

ps:窗口大小監(jiān)聽代碼還是要自己寫的

想要數(shù)據(jù)表格加載之后就分配列寬可以寫在done的回調(diào)里

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

看完上述內(nèi)容，你們掌握layui實(shí)現(xiàn)數(shù)據(jù)表格自動(dòng)分配列寬的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！