layui怎么实现数据表格自动分配列宽_程序开发

layui怎么实现数据表格自动分配列宽

创始人

2024-12-17 08:41:03

0次

适用场景：主要是解决窗口大小改变后表格尾列出现空白和滚动条的问题-窗口由小变大，出现表格尾列出现空白

窗口由大变小，出现横向滚动条

重新加载框架后恢复正常

使用前提：

-每一列的表头必须全部设置minWidth（依靠minWidth属性进行的判断）

-自己中间使用的，其他方式效果未知</p><p>-页面只能有一个数据表格，多个数据表格的话需要自己修改代码（表格的判断，列数的获取等）</p><p>具体步骤：</p><p>-监听窗口大小改变事件</p><pre class="brush:js;toolbar:false">var resizeTimer;    $(window).resize(function () {        if (resizeTimer) {            clearTimeout(resizeTimer);        }        resizeTimer = setTimeout(function () {            resizeTimer = null;            dstributionColumnWidth();        }, 200);    });/*经过测试发现，当窗口大小改变之后，这个方法会调用多次所以需要使用clearTimeout方法取消由 setTimeout() 方法设置的 timeout也就是说每一次调用后200毫秒内的下一次调用都会取消上一次的调用这样可以大概率保证最终只执行一次如果还是不行就把200调大点比如500当然值越小，给人的感觉越流畅*/</pre><p>获取表格的宽度、列数、求出平均列宽</p><pre class="brush:js;toolbar:false;">// 表格宽度var tabWidth = $(".layui-table-header").width();// 列数var colNum = $("tr").eq(0).find("th").length;// 平均列宽var avgWidth = tabWidth / colNum;/*求宽度和列宽的方式比较简单，也不知道有没有通用性（水平所限），自己使用没有问题，如果大家拿不到值的话就根据自己的情况写代码拿到相应的值就行了，当然要是有更好更优雅的方法也一定要留言告诉我*/</pre><p>获取每一列的data-field和data-minwidth属性的值并封装为对象,并按照data-minwidth的值由大到小排序</p><pre class="brush:js;toolbar:false">/**     * 列对象     * @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;                }            }        }    }</pre><p>设置单元格宽度、设置滚动条</p><pre class="brush:js;toolbar:false">// 这里是根据名称查找相应的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"});}</pre><p>完成！完整代码</p><pre class="brush:js;toolbar:false">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);    });</pre><p>使用方法</p><pre class="brush:js;toolbar:false">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;</pre><p>然后在需要的地方直接调用</p><pre class="brush:js;toolbar:false">autoColumnWidth.resize();</pre><p>ps:窗口大小监听代码还是要自己写的</p><p>想要数据表格加载之后就分配列宽可以写在done的回调里</p><pre class="brush:js;toolbar:false">done: function () {      autoColumnWidth.resize();}</pre>  </div>  <div class="mt-5">  </div> <div class="mt-5"> <p class="fc-show-prev-next"> <strong>上一篇：</strong><a href="/kaifa/show-14083089.html">jquery中怎么对select进行操作</a><br> </p> <p class="fc-show-prev-next"> <strong>下一篇：</strong><a href="/kaifa/show-14083091.html">JS数组基础知识是什么</a> </p> </div>  <div class="d-flex flex-stack mb-2 mt-10">  <h3 class="text-dark fs-5 fw-bold text-gray-800">相关内容</h3>  </div> <div class="separator separator-dashed mb-9"></div>  <div class="row g-10"> </div> </div>  </div>   <div class="col-xl-4 mt-0">  <div class="card card-flush h-md-100">  <div class="card-header pt-5 ">  <h3 class="card-title align-items-start flex-column">  <div class="d-flex align-items-center mb-2">  <span class="fs-5 fw-bold text-gray-800 ">热门资讯</span>  </div>  </h3>  </div>   <div class="card-body pt-3">  <div class="d-flex flex-stack mb-7">  <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/uploadfile/[db:缩略图]')"></div> </div>   <div class="m-0"> <a href="/weixiu/show-14537931.html" class="text-dark fw-bold text-hover-primary fs-6">空调连续工作多久需要停机休息</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">空调连续工作的时间取决于多个因素，包括空调的型号、功率、使用环境和维护情况等。一般来说，空调可以连续...</span> </div>  </div>  <div class="d-flex flex-stack mb-7">  <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/uploadfile/[db:缩略图]')"></div> </div>   <div class="m-0"> <a href="/weixiu/show-14537930.html" class="text-dark fw-bold text-hover-primary fs-6">空调哪个符号是除湿的</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">空调除湿功能通常用一个水滴形状的符号表示。不同品牌和型号的空调遥控器可能会有所差异，但一般来说，除湿...</span> </div>  </div>  <div class="d-flex flex-stack mb-7">  <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/uploadfile/[db:缩略图]')"></div> </div>   <div class="m-0"> <a href="/weixiu/show-14537929.html" class="text-dark fw-bold text-hover-primary fs-6">格力空调多长时间加一次氟利昂</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">1、一般情况下，空调对氟利昂的使用量是非常小的，所以在空调使用了四年左右的时候再考虑加也没问题。2、...</span> </div>  </div>  <div class="d-flex flex-stack mb-7">  <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/uploadfile/[db:缩略图]')"></div> </div>   <div class="m-0"> <a href="/weixiu/show-14537928.html" class="text-dark fw-bold text-hover-primary fs-6">空调用多长时间需要加氟一次</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">一般情况下是五年。当出现以下这几种情况时，空调才需要加氟。1、空调的室内机和室外机各有两个接口，当接...</span> </div>  </div>  <div class="d-flex flex-stack mb-7">  <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/uploadfile/202609/83c0c0800a58e3b.jpg')"></div> </div>   <div class="m-0"> <a href="/news/show-14537927.html" class="text-dark fw-bold text-hover-primary fs-6">格调生活·C标思享荟：卡萨帝在...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">9月12日的郑州龙湖金融岛，夜风轻拂，灯光璀璨。“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑...</span> </div>  </div>  <div class="d-flex flex-stack mb-7">  <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/uploadfile/202609/bd5bdfc6ba7da8c.jpg')"></div> </div>   <div class="m-0"> <a href="/news/show-14537926.html" class="text-dark fw-bold text-hover-primary fs-6">品牌价值破千亿、高端份额持续领...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">9月12日，“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑州站”在郑州龙湖金融岛举办。2026...</span> </div>  </div>  <div class="d-flex flex-stack mb-7">  <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/uploadfile/[db:缩略图]')"></div> </div>   <div class="m-0"> <a href="/weixiu/show-14537925.html" class="text-dark fw-bold text-hover-primary fs-6">空调主板坏了修800还是换新的</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">空调主板坏了是修还是换新，需要考虑多个因素，以下是一些建议：1. 维修成本：如果维修费用较低，比如 ...</span> </div>  </div>  <div class="d-flex flex-stack mb-7">  <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/uploadfile/[db:缩略图]')"></div> </div>   <div class="m-0"> <a href="/weixiu/show-14537924.html" class="text-dark fw-bold text-hover-primary fs-6">空调开多久需要休息多长时间</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">问题：空调开多久需要休息多长时间回答：1、在使用空调的过程中，一般空调开7~8个小时左右需要休息2~...</span> </div>  </div>  <div class="d-flex flex-stack mb-7">  <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/uploadfile/[db:缩略图]')"></div> </div>   <div class="m-0"> <a href="/weixiu/show-14537923.html" class="text-dark fw-bold text-hover-primary fs-6">中央空调多长时间清洗一次</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">1、一般空调开机前清洗一次即可，空调开机中间时段再清洗一次，空调关机时清洗一次，这样比较合理。2、空...</span> </div>  </div>  <div class="d-flex flex-stack mb-7">  <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/uploadfile/[db:缩略图]')"></div> </div>   <div class="m-0"> <a href="/weixiu/show-14537922.html" class="text-dark fw-bold text-hover-primary fs-6">中央空调氟利昂多久加一次</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">看空调制热和制冷程度，很多人的观点认为氟利昂必须一年放一次，其实这个观点是错误的，理解上面有点偏差，...</span> </div>  </div> </div>  </div>  </div>  </div> </div>  </div>  </div>   <div id="kt_app_footer" class="app-footer">  <div class="app-container container-xxl d-flex flex-column flex-md-row flex-center flex-md-stack py-3">  <div class="text-dark order-2 order-md-1"> <span class="text-muted fw-semibold me-1">2026 ©</span> 太卓网<a href="http://www.yexian114.com/">叶县生活网</a> <a href="https://www.wxx86.cn/">编程知识网</a> <a href="http://www.kcwzh.com/">开创游戏网</a> <a href="https://www.caiding5.net">菜丁网</a><a href="http://cn.office369.com">奥飞商务网</a> <a href="http://www.zlnznjj.com/">众乐知识网</a><a href="http://www.lhjia.com/">乐活家</a><a href="http://www.nengyuan100.com/">能源100网</a> <a href="http://it.tdroid.net/">泰达科技</a><a href="http://cn.tdroid.net/">太卓开发网</a><a href="http://cn.yuansudz.com/">元素科技网</a><a href="http://www.80hlw.com/">八零商务网</a><a href="http://game.tdroid.net/">土豆游戏网</a> </div>   <ul class="menu menu-gray-600 menu-hover-primary fw-semibold order-1"> <li class="menu-item"> <a href="/news" target="_blank" class="menu-link px-2">科技资讯</a> </li> <li class="menu-item"> <a href="/jishu" target="_blank" class="menu-link px-2">技术分享</a> </li> <li class="menu-item"> <a href="/kaifa" target="_blank" class="menu-link px-2">程序开发</a> </li> <li class="menu-item"> <a href="/weixiu" target="_blank" class="menu-link px-2">设备维修</a> </li> </ul>  </div>  </div>  </div>  </div>  </div>  </div>  <div id="kt_scrolltop" class="scrolltop" data-kt-scrolltop="true">  <span class="svg-icon"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect opacity="0.5" x="13" y="6" width="13" height="2" rx="1" transform="rotate(90 13 6)" fill="currentColor"></rect> <path d="M12.5657 8.56569L16.75 12.75C17.1642 13.1642 17.8358 13.1642 18.25 12.75C18.6642 12.3358 18.6642 11.6642 18.25 11.25L12.7071 5.70711C12.3166 5.31658 11.6834 5.31658 11.2929 5.70711L5.75 11.25C5.33579 11.6642 5.33579 12.3358 5.75 12.75C6.16421 13.1642 6.83579 13.1642 7.25 12.75L11.4343 8.56569C11.7467 8.25327 12.2533 8.25327 12.5657 8.56569Z" fill="currentColor"></path> </svg> </span>  </div>  <script>var hostUrl = "/static/default/pc/";</script>  <script src="/static/default/pc/plugins/global/plugins.bundle.js"></script> <script src="/static/default/pc/js/scripts.bundle.js"></script>   </body>  </html>