基于jQuery框架的DataTable组件设计与开发

2023-05-29 09:23李琦李志卿刘磊高士琛邓婕

电子技术与软件工程 2023年7期

李琦李志卿刘磊高士琛邓婕

（中电科蓉威电子技术有限公司四川省成都市 610031）

随着互联网技术的不断进步和企业信息化建设水平的发展，基于B/S 架构下的Web 项目开发，逐渐成为开发的主流技术[1]。在实际项目开发过程中，查询结果的数据呈现是大多数系统的必备功能。Datatable 是一款jQuery 表格插件，它是一个当前使用较为广泛的表格工具，具备按行列显示表格数据、分页、筛选和排序等功能[2]。在现有的Datatable 表格插件中，表头项基本在代码中固定。当表格列数目过多时，会出现屏幕溢出；当表头顺序或显隐需要调整时，需要在代码中修改，灵活性、可修改性较差；各单元格如果内容较多时，会出现显示内容不全，无法做到一目了然。现有的技术方案是通过开发人员修改硬编码实现，实际操作性、灵活性不强，且会因为需求变化、屏幕分辨率不同等出现显示异常，影响用户体验。因此，基于jQuery 设计一个通用的表格插件功能方法，实现当用户业务需求发生变化时，不需重写代码，只需在页面上以点击按钮的方式修改样式文件，达到动态呈现数据的目的，此方法可以满足个性化显示需求，方便用户使用。

1 流程设计

依据基于jQuery 的组件设计通用思路，在此基础上拓展Datatable 表格插件功能方法[3]。首先在HTML页面，使用grid 网格控件搭建table 表格，完成table 表格的初始建立，搭建基本框架，并在JavaScript 中绑定基于jQuery 的Datatable 组件，实现Datatable 基本表格显示功能。在HTML 页面设置按钮，按钮个数与显示的列项一一对应。添加多个按钮控件，将扩展功能以函数的形式进行封装，以便调用，将相关方法与按钮控件绑定；同时，将DataTable 组件与table 表格进行绑定。最后重写DataTable 组件的JavaScript 和层叠样式表CSS，以实现点击不同的按钮，实现的不同扩展功能。使用者可以在页面上，通过点击按钮的方式，根据实际使用需求，灵活修改表头的显隐，显示顺序，设置每一列的显示宽度和显示各单元格全部数据。流程设计图如图1 所示。

图1：设计流程图

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

2 技术方案

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

（1）在HTML 页面完成table 表格的初始建立，加载table 表格的网格控件grid，包括：表头标签和表格内容；

（2）在同一HTML 页面，设置列按钮，列按钮需与表头标签顺序相同、内容相同；

（3）添加按钮控件，包括列的显示按钮，列的隐藏按钮，表格列数据显示折行按钮，设置表格显示顺序按钮和设置表格列宽度按钮，便于点击相应按钮实现相应的功能；

（4）调用DataTable 组件的JavaScript 和CSS，与表格的id 进行绑定，实现基本的显示、分页、排序和搜索功能；

（5）重写DataTable 的JavaScript 和层叠样式表CSS：

①添加获取cookie 的方法，获取指定名称的cookie值，当获取的是多个cookie 值时，保存的时候是以分号或空格分开；②添加设置cookie 的方法，将cookie 的value 值与表格的id 一一对应；③在执行完上述步骤4的时候，触发添加表格列的初始化方法：首先获取table对象、table 标签的id 和模态框顶级

的id，然后调用步骤1 和步骤2 的方法，根据cookie 的信息控制列的显示隐藏；④添加与步骤3 中的按钮控件相对应的执行功能函数，所述执行功能函数包括：列的显示与隐藏的执行功能函数、表格列数据显示折行的执行功能函数、表格显示顺序的执行功能函数和设置表格列宽度的执行功能函数；⑤当执行完表格列的初始化方法后，将添加的按钮控件与相对应的执行功能函数进行绑定。

3 Datatable的高级方法实现

Datatable 是一个基于jQuery 库的表格插件，它可以在web 页面中快速创建功能强大、高度灵活的数据表格[6]。除了基本的分页、排序、搜索功能外，我们也可以通过扩展Datatable 组件或者基于其源码进行二次开发，以实现更加定制化的功能。例如，我们可以开发插件、自定义插件、重写插件方法等，以满足特定需求[7]。

3.1 添加列的显示与隐藏的执行功能

（1）获取table 表格对象、table 表格标签的id 和模态框顶级

的id，实质上是直接采用上述技术方案中步骤5 第③步table 表格列的初始化方法，相当于形成循环，可以进行多次修改和调整；

（2）将获取的模态框顶级

的id 绑定click 点击事件，实现点击按钮，与相关功能绑定；

（3）获取列的接口对象，根据当前列的显隐状态做出判断：如果列的状态为“显示”，则添加对应的CSS 和类属性Class，并更改状态为“隐藏”；如果列的状态为“隐藏”，则删除对应的CSS 和类属性Class，并更改状态为“显示”；

（4）将（1）中获取的模态框顶级

的id 和③中的列的显隐状态存入数组，调用之前添加的设置cookie 的方法，进行存储。根据实际显示需求，模块应用截图如图2 所示。

图2：设置表格列的显隐

3.2 添加表格列数据显示折行的执行功能

（1）获取table 表格列显示的

项目标签，将

项目标签与表格列数据显示折行按钮的状态进行绑定；

（2）点击表格列数据显示折行按钮，传递标识值；当选择折行时，传递的flag（标识）值为1，此时为每列单元格添加如下CSS：“text-overflow”：“ellipsis”，“white-space”：“pre-wrap”；当选择不折行时，传递的flag（标识）值为0，此时为每列单元格添加如下CSS：“text-overflow”：“inherit”，“white-space”：“nowrap”；

text-overflow 属性的主要作用是：规定当文本溢出包含元素时发生的事情，如果是ellipsis：显示省略符号来代表被修剪的文本；如果是inherit：展示全部文本。

white-space 属性的主要作用是：设置如何处理元素内的空白，如果是pre-wrap：保留空白符序列，但是正常地进行换行；如果是nowrap：文本不会换行，文本会在在同一行上继续。

以table 表格中URL 列为例，根据实际显示需求，模块应用截图如图3、图4 所示。

图3：Url 列单元格数据显示不全

图4：Url 列单元格数据全部显示

3.3 添加设置表格显示顺序的执行功能

（1）获取表格列显示的

项目标签标签，将

项目标签与设置table 表格显示顺序按钮的状态进行绑定；

（2）获取table 表格中的所有列的

的id，并设置对应列的按钮，以便拖动；

（3）将对应列的按钮与获取的id 绑定，并设置相关CSS，实现拖动相关列，并将顺序存入相应的数组中；

（4）添加调取获取每一列宽度的函数方法，以获取每一列的宽度；

（5）当拖动列，使列的顺序发明变化后，保存③中列的顺序，调用④中添加的函数方法和调用添加的设置cookie 的方法，将cookie 的value 值与id 一一对应。

根据实际显示需求，设置表格列显示顺序，拖动图标即可修改顺序，模块应用截图如图5 所示。

图5：编辑表格列显示顺序

3.4 添加设置表格列宽度的执行功能

（1）获取表格列显示的

项目标签，将

项目标签与按钮控件的状态进行绑定；

（2）获取表格中的所有列的

的id，并设置对应列的按钮；并为每一列添加表单标签；所述按钮为点击按钮，点击后弹出input 对话框，可以由用户填入相应的宽度；

（3）将列宽度储存到数组中，并将数组传入并调用上述获取每一列宽度的函数方法和步添加设置cookie的方法中。

根据实际显示需求以及屏幕分辨率，模块应用截图如图6 所示。

图6：设置列宽

4 分析总结

综上所述，Datatable 是一个强大且灵活的表格组件，拥有广泛的应用前景。在实际开发中，我们可以根据具体需求，采取不同的措施优化Datatable 的功能和性能，并进行更加深入的扩展和二次开发。上述方法已在多个实际项目应用，函数封装较好，运行稳定，在不脱离技术方案构思的前提下，还可以做出若干变形和改进，为近似类型的应用提供了良好的设计思路和示范。