表格中处理新增数据的方法、装置、设备及存储介质与流程

本申请涉及计算机，尤其涉及一种表格中处理新增数据的方法、装置、设备及存储介质。

背景技术：

1、随着网页(web)技术的不断发展，react框架因其高效、灵活的特性在前端开发领域得到了广泛应用。在众多web应用中，表格作为数据展示的重要组件，其操作效率和用户体验对应用的整体性能有着重要影响。作为表格中常见操作之一的新增数据操作，通常是以在表格中新增编辑的形式来进行实现。

2、现有技术中实现方式大致可分为两种，一是通过antd中自带的表格组件功能进行实现，二是将表格以表单的形式实现，使得表格通过表单的形式实现编辑，从而可以实现新增数据。

3、但是现有技术中的方法中，上述第一种方法中，实现可编辑的表格组件异常繁琐，实现难度较大；第二种方法中，在数据稍多的情况下，大量的表单维护困难，实现难度也比较大。

技术实现思路

1、本申请提供了一种表格中处理新增数据的方法、装置、设备及存储介质，实现简单便捷，能够帮助开发者迅速实现开发。

2、第一方面，本申请提供了一种表格中处理新增数据的方法，包括：

3、通过表格组件对原始数据进行表格展示，得到原始数据的表格；

4、若执行于新增数据的操作，通过表单组件在所述表格的第一预设位置展示以所有表格列为字段的表单；

5、在所述表单中，通过所述字段对应的可编辑区域获取输入的新增数据，并展示所述新增数据；

6、若执行于确认新增数据的操作，将所述新增数据保存至数据库，并隐藏所述表单以及将最新数据通过所述表格组件进行表格展示；其中，所述最新数据包括所述原始数据和所述新增数据。

7、在一可能的实施例中，所述若执行于新增数据的操作，通过表单组件在所述表格的第一预设位置显示以所有表格列为字段的表单，包括：

8、在所述表格的第二预设位置展示新增控件；

9、若触发所述新增控件，在所述表格的第一预设位置显示以所有表格列为字段的表单。

10、在一可能的实施例中，所述若执行于确认新增数据的操作，将所述新增数据保存至数据库，包括：

11、在所述表格的第三预设位置展示确认控件；

12、若触发所述确认控件，通过所述表单组件中的校验函数对所述新增数据进行校验；

13、若检验成功，将所述新增数据保存至数据库。

14、在一可能的实施例中，还包括：

15、在所述表格的第四预设位置展示取消控件；

16、若触发所述取消控件，对所述表单中的可编辑区域的新增数据进行清空以及隐藏所述表单。

17、在一可能的实施例中，所述新增控件为新增一行的新增控件；

18、在所述表格的第一预设位置显示以所有表格列为字段的表单，包括：

19、在所述表格的第一预设位置显示以所有表格列为字段，且新增一行的表单；

20、相应的，在所述表格的第一预设位置显示以所有表格列为字段，且新增一行的表单之后，还包括：将所述新增控件设置为禁用状态；

21、相应的，在隐藏所述表单之后还包括：恢复所述新增控件为激活状态。

22、在一可能的实施例中，在所述表格的第一预设位置显示以所有表格列为字段，且新增一行的表单，以及将所述新增控件设置为禁用状态，包括：

23、通过将控制变量控制为第一预设值，在所述表格的第一预设位置显示以所有表格列为字段，且新增一行的表单，以及控制所述新增控件设置为禁用状态；

24、相应的，隐藏所述表单以及恢复所述新增控件为激活状态，包括：

25、通过将所述控制变量控制为第二预设值，隐藏所述表单以及控制所述新增控件恢复激活状态。

26、在一可能的实施例中，将所述新增数据保存至数据库，包括：

27、通过第一预设函数调用后端接口将所述新增数据保存至数据库；

28、相应的，将最新数据通过所述表格组件进行表格展示，包括：

29、在通过所述后端接口接收到保存成功的消息的情况下，调用第二预设函数从所述数据库中获取所述最新数据，并将所述最新数据通过所述表格组件进行表格展示。

30、第二方面，本申请实施例提供了一种表格中处理新增数据装置，包括：

31、表格展示模块，用于通过表格组件对原始数据进行表格展示，得到原始数据的表格；

32、表单展示模块，用于若执行于新增数据的操作，通过表单组件在所述表格的第一预设位置展示以所有表格列为字段的表单；

33、新增数据展示模块，用于在所述表单中，通过所述字段对应的可编辑区域获取输入的新增数据，并展示所述新增数据；

34、表格刷新模块，用于若执行于确认新增数据的操作，将所述新增数据保存至数据库，并隐藏所述表单以及将最新数据通过所述表格组件进行表格展示；其中，所述最新数据包括所述原始数据和所述新增数据。

35、第三方面，本申请实施例提供了一种电子设备，包括：

36、存储器，用于存储计算机程序；

37、处理器，用于执行所述存储器中存储的计算机程序，且所述计算机程序被执行时，实现本申请实施例提供的方法。

38、第四方面，本申请实施例提供了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时，实现本申请实施例提供的方法。

39、本申请实施例提供的上述技术方案与现有技术相比具有如下优点：本申请实施例提供的技术方案，通过表格组件对原始数据进行表格展示，只需要将获取的原始数据直接传入表格组件，展示原有数据，相对于采用表单展示的方法，不再需要对原始数据进行遍历，降低了实现难度，便于维护；通过表单组件展示表单，在表单中的可编辑区获取输入的新增数据，将新增数据保存至数据库并隐藏表单，即通过表单输入新增数据，并展示新增数据，无需对表格组件设置可编辑单元格以及禁用新增行以外的其他行的编辑功能，降低了代码量，也降低了实现难度，简单便捷，能够帮助开发人员快速开发。

技术特征：

1.一种表格中处理新增数据的方法，其特征在于，包括：

2.根据权利要求1所述的方法，其特征在于，所述若执行于新增数据的操作，通过表单组件在所述表格的第一预设位置显示以所有表格列为字段的表单，包括：

3.根据权利要求2所述的方法，其特征在于，所述若执行于确认新增数据的操作，将所述新增数据保存至数据库，包括：

4.根据权利要求3所述的方法，其特征在于，还包括：

5.根据权利要求4所述的方法，其特征在于，

6.根据权利要求5所述的方法，其特征在于，在所述表格的第一预设位置显示以所有表格列为字段，且新增一行的表单，以及将所述新增控件设置为禁用状态，包括：

7.根据权利要求1所述的方法，其特征在于，将所述新增数据保存至数据库，包括：

8.一种表格中处理新增数据装置，其特征在于，包括：

9.一种电子设备，其特征在于，包括：

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时，实现上述权利要求1-7任一项所述的方法。

技术总结
本申请涉及一种表格中处理新增数据的方法、装置、设备及存储介质，该方法，包括：通过表格组件对原始数据进行表格展示，得到原始数据的表格；若执行于新增数据的操作，通过表单组件在所述表格的第一预设位置展示以所有表格列为字段的表单；在所述表单中，通过所述字段对应的可编辑区域获取输入的新增数据，并展示所述新增数据；若执行于确认新增数据的操作，将所述新增数据保存至数据库，并隐藏所述表单以及将最新数据通过所述表格组件进行表格展示；其中，所述最新数据包括所述原始数据和所述新增数据。由此，降低实现难度，简单便捷，能够帮助开发者迅速实现开发。

技术研发人员：吴晓亚,金继民,唐娟,刘楚雄,胡昌菊,代秀琼
受保护的技术使用者：重庆赛力斯凤凰智创科技有限公司
技术研发日：
技术公布日：2025/2/24