自定义计算Datatable表格数据的通用模块设计与实现

李琦，陈柳洲，刘磊，韩睿

（中电科蓉威电子技术有限公司，四川 成都 610031)

0 引言

在互联网技术不断进步和企业信息化建设水平发展的背景下，基于B/S 架构下的Web 项目开发已成为主流技术[1]。在实际开发过程中，数据呈现是大多数系统必备的功能，Datatable 表格工具便是一款当前使用较为广泛的解决方案，具备按行列显示表格数据、分页、筛选和排序等功能[2]。现有的Datatable表格插件中，如果表格内容显示为数字，当需要按照表头计算该列每行数据时，无法自定义选择某列、某几列或全选列，以实现对所选列项的每行数据进行相应计算，并显示在对应位置。现有的技术方案无法根据需求变化，灵活选择Datatable表格列项，实际操作性、便捷性不强，影响用户体验。针对目前背景技术中提出的问题，本文提供了一种自定义计算Datatable表格数据的方法，通过修改、完善原Datatable 的JavaScript 代码，以调用函数的方式，应用于HTML显示界面，使用户可以在操作界面根据实际使用需求解决上述问题。

1 流程设计

依据基于jQuery的组件设计通用思路，在此基础上拓展Datatable 表格插件功能方法[3]。首先在HTML页面，使用grid 网格控件搭建table 表格，完成table 表格的初始建立，搭建基本框架，并在JavaScript 中绑定基于jQuery的Datatable 组件，实现Datatable 基本表格显示功能。给table 表格新增一个＜thead＞表头标签，命名为“合计”，并为该表头标签添加class="checkbox-All"自定义属性类；同时给table表格所有＜thead＞表头标签添加＜input type="checkbox"＞表单标签，以提供选项框。给table 表格新增＜tbody＞表格主体内容，存放计算后的数据。通过JavaScript获取table表格的唯一标识id；并给class="checkboxAll"属性类绑定click 点击事件，以实现用户在操作界面点击“合计”＜thead＞表头标签的选中框，可以全选table表格中所有列或全不选所有列，同时获取选择列的行数据，计算并显示在“合计”列。流程设计图如图1所示。

图1 流程设计图

其中，JavaScript 简称JS，是一种具有函数优先的轻量级，解释型或即时编译型的编程语言，作用是：嵌入动态文本于HTML页面，对用户操作浏览器事件作出响应，实现相关功能[4]。CSS 是指层叠样式表，作用是：描述HTML 文档样式，本文是通过调用原有的Datatable的CSS样式，将表格显示出来[5]。

本文设计并实现的通用模块可以使用户在页面上，根据实际使用需求，仅通过点击按钮的方式，灵活选择某表头或某几个表头或全选表头，即可对所选表头的每行数据进行计算，并显示在相应位置。

2 技术方案

除了基本的显示、分页、排序、搜索功能外，基于jQuery 的Datatable 组件还支持扩展和二次开发，以实现更加灵活的定制化功能。本文通过编写Datatable组件的JavaScript 代码，实现相关拓展功能，并辅以CSS 层叠样式表，为HTML 页面添加更多的功能和样式。基于上述流程设计的详细技术方案如下：

1) 在HTML页面完成table表格的初始建立，加载table表格的网格控件grid，包括：＜thead＞表头标签和＜tbody＞表格内容；给table表格所有＜thead＞表头标签添加＜input type="checkbox"＞表单标签，实现通过以选择框的形式可对该列进行勾选选择；添加table表格的唯一标识id，并添加jQuery 表格插件Datatable 的JS 和CSS，实现Datatable 插件基础功能，如：显示、语言设置、分页、排序、搜索等。

2) 给table表格新增＜thead＞表头标签，命名为“合计”，添加＜input type="checkbox"＞表单标签，实现可对该列的选择框进行选择与取消，同时为其添加自定义类属性：class="checkboxAll"；其中，checkbox 类型的 ＜input＞ 元素在默认情况下呈现为激活时被选中（打钩）的方框，即为选中框。

3) 给table 表格新增＜tbody＞表格内容，用以存放计算后的数据，同时为其添加自定义类属性：class="totalData"，与第2步中的新增＜thead＞表头标签对应，便于查找、存放数据。

4) 在JavaScript 中，通过函数document.getElementById()查找table 表格的唯一标识id，获取table 表格的对象tableId，此处可以根据用户习惯命名。

5) 在JavaScript 中，通过给属性类class="checkboxAll"绑定click 点击事件，实现点击“合计”＜thead＞的选中框，即可实现全选所有列或全不选所有列：通过给相关具有check 属性的表头标签赋值true($("input[type='checkbox']").attr({"checked":true})) ，实现全选所有列；通过给相关具有check 属性的表头标签赋值 false($("input[type= 'checkbox']"). attr({"checked":false})) ，实现全不选所有列。其中，.attr()为相关属性("input[type='checkbox']") 赋状态(true/false) ，分别表达打勾和去勾；给HTML 页面上所有的"input[type='checkbox']"绑定change触发事件，实现当页面任意选中框发生变化时（即选中/不选中状态变化时），在JavaScript 中动态获取每一列的行数据，并按列项分别保存至对应数组。

6) 获取选择列项的行数据，计算并显示在“合计”列。由于用户自定义选择列项的随机性，可在Java-Script 中申明动态数组cellData = {}，根据选择列项的多少动态分配数组空间；通过查找"input[type='checkbox']"类属性，给其绑定change 触发事件，针对在HTML 页面所有的"input[type='checkbox']"类属性状态变化时触发，实现当页面任意选中框发生变化时，即选中/不选中状态变化时，可以动态获取每一列的行数据，并按列项分别保存至对应数组：①通过获取的table 表格对象，得到该table 表格对象的列数：tableId.rows[0].cells.length；②遍历获取对象的列数，调用之前申明的动态数组cellData{}，动态分配与列数相同的数组：cellData[array]；③利用选项属性标识check，查看table 表格的每一列是否被选中：if(tableId.rows[0].cells[].children[0].checked，此处返回true 或false；④遍历选中的列，获取每一个选中列的行数据：tableId.rows[].cells[].innerHTML，并将行数据按列存放至数组cellData[array]中；⑤根据计算需求，遍历每一个cellData[array]数组，对每一个数组按元素顺序进行计算，并保存至存放结果的数组中totalData[]；⑥将totalData[]按顺序赋值给类属性为class="totalData"的＜tbody＞表单内容标签以显示：$($(".totalData")[]).HTML(totalData[])。

任意勾选表头选择框，实现对该勾选列每行数据进行计算，并显示在对应“合计”列，如图2、图3所示。

图2 自定义列计算

图3 自定义列计算

点击“合计”表头选择框，实现对table表格所有表头的全选，并对选择列的每行数据进行计算，并将结果显示在“合计”列的对应行，如图4所示。

图4 全选列计算

3 核心代码实现

根据上述流程设计和技术方案实现思路，针对自定义计算Datatable 表格数据功能实现，编写了基于jQuery的Datatable组件JavaScript代码，显示如下：

4 分析总结

综上所述，Datatable 是一个强大且灵活的表格组件，可以为Web开发项目提供很大的帮助。通过对其进行扩展和二次开发，可以实现更加定制化的功能，满足特定业务需求。在实际开发中，用户可以根据具体需求采取不同的措施来优化Datatable 的功能和性能，以提高用户体验和项目效率。