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

权利要求书

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

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

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

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

2.如权利要求1所述的基于Angular2+的表格数据批量选择提交的方法，其特征在于，步骤a中，所述生成数据表格的具体方法为：

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

遍历已有的表格数据，生成相应的表格主体；

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

3.如权利要求1所述的基于Angular2+的表格数据批量选择提交的方法，其特征在于，步骤b中，当监听到表格的表头中的复选框的鼠标点击事件时，实现所有数据的选中或者反选，当监听到表格主体中某一行的复选框的鼠标事件时，实现所在行复选框的选中或者取消。

4.如权利要求3所述的基于Angular2+的表格数据批量选择提交的方法，其特征在于，步骤b的实现方法包括：

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

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

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

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

b4.编写单项数据选中/取消选中的函数，该函数中设置两个参数：其中一个参数是调用该函数的事件对象，另一个参数是表格数据的数组对象中的单条数据项；在该函数中，首先对数据项中数据是否被选中的标志进行非操作，然后对事件对象的checked属性进行判断，如果所述checked属性值为false，则将全选的标志设置为false，用于取消所述表头中的复选框的状态；

b5.在表格主体的input标签里绑定click事件，用于调用选中/取消选中函数，并双向绑定checked属性，用于设置每条表格数据复选框是否选中/取消选中。

5.如权利要求4所述的基于Angular2+的表格数据批量选择提交的方法，其特征在于，步骤c的实现方法具体包括：

c1.编写获取数据提交函数：首先创建一个新的数组，用于接收选中的表格数据，然后遍历表格数据数组，并判断表格数组中的每个数据项中是否选中的标志值，如果所述标志值为true，则将该数据项放进所创建的数组中，当遍历完毕，所得到的新数组中的数据便是需要提交的所有数据；

c2.创建提交按钮，并绑定click事件，用于调用所述数据提交函数，当所述提交按钮监听到鼠标点击事件时，调用所述数据提交函数并执行相关操作。