组件化的可编辑数据表格

组件化的可编辑数据表格

目录

组件化的可编辑数据表格

1.任务要求：

2.设计思路：

3.页面展示：

3.1：表格展示：

3.2：json数据：

4.实现方法：

4.1获取本地json数据：

4.2对表格添加操作：

4.3添加操作删除：

4.4添加总分：

4.5更新总成绩：

---

1.任务要求：

（1）假设表格中要显示的数据来自服务端，由 JSON 格式表示，格式如下： [{pro1:val1,pro2:val2,pro3:val3,…},{pro1:val1,pro2:val2,pro3:val3, …},{pro1:val1,pro2:val2,pro3:val3,…},…]

（2）通过以上 JSON 格式的数组（数据自拟，建议数据对象不少于 3 个属性） 生成可编辑表格，并且能灵活配置可编辑的数据列。

（3）能分别为不同的可编辑列提供验证规则。

（4）能配置和实现数据行的可删除操作。

2.设计思路：

首先通过css和html对表格的样式以及框架进行搭建，完成基本表格后从后台json数据通过Ajax请求获取数据装入表格中。

然后在js代码中对表格添加方法监听，通过js代码设计了表格的删除属性，对总分进行了计算操作。同时需要对表格中数据输入的格式添加正则表达式。

3.页面展示：

3.1：表格展示：

对数据进行修改后，后台会弹出修改信息。

3.2：json数据：

4.实现方法：

4.1获取本地json数据：

这串代码使用 XMLHttpRequest 对象向“data2.json”文件发出异步 GET 请求的 JavaScript 代码。当 XMLHttpRequest 对象的状态发生变化时，将触发 onreadystatechange 事件处理程序。当 readyState 为 4 且状态为 200 时，将 responseText 解析为 JSON，并将结果数据存储在变量中。最后，gethtml调用该函数以使用数据生成 HTML。

4.2对表格添加操作：

代码使用一个嵌套的 for 循环遍历学生成绩数据，提取每个学生的各科成绩数据。对于每个学生的成绩数据，代码使用 Object.keys() 方法提取出对象属性名，并在一个 for...in 循环中遍历属性名。对于每个属性名，代码从当前学生对象中提取出相应的属性值，并将其添加到一个临时的 HTML 字符串中，形成一个表格单元格。最后，生成的 HTML 字符串被插入到表格中。

最后，代码调用一些其他函数，如 totalScoreBar()、setAllScore()、setEditable() 和 updateScore()，用于生成总分栏、设置可编辑单元格、计算总分和更新表格数据等操作。最后，代码设置一个标志变量 flag 为 false，如果标志变量为 true，则调用 actionBar() 方法生成操作栏。

4.3添加操作删除：

这段代码实现了在表格的表头添加“操作”这一列，并在每一行最后一个单元格内添加“删除”按钮。同时，调用了delRow()函数实现了对每一行的删除操作。

4.4添加总分：

定义了一个名为totalScoreBar()的函数，用于在学生成绩表格的标题行和每一行末尾添加“总分”栏，以便计算每个学生的总分。它首先是创建一个表头单元格元素 allscore，设置其文本内容为“总分”。将allscore添加到表格标题行（即第一行）的末尾。对于表格中的每一行，创建一个单元格元素score，并将其文本内容设置为0，表示该学生的总分初始值为0。将score添加到该行的末尾，并将其设置为可被计算总分的单元格，即为其添加属性rname，并将其值设置为allgrade。

4.5更新总成绩：

这段代码定义了一个名为 updateScore() 的函数，用于更新总成绩。首先通过获取所有行的元素（除表头）来循环遍历每一行。然后通过获取当前行的所有 td 标签中 class 属性有值的元素和 rname 属性的元素来分别获取该行的成绩和总成绩标签元素，计算出该行成绩的总和，并将总成绩显示在对应的总成绩标签元素中。最终实现了更新所有行总成绩的功能。

5. 拓展思考基于数据的Web页面设计与开发思路和方法：

1.明确目标和需求：首先需要明确页面的目标和需求，例如页面要展示什么类型的数据，数据来源是什么，以及用户希望如何与数据进行交互等。

2.确定数据类型和格式：根据数据的类型和格式，选择合适的开发工具和技术，例如数据库和服务器端语言、前端框架和库等。

3.设计页面结构和布局：根据需求和数据类型，设计页面的结构和布局，包括页面的主题、颜色、字体、元素排布等。

4.编写代码和样式：根据设计的页面结构和布局，编写前端代码和样式，包括HTML、CSS、JavaScript等。

5.获取和处理数据：根据数据来源，获取数据并进行处理，例如从数据库中查询数据、通过API接口获取数据、解析数据格式等。

6.展示数据：将处理后的数据以合适的方式展示在页面上，例如表格、图表、地图等。

7.交互和功能实现：根据需求，实现用户与数据的交互和相应的功能，例如搜索、排序、过滤、编辑等。

8.测试和优化：对开发完成的页面进行测试和优化，包括页面性能、兼容性、安全性等。