基于Angular2+的表格数据批量选择提交的方法技术

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

【技术实现步骤摘要】
基于Angular2+的表格数据批量选择提交的方法
本专利技术涉及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属性，用于设置表格头部的复选框是否选中/取消选中；b4.编写单项数据选中/取消选中的函数，该函数中设置两个参数：其中一个参数是调用该函数的事件对象，另一个参数是表格数据的数组对象中的单条数据项；在该函数中，首先对数据项中数据是否被选中的标志进行非操作，然后对事件对象的checked属性进行判断，如果所述checked属性值为false，则将全选的标志设置为false，用于取消所述表头中的复选框的状态；b5.在表格主体的input标签里绑定click事件，用于调用选中/取消选中函数，并双向绑定checked属性，用于设置每条表格数据复选框是否选中/取消选中。作为进一步优化，步骤c的实现方法具体包括：c1.编写获取数据提交函数：首先创建一个新的数组，用于接收选中的表格数据，然后遍历表格数据数组，并判断表格数组中的每个数据项中是否选中的标志值，如果所述标志值为true，则将该数据项放进所创建的数组中，当遍历完毕，所得到的新数组中的数据便是需要提交的所有数据；c2.创建提交按钮，并绑定click事件，用于调用所述数据提交函数，当所述提交按钮监听到鼠标点击事件时，调用所述数据提交函数并执行相关操作。本专利技术的有益效果是：利用Angular数据驱动页面以及双向绑定等特性，通过设置是否选择(全选、部分选择)的标志位、遍历表格数据，并保存相应的选择状态，实现了表格数据全选、反选、部分选择等相关操作，为使用Angular2+进行项目开发的程序员提供直观、简洁的表格数据批量选择提交模板。附图说明图1为本专利技术中数据表格未选中任何项的实例示意图；图2为本专利技术中数据表格全选的实例示意图；图3为本专利技术中数据表格选择部分数据的实例示意图；图4为实施例中基于Angular2+的表格数据批量选择提交方法实现流程图。具体实施方式本专利技术旨在提出一种基于Angular2+的表格数据批量选择提交的方法，直观、简洁地实现表格数据批量选择及批量提交功能。本专利技术利用Angular数据驱动页面以及双向绑定等特性，通过设置是否选择(全选、部分选择)的标志位、遍历表格数据，并保存相应的选择状态，来实现表格数据全选、反选、部分选择等相关操作极其方便，数据更加直观，易懂。为使用Angular2+进行项目开发的程序员提供直观、简洁的表格数据批量选择提交模板，节省平常开发中查阅调试相关功能的时间。本专利技术提出的基于Angular2+的表格数据批量选择提交的方法包括：a.生成数据表格，所述数据表格包括表格的表头和表格的主体，所述表头所在行包括全选复选框和各表头项，所述表格的主体包括每行的复选框和其余需要展示的数据项；b.监听数据表格的表头中的复选框和表格的主体中每行的复选框的鼠标点击事件，根据鼠标点击事件实现对应数据的选中或者取消操作；c.监听数据提交按钮的鼠标点击事件，当触发数据提交时，通过筛选获取批量选中的表格数据，并调用数据提交函数执行相关操作。在具体实现上，步骤a中，生成的数据表格的一个实例如图1所示，所述数据表格包括表格的表头103和表格的主体104，所述表头所在行包括全选复选框101和各表头项，所述表格的主体包括每行的复选框102和其余需要展示的数据项。步骤b中，当监听到表格的表头中的复选框101的鼠标点击事件时，实现所有数据的选中或者反选，即表格主体中每行复选框102的选中或者取消选中。当监听到表格主体中某一行的复选框102的鼠标事件，实现具体所在行数据的选中或者反选，即具体所在行复选框102的选中或者取消。如图2中所示，当选中表头中的复选框201时，表格主体中所有的复选框202都被选中，此时表格中的所有数据均被选中；如图3中所示，勾选表格中序号为2、3、4的数据项前的复选框，则对应的表格数据被选中。步骤c中，监听数据提交按钮的鼠标点击事件，当通过数据提交按钮监听到鼠标点击时，触发数据提交事件，通过筛选获取批量选中的表格数据，并调用数据提交函数执行相关操作。实施例：本实施例为上述基于Angular2+的表格数据批量选择提交的方法的实现案例，其包括：步骤401、搭建表格框架：本步骤采用html代码搭建所需的表格框架，在具体的表格中，遍历已有的表格数据(数组对象)，生成相应的表格主体104；在所述表头103和表格主体104里增加一列，设置复选框101。步骤402、编写全选/取消全选的函数，并绑定：本步骤中，设置布尔型的全选标志，默认为false；编写的全选/取消全选的函数中首先对全选标志进行非操作，然后判断全选标志的状态，如果全选标志的状态为true，代表全选，则用forEach方法遍历表格数据的数组对象，并给所述数本文档来自技高网...

【技术保护点】
1.基于Angular2+的表格数据批量选择提交的方法，其特征在于，包括以下步骤：a.生成数据表格，所述数据表格包括表格的表头和表格的主体，所述表头所在行包括全选复选框和各表头项，所述表格的主体包括每行的复选框和其余需要展示的数据项；b.监听数据表格的表头中的复选框和表格的主体中每行的复选框的鼠标点击事件，根据鼠标点击事件实现对应数据的选中或者取消操作；c.监听数据提交按钮的鼠标点击事件，当触发数据提交时，通过筛选获取批量选中的表格数据，并调用数据提交函数执行相关操作。

【技术特征摘要】
1.基于Angular2+的表格数据批量选择提交的方法，其特征在于，包括以下步骤：a.生成数据表格，所述数据表格包括表格的表头和表格的主体，所述表头所在行包括全选复选框和各表头项，所述表格的主体包括每行的复选框和其余需要展示的数据项；b.监听数据表格的表头中的复选框和表格的主体中每行的复选框的鼠标点击事件，根据鼠标点击事件实现对应数据的选中或者取消操作；c.监听数据提交按钮的鼠标点击事件，当触发数据提交时，通过筛选获取批量选中的表格数据，并调用数据提交函数执行相关操作。2.如权利要求1所述的基于Angular2+的表格数据批量选择提交的方法，其特征在于，步骤a中，所述生成数据表格的具体方法为：用html代码搭建所需的表格框架；遍历已有的表格数据，生成相应的表格主体；在表头和表格主体里增加一列，设置复选框。3.如权利要求1所述的基于Angular2+的表格数据批量选择提交的方法，其特征在于，步骤b中，当监听到表格的表头中的复选框的鼠标点击事件时，实现所有数据的选中或者反选，当监听到表格主体中某一行的复选框的鼠标事件时，实现所在行复选框的选中或者取消。4.如权利要求3所述的基于Angular2+的表格数据批量选择提交的方法，其特征在于，步骤b的实现方法包括：b1.设置布尔型的全选标志，默认为false；b2.编写全选/取消全选的函数，在函数中首先对全选标志进行非操作，然后判断全选标志的状态，如果全选标志的状态为true，代表全选，则用forEach方法遍历表格数据的数组对象，并给数组对象中的每一项数据设置布尔型的是否选中的标志为...

【专利技术属性】
技术研发人员：杜玉芹，
申请(专利权)人：四川长虹电器股份有限公司，
类型：发明
国别省市：四川,51