组件化的可编辑数据表格

摘要：ES6组件化的可编辑数据表格是一种常用的UI元素，用于展示和编辑大量的数据。为了提高用户体验和开发效率，我们设计了一个可重用、易扩展、易维护的ES6组件化数据表格。本文将介绍我们的设计思路、实现方法和核心代码及注解，并探讨基于数据的Web页面设计与开发思路和方法。

关键词：组件化，可编辑数据，实现思路

设计思路

我们的ES6组件化数据表格主要基于以下设计思路：

1. 数据驱动：表格中的数据是组件的核心，所有的操作都是基于这些数据进行的。我们使用ES6中的类和模版字面量的特性，使得表格可以根据数据自动更新。

2. 组件化：我们将表格拆分为多个类，每个类只关注特定的功能，如表头、表格体等。这样可以减少代码的耦合度，提高代码的重用性和可维护性。

3. 可定制：我们提供了各种配置项，如列宽、列排序、列筛选等，使得表格可以按照用户的需求进行定制化。

4. 可编辑：我们支持在表格中编辑数据，并提供了各种数据验证功能，如数据类型、数据格式等，保障数据的准确性。

实际实现方法

        基于以上设计思路，我们采用ES6类和模版字面量的特性来实现我们的ES6组件化数据表格。我们主要实现了以下功能：

        我们的思路是通过axios获取json中的数据，然后通过DOM操作获取其中的数据呈现在表格，然后表格每行的末尾添加一个删除按钮，并为该按钮添加了点击事件监听器。通常我们在对数据进行编辑或者删除的时候，都会需要一个操作按钮，因此该代码将删除按钮与相关逻辑和事件集成在了代码中。具体的表现形式是设置了一个 HTML 按钮，并用一个字符串模板把该按钮挂载在 Table 的每行的英语成绩的后面。这个字符串模板放在了 item 对象的 第5列上，即 item.children[5] 上。然后通过删除按钮，splic删除对应数据，remove删除对应行。然后给每个input绑定事件，在修改数据失败时，原数据不变。

核心代码及注释

function writeTable() {
  axios.get("./demo.json").then((value) => {
    console.log(value.data);
    var arr = value.data;
    let trs = document.querySelectorAll("tbody>tr");
    let inputs = document.querySelectorAll("[type='text']");
    // 添加删除按钮和事件监听器
    trs.forEach((item, index) => {
      console.log(item);
      item.children[0].innerHTML = arr[index].studentId;
      item.children[1].innerHTML = arr[index].name;
      item.children[2].children[0].value = arr[index].Chinese;
      item.children[3].children[0].value = arr[index].Math;
      item.children[4].children[0].value = arr[index].English;
      item.children[5].innerHTML = `<button class="delete-btn">删除</button>`;
      //删除操作
      item.children[5]
        .querySelector(".delete-btn")
        .addEventListener("click", () => {
          arr.splice(index, 1); // 删除对应的数据项
          item.remove(); // 删除对应的行
          // writeTable(); // 重新渲染表格
        });
    });
    // 给每个input框绑定事件
    inputs.forEach((item, index) => {
      item.onblur = function () {
        var key,
          flag = 1;
        let row = Math.ceil((index + 1) / 3); //失去焦点时所在的横坐标
        let column = (index % 3) + 1; //失去焦点时所在的纵坐标
        for (let i in arr[0]) {
          if (flag == column + 2) {
            key = i;
          }
          flag++;
        }

        if (isNaN(Number(this.value)) || this.value < 0 || this.value > 100) {
          alert("重新输入");
          console.log(Math.ceil((index + 1) / 3), (index % 3) + 1);
          //   console.log(arr[row - 1].key);
          this.value = arr[row - 1][key]; //修改失败，原值不变
        } else {
          arr[row - 1][key] = ~~this.value; //修改数据成功
          this.value = arr[row - 1][key]; //展示到页面
        }
      };
    });
  });
}

writeTable();

总结

        虽然这次要求是做的“组件化”的可编辑表格，但是由于技术有限，并没有实现组件化，只是写了一个可编辑表格，以上是实现组件化的思路，但是没有实现。并且在修改数据时，修改后的数据并没有与json数据同步，没有同步后台的数据修改。

 arr[row - 1][key] = ~~this.value;

其中~~有与没有效果一样，

例如：~~3.1415926
> 首先对3.1415926进行非运算  --> ~3.1415926  -->取出整数部分3，结果为-4
> 然后再对-4进行非运算  --> ~-4  --> 结果为3

问题：感觉像是取整一样？那如果成绩部分是带小数的，那会不会对输入的内容有影响？

        如果去掉两个位运算符，当想输入24.5的时候会输到24.以后5就无法输入了，如果没有去两个位运算符，当输入10.5后会自动恢复为10

item.children[5]
        .querySelector(".delete-btn")
        .addEventListener("click", () => {
          arr.splice(index, 1); // 删除对应的数据项
          item.remove(); // 删除对应的行
          // writeTable(); // 重新渲染表格

例如最后一行“writeTable()”，如果此行不注释掉，我们点击删除第一行的表格他会删除最后一行，只要不是点击删除最后一行，他都会从最后开始删除，这是因为writeTable()在点击删除操作之后重新渲染了一边表格。