hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 文章 - 后端开发 - 正文 看Cosplay古风插画小姐姐,合集图集打包下载:炫龙网 · 炫龙图库

【WEB前端开辟】数据表格自动分派列宽的一种完成要领

2019-11-26后端开发ki4网41°c
A+ A-

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运用教程

以上就是数据表格自动分派列宽的一种完成要领的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
【WEB前端开辟】数据表格自动分派列宽的一种完成要领

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签:

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>