데이터 테이블의 열 너비를 자동으로 할당하는 구현 방법-레이이 튜토리얼-php.cn

데이터 테이블의 열 너비를 자동으로 할당하는 구현 방법

Layui 데이터 테이블은 열 너비 렌더링을 자동으로 할당합니다:

데이터 테이블의 열 너비를 자동으로 할당하는 구현 방법 적용 가능한 시나리오:
주로 창 크기가 변경된 후 테이블의 마지막 열에 나타나는 공백 및 스크롤 막대 문제를 해결합니다
-창이 작은 것에서 작은 것에서 변경됩니다. 으로 크게, 그리고 테이블의 마지막 열이 나타납니다 공백이 나타납니다

데이터 테이블의 열 너비를 자동으로 할당하는 구현 방법 창이 큰에서 작은으로 변경되고 가로 스크롤 막대가 나타납니다

데이터 테이블의 열 너비를 자동으로 할당하는 구현 방법 프레임을 다시 로드한 후 정상으로 돌아갑니다

데이터 테이블의 열 너비를 자동으로 할당하는 구현 방법 사용 전제 조건:

- 각 열의 헤더는 모두 minWidth를 설정해야 합니다(minWidth 속성을 기준으로 판단)

-저는 을 사용하는데 다른 방법의 효과는 알 수 없습니다

-페이지에는 하나의 데이터 테이블만 있을 수 있습니다. 데이터 테이블이 여러 개인 경우 코드를 직접 수정해야 합니다(테이블 판단, 열 번호 획득 등)

구체적인 단계:

-창 크기 변경 이벤트 듣기

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=&#39;" + cols[i]["name"] + "&#39;]").each(function () {
               // 实际修改的是th、td下的div标签
               // 我使用的是动画的方式，也可以选择直接赋值
               $(this).children().eq(0).animate({width: width}, 200);
        })
 }

// 根据showOverflowX的值判断是否需要显示滚动条
if (showOverflowX) {
     $(&#39;.layui-table-body&#39;).css({"overflow-x": "auto"});
} else {
     $(&#39;.layui-table-body&#39;).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=&#39;" + cols[i]["name"] + "&#39;]").each(function () {
                $(this).children().eq(0).animate({width: width}, 200);
            })
        }

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

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

로그인 후 복사

사용방법

layui.config({
    // 放到这个目录里
    base: &#39;/static/js/extend/&#39;
}).extend({formSelects: &#39;formSelects-v4.min&#39;});
  // 这里
layui.use([&#39;table&#39;, &#39;element&#39;, &#39;layer&#39;, &#39;jquery&#39;, &#39;form&#39;, &#39;formSelects&#39;, &#39;tools&#39;, &#39;autoColumnWidth&#39;], 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();
}

로그인 후 복사