突破编程_前端_JS编程实例（自适应表格列宽）

原创

已于 2024-03-09 14:50:17 修改 · 1.7k 阅读

标签

#前端 #javascript #开发语言

于 2024-03-08 15:12:18 首次发布

本文描述了一种JavaScript实现的表格组件，它可以根据容器宽度动态调整HTML表格的列宽，确保表格自适应且列宽合理。通过获取最长字符串宽度，遵循特定规则（如最小显示宽度和列宽比例）来调整列宽，以充分利用容器空间。

1 开发目标

针对如下的表格组件：

在这里插入图片描述

根据表格的各个列字符串宽度动态调整表格列宽：

在这里插入图片描述

2 详细需求

本组件目标是提供一个自动调整 HTML 表格列宽的解决方案，通过 JS 实现动态计算并调整表格每列的宽度，以使得表格能够自适应容器宽度，同时保持列宽的合理性。

2.1 容器与表格元素获取

组件需根据传入的容器获取其子元素集合中的表格元素。
计算每列中最长字符串所占的宽度：最长字符串宽度的计算应基于字符串的渲染宽度，而非简单的字符数，以考虑不同字符宽度的差异。

2.2 列宽调整规则

组件需根据计算出的每列最长宽度，调整每一列的列宽。
调整后的表格宽度需占满其父容器的宽度。
若所有列的最长宽度之和不大于传入容器的宽度，则按照各自最长宽度所占的比例调整每一列的列宽，以确保表格充分利用可用空间。
若所有列的最长宽度之和大于传入容器的宽度，则按照以下优先级进行调整：
- 最长宽度不大于 100px 的列，直接按其最长宽度设置列宽。
- 对于其他列，按照各自最长宽度所占的比例调整列宽，以在有限的空间内尽可能保持列宽的合理性。
- 若全部最长宽度不大于 100px 的列的列宽之和已经大于传入容器的宽度，则所有列均按照各自最长宽度所占的比例调整列宽，以确保表格不会超出容器宽度。

3 代码实现

首先创建一个 neat_tableparse.js 文件，该文件用于本组件的工具类、表格自适应处理函数的代码构建。

（1）在具体的业务代码编写之前，先实现一个工具类以及一些工具方法，方便后面调用：

class CommonUtil {
   
   

    // 计算文本在页面所占 px 宽度
    static calcTextWidth(str, fontSize) {
   
   
        let span = document.createElement('span');
        document.body.appendChild(span);
        span.innerHTML = str;
        span.style.visibility = 'hidden';
        if(fontSize){
   
   
            span.style.fontSize = fontSize;
        }
        let width = span.offsetWidth;
        document.body.removeChild(span);
        return width;
    }
}

（2）接下来，定义一个处理表格自适应列宽的函数：

function parseTable(table) {
   
   
    // 最长宽度不大于该变量的列，直接按其最长宽度设置列宽
    // 若全部最长宽度不大于该变量的列的列宽之和已经大于传入容器的宽度，则所有列均按照各自最长宽度所占的比例调整列宽，以确保表格不会超出容器宽度
    const miniShowWidth = 100;

其中，定义了一个变量 miniShowWidth，该变量是指：最长宽度不大于该变量的列，直接按其最长宽度设置列宽。

（3）然后，获取每列最长宽度，将其存入 colMaxWidths 数组中：

	// 获取每列最长宽度，将其存入 colMaxWidths 数组中
    let colMaxWidths = [];
    let trs = table.getElementsByTagName('tr');
    if (!trs) {
   
   
        return;
    }
    for (let i = 0; i < trs.length; i++) {
   
   
        const tr = trs[i];
        let objs = null;
        objs = tr.getElementsByTagName('th');
        if (!objs || objs.length == 0) {
   
   
            objs = tr.getElementsByTagName('td');
        }
        if (!objs || objs.length == 0) {
   
   
            retur