一种自定义计算DataTable表格数据的方法

技术领域

本发明适用于任何HTML、js和css的开发中，涉及表格高级交互领域，具体涉及一种自定义计算DataTable表格数据的方法。

背景技术

本节中的陈述仅提供与本公开相关的背景信息，并且可能不构成现有技术。

Datatable是一款jquery表格插件；其是一个当前使用较为广泛的表格工具，具备按行列显示表格数据、分页、筛选和排序等功能。

现有的表格插件中，当表头(列)项显示为数字，需要按表头(列)计算每行数据时，无法自定义选择某表头(列)或某几个表头(列)或全选表头(列)，以实现对所选表头(列)的每行数据进行计算，并显示在相应位置。

现有的技术方案无法根据需求变化，自定义选择表头(列)，实际操作性、灵活性不强，影响用户体验。

发明内容

本发明的目的在于：针对目前背景技术中提出的问题，提供了一种自定义计算DataTable表格数据的方法，通过修改、完善原datatable的js代码，通过调用函数的方式，使用户可以在操作界面根据实际使用需求解决上述问题。

本发明的技术方案如下：

一种自定义计算DataTable表格数据的方法，包括：

步骤S1：在html页面完成table的初始建立；

步骤S2：给table新增，命名为“合计”，添加，同时添加class＝"checkboxAll"；

步骤S3：给table新增，存放计算后的数据；

步骤S4：获取table的id；

步骤S5：通过给class＝"checkboxAll"绑定click事件，实现点击“合计”的选中框，全选所有列或全不选所有列；

步骤S6：获取选择列的行数据，计算并显示在“合计”列。

进一步地，所述步骤S1，包括：

步骤S11：在html页面加载table的grid，添加table的id，并添加jquery表格插件datatable的JS和css；所述table的id，包括：和；

步骤S12：给table所有添加。

进一步地，所述步骤S3，包括：

给table新增，设置属性class＝"totalData"，与步骤S2中的新增对应。

进一步地，所述步骤S4，包括：

通过函数document.getElementById()查找table的id，获取table的对象tableId。

进一步地，所述步骤S5，包括：

通过$("input[type＝'checkbox']").attr({"checked":true})全选所有列或通过$("input[type＝'checkbox']").attr({"checked":false})全不选所有列。

进一步地，所述步骤S5，还包括：

给html页面上所有的"input[type＝'checkbox']"绑定change事件，实现当页面任意选中框发生变化时，获取每一列的行数据，按列保存至数组。

进一步地，所述步骤S6，包括：

步骤S61：申明动态数组cellData＝{}；

步骤S62：通过查找"input[type＝'checkbox']"，给其绑定change事件，当html页面所有的"input[type＝'checkbox']"的状态变化时触发。

进一步地，所述步骤S62，包括：

步骤S621：通过步骤S4中获取的table对象，获取该对象的列数，tableId.rows[0].cells.length；

步骤S622：遍历步骤S621中获取的列，调用步骤S61中的动态数组，分配与列数相同的数组cellData[array]；

步骤S623：判断步骤S621中的列是否被选中，if(tableId.rows[0].cells[].children[0].checked)；

步骤S624：遍历选中的列，获取每一个选中列的行数据tableId.rows[].cells[].innerHTML，并将行数据按列存放至步骤S622分配的数组中；

步骤S625：根据计算需求，遍历每一个cellData[array]数组，对每一个数组按元素顺序进行计算，并保存至存放结果的数组中totalData[]；

步骤S626：将步骤S625中的totalData[]按顺序赋值给步骤S3中的totalData以显示$($(".totalData")[]).html(totalData[])。

与现有的技术相比本发明的有益效果是：

一种自定义计算DataTable表格数据的方法，包括：步骤S1：在html页面完成table的初始建立；步骤S2：给table新增，命名为“合计”，添加，同时添加class＝"checkboxAll"；步骤S3：给table新增，存放计算后的数据；步骤S4：获取table的id；步骤S5：通过给class＝"checkboxAll"绑定click事件，实现点击“合计”的选中框，全选所有列或全不选所有列；步骤S6：获取选择列的行数据，计算并显示在“合计”列；其使用者可以在页面上，通过点击按钮的方式，根据实际使用需求，灵活选择某表头(列)或某几个表头(列)或全选表头(列)，以实现对所选表头(列)的每行数据进行计算，并显示在相应位置。

附图说明

图1为一种自定义计算DataTable表格数据的方法的流程图。

具体实施方式

需要说明的是，术语“第一”和“第二”等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

下面结合实施例对本发明的特征和性能作进一步的详细描述。

实施例一

请参阅图1，一种自定义计算DataTable表格数据的方法，具体包括如下步骤：

步骤S1：在html页面完成table的初始建立；需要说明的是，所述html是指超文本标记语言，是一种用于创建网页的标准标记语言；所述table是指表格；

步骤S2：给table新增，命名为“合计”，添加，同时添加class＝"checkboxAll"；需要说明的是，class是指属性，checkboxAll是自定义命名的；

步骤S3：给table新增，存放计算后的数据；

步骤S4：获取table的id；

步骤S5：通过给class＝"checkboxAll"绑定click事件，实现点击“合计”的选中框，全选所有列或全不选所有列；需要说明的是，click事件是指：点击，可以理解为鼠标点击，操作浏览器；

步骤S6：获取选择列的行数据，计算并显示在“合计”列。

在本实施例中，具体的，所述步骤S1，包括：

步骤S11：在html页面加载table的grid，添加table的id，并添加jquery表格插件datatable的JS和css；所述table的id，包括：和；需要说明的是，所述grid是指网格，使用grid网格控件搭建table表格；所述id是指唯一标识；所述是指表格的表头内容；所述是指表格的主体内容；其中，JavaScript简称“JS”，是一种具有函数优先的轻量级，解释型或即时编译型的编程语言；作用是：嵌入动态文本于html页面，对用户操作浏览器事件做出响应，实现相关功能；css是指层叠样式表，作用是：描述html文档样式，本实施例是通过调用原有的datatable的css样式，将表格显示出来；

步骤S12：给table所有添加；需要说明的是：checkbox类型的元素在默认情况下被呈现为激活时被选中(打勾)的方框，即为选中框。

在本实施例中，具体的，所述步骤S3，包括：

给table新增，设置属性class＝"totalData"，与步骤S2中的新增对应。

在本实施例中，具体的，所述步骤S4，包括：

通过函数document.getElementById()查找table的id，获取table的对象tableId。

在本实施例中，具体的，所述步骤S5，包括：

通过$("input[type＝'checkbox']").attr({"checked":true})全选所有列(表头)或通过$("input[type＝'checkbox']").attr({"checked":false})全不选所有列(表头)；需要说明的是，其中，.attr()，为相关属性("input[type＝'checkbox']")赋状态(true/false)。

在本实施例中，具体的，所述步骤S5，还包括：

给html页面上所有的"input[type＝'checkbox']"绑定change事件('checkbox'属性值改变时，触发)，实现当页面任意选中框发生变化时(即选中/不选中)，获取每一列的行数据，按列保存至数组。

在本实施例中，具体的，所述步骤S6，包括：

步骤S61：申明动态数组cellData＝{}；

步骤S62：通过查找"input[type＝'checkbox']"，给其绑定change事件，当html页面所有的"input[type＝'checkbox']"的状态(true/false)变化时触发。

在本实施例中，具体的，所述步骤S62，包括：

步骤S621：通过步骤S4中获取的table对象，获取该对象的列数，tableId.rows[0].cells.length；

步骤S622：遍历步骤S621中获取的列，调用步骤S61中的动态数组，分配与列数相同的数组cellData[array]；

步骤S623：判断步骤S621中的列是否被选中，if(tableId.rows[0].cells[].children[0].checked)；

步骤S624：遍历选中的列，获取每一个选中列的行数据tableId.rows[].cells[].innerHTML，并将行数据按列存放至步骤S622分配的数组中；

步骤S625：根据计算需求，遍历每一个cellData[array]数组，对每一个数组按元素顺序进行计算，并保存至存放结果的数组中totalData[]；

步骤S626：将步骤S625中的totalData[]按顺序赋值给步骤S3中的totalData以显示$($(".totalData")[]).html(totalData[])。

以上所述实施例仅表达了本申请的具体实施方式，其描述较为具体和详细，但并不能因此而理解为对本申请保护范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请技术方案构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。