[发明专利]基于Angular2+的表格数据批量选择提交的方法

说明书

本发明涉及web前端开发领域，其公开了一种基于Angular2+的表格数据批量选择提交的方法，直观、简洁地实现表格数据批量选择及批量提交功能。该方法包括：a.生成数据表格，所述数据表格包括表格的表头和表格的主体，所述表头所在行包括全选复选框和各表头项，所述表格的主体包括每行的复选框和其余需要展示的数据项；b.监听数据表格的表头中的复选框和表格的主体中每行的复选框的鼠标点击事件，根据鼠标点击事件实现对应数据的选中或者取消操作；c.监听数据提交按钮的鼠标点击事件，当触发数据提交时，通过筛选获取批量选中的表格数据，并调用数据提交函数执行相关操作。

技术领域

本发明涉及web前端开发领域，具体涉及一种基于Angular2+(指Angular2及以上版本)的表格数据批量选择提交的方法。

背景技术

Angular作为web开发三大流行框架之一，在web前端开发使用的技术中占有相当大的比例，而批量选择功能是大多数项目中不可或缺的需求，比如工时系统的批量审核模块、信息管理系统的批量编辑模块、财务系统的批量绑定模块等。

虽然使用原生js也可以实现表格数据全选、反选及部分选择的功能，但是如果在使用Angular的项目中使用原生js实现该功能，既复杂又不能将Angular用于项目的遍历。

发明内容

本发明所要解决的技术问题是：提出一种基于Angular2+的表格数据批量选择提交的方法，直观、简洁地实现表格数据批量选择及批量提交功能。

本发明解决上述技术问题所采用的技术方案是：

基于Angular2+的表格数据批量选择提交的方法，包括以下步骤：

a.生成数据表格，所述数据表格包括表格的表头和表格的主体，所述表头所在行包括全选复选框和各表头项，所述表格的主体包括每行的复选框和其余需要展示的数据项；

b.监听数据表格的表头中的复选框和表格的主体中每行的复选框的鼠标点击事件，根据鼠标点击事件实现对应数据的选中或者取消操作；

c.监听数据提交按钮的鼠标点击事件，当触发数据提交时，通过筛选获取批量选中的表格数据，并调用数据提交函数执行相关操作。

作为进一步优化，步骤a中，所述生成数据表格的具体方法为：

用html代码搭建所需的表格框架；

遍历已有的表格数据(数组对象)，生成相应的表格主体；

在表头和表格主体里增加一列，设置复选框。

作为进一步优化，步骤b中，当监听到表格的表头中的复选框的鼠标点击事件时，实现所有数据的选中或者反选，当监听到表格主体中某一行的复选框的鼠标事件时，实现所在行复选框的选中或者取消。

作为进一步优化，步骤b的实现方法包括：

b1.设置布尔型的全选标志，默认为false；

b2.编写全选/取消全选的函数，在函数中首先对全选标志进行非操作，然后判断全选标志的状态，如果全选标志的状态为true，代表全选，则用forEach方法遍历表格数据的数组对象，并给数组对象中的每一项数据设置布尔型的是否选中的标志为true；

如果全选标志的状态为false，代表反选，则用forEach方法遍历表格数据的数组对象，并给所述数组对象中的每一项数据设置布尔型的是否选中的标志为false；

b3.在表格头部的input标签里绑定click事件，用于调用全选/取消全选函数，并双向绑定checked属性，用于设置表格头部的复选框是否选中/取消选中；