快速构建多层级动态表头列表的方法、电子设备和介质与流程

本发明涉及计算机，尤其是快速构建多层级动态表头列表的方法、电子设备和介质。

背景技术：

1、前端，即网站前台部分，是指运行在移动端等浏览器上展现给用户浏览的网页。在前端的研发工作中，常常会遇到快速构建多层级动态表头列表页面的需求，多层级动态表头列表是指可根据数据动态变化且表头有多级嵌套关系的列表，例如excel表格。局限于前端框架的数据格式，目前的构建多层级动态表头列表页面的方法通常有两种，其中：

2、第一种方式是数据侧发送源数据给后端，后端对源数据进行处理后得到树形嵌套结构的表头数据和表格内容数据并返回给前端，前端根据返回的数据进行渲染，进而生成所需页面。然而，这种方式往往需要后端对源数据进行复杂的处理，后端的数据处理量较大，数据处理效率较低，不利于后端快速拼接数据结构；同时，由于后端拼接此类数据结构所花费的时间较长，导致前端等待后端返回数据的等待周期较长，不利于前端快速构建所需页面。

3、第二种方式则是前端与数据侧预先协商好数据的格式，后端在通过数据侧获取源数据后进行数据处理，得到包括标识和表头的特定格式的数据，标识和表头需呈对应关系，前端基于由后端返回的数据进行页面渲染，生成所需页面。然而，这种方式往往需要前端写死列表字段参数，不仅增加了前端开发人员不必要的开发工作量，还会使得参数的自定义能力较差，增大了前端渲染页面和后期维护工作的难度，无法满足用户自定义页面参数的需求。

4、以上问题亟待解决。

技术实现思路

1、本发明的目的在于至少一定程度上解决现有技术中存在的技术问题之一。

2、为此，本发明的目的在于提供快速构建多层级动态表头列表的方法、电子设备和介质。

3、为了达到上述技术目的，本发明实施例所采取的技术方案包括：

4、一方面，本发明实施例提供了快速构建多层级动态表头列表的方法，所述方法应用于第一设备，所述第一设备位于前端，所述方法包括以下步骤：

5、显示用户操作页面，所述用户操作页面包括第一输入区域、第一显示区域、生成控件和填充控件；

6、响应于所述第一输入区域的输入指令，在所述第一输入区域显示与所述第一输入区域的输入指令对应的多级表头数据；

7、响应于对所述生成控件的触发指令，对所述多级表头数据进行处理，生成目标表头数据；

8、响应于对所述填充控件的触发指令，向第二设备发送所述目标表头数据，之后获取与所述目标表头数据对应的目标表格数据，根据所述目标表头数据和所述目标表格数据生成目标列表并显示于所述第一显示区域。

9、根据本发明上述实施例的快速构建多层级动态表头列表的方法，还可以具有以下附加的技术特征：

10、进一步地，在本发明的一个实施例中，在生成所述目标表头数据之后，所述方法还包括如下步骤：

11、在所述第一显示区域显示所述目标表头数据。

12、进一步地，在本发明的一个实施例中，对所述多级表头数据进行处理，生成目标表头数据的步骤包括：

13、利用树函数对所述多级表头数据进行格式转换处理，生成目标表头数据，所述目标表头数据为树结构的多级表头数据。

14、进一步地，在本发明的一个实施例中，根据所述目标表头数据和所述目标表格数据生成目标列表的步骤包括：

15、对所述目标表格数据进行格式转换处理，生成json格式的目标表格数据；

16、根据json格式的目标表格数据和所述目标表头数据进行动态渲染，生成目标列表。

17、进一步地，在本发明的一个实施例中，所述用户操作页面还包括第一确定控件；在所述根据所述目标表头数据和所述目标表格数据生成目标列表之后，所述方法还包括如下步骤：

18、响应于对所述第一确定控件的触发指令，显示数据保存窗口，所述数据保存窗口包括第二确定控件和第二输入区域；

19、响应于所述第二输入区域的输入指令，在所述第二输入区域显示与所述第二输入区域的输入指令对应的目标列表名称；

20、响应于对所述第二确定控件的触发指令，显示所述用户操作页面，并将所述目标列表和所述目标列表名称发送给所述第二设备，以使所述第二设备存储所述目标列表和所述目标列表名称。

21、进一步地，在本发明的一个实施例中，所述用户操作页面还包括第三输入区域、第二显示区域和查询控件，所述第二显示区域设置有查看控件；所述方法还包括如下步骤：

22、响应于所述第三输入区域的输入指令，在所述第三输入区域显示与所述第三输入区域的输入指令对应的查询信息；

23、响应于对所述查询控件的触发指令，向所述第二设备发送与所述查询信息对应的第一查询指令，之后获取与所述第一查询指令对应的历史列表的基础信息并显示于所述第二显示区域；

24、响应于对所述查看控件的触发指令，向所述第二设备发送与所述查看控件的触发指令对应的第二查询指令，之后获取与所述第二查询指令对应的历史列表的详细信息并显示于列表查看窗口，所述列表查看窗口包括返回控件；

25、响应于对所述返回控件的触发指令，显示所述用户操作页面。

26、另一方面，本发明实施例提供了快速构建多层级动态表头列表的方法，所述方法应用于第二设备，所述第二设备位于后端，所述方法包括以下步骤：

27、获取由第一设备发送的目标表头数据；

28、根据所述目标表头数据向第三设备发送数据查询请求，以使所述第三设备根据所述数据查询请求返回与所述目标表头数据对应的初始表格数据；

29、获取所述目标表头数据对应的初始表格数据，对所述目标表头数据对应的初始表格数据进行处理，生成目标表格数据并发送给所述第一设备，以使所述第一设备根据所述目标表格数据和所述目标表头数据生成目标列表并显示。

30、根据本发明上述实施例的快速构建多层级动态表头列表的方法，还可以具有以下附加的技术特征：

31、进一步地，在本发明的一个实施例中，对所述目标表头数据对应的初始表格数据进行处理，生成目标表格数据的步骤包括：

32、按照所述目标表头数据的顺序，通过竖线分割的方式依次组装所述初始表格数据，生成包括若干行数据的目标表格数据。

33、进一步地，在本发明的一个实施例中，所述方法还包括如下步骤：

34、获取由所述第一设备发送的第一查询指令，返回与所述第一查询指令对应的历史列表的基础信息给所述第一设备。

35、进一步地，在本发明的一个实施例中，所述方法还包括如下步骤：

36、获取由所述第一设备发送的第二查询指令，返回与所述第二查询指令对应的历史列表的详细信息给所述第一设备。

37、又一方面，本发明实施例提供了快速构建多层级动态表头列表的方法，所述方法应用于第三设备，其包括以下步骤：

38、获取由第二设备发送的数据查询请求；

39、根据所述数据查询请求返回与目标表头数据对应的初始表格数据给所述第二设备。

40、又一方面，本发明实施例提供了快速构建多层级动态表头列表的方法，其包括以下步骤：

41、通过第一设备显示用户操作页面，所述用户操作页面包括第一输入区域、第一显示区域、生成控件和填充控件；

42、通过所述第一设备响应所述第一输入区域的输入指令，在所述第一输入区域显示与所述第一输入区域的输入指令对应的多级表头数据；

43、通过所述第一设备响应对所述生成控件的触发指令，对所述多级表头数据进行处理，生成目标表头数据；

44、通过所述第一设备响应对所述填充控件的触发指令，向第二设备发送所述目标表头数据；

45、通过所述第二设备获取所述目标表头数据，并根据所述目标表头数据向第三设备发送数据查询请求；

46、通过所述第三设备获取所述数据查询请求，并根据所述数据查询请求返回与所述目标表头数据对应的初始表格数据给所述第二设备；

47、通过所述第二设备获取所述目标表头数据对应的初始表格数据，并对所述目标表头数据对应的初始表格数据进行处理，生成目标表格数据；

48、通过所述第一设备获取与所述目标表头数据对应的目标表格数据，根据所述目标表头数据和所述目标表格数据生成目标列表并显示于所述第一显示区域。

49、根据本发明上述实施例的快速构建多层级动态表头列表的方法，还可以具有以下附加的技术特征：

50、进一步地，在本发明的一个实施例中，所述用户操作页面还包括第三输入区域、第二显示区域和查询控件，所述第二显示区域设置有查看控件；所述方法还包括如下步骤：

51、通过所述第一设备响应所述第三输入区域的输入指令，在所述第三输入区域显示与所述第三输入区域的输入指令对应的查询信息；

52、通过所述第一设备响应对所述查询控件的触发指令，向所述第二设备发送与所述查询信息对应的第一查询指令；

53、通过所述第二设备获取所述第一查询指令，并返回与所述第一查询指令对应的历史列表的基础信息给所述第一设备；

54、通过所述第一设备获取与所述第一查询指令对应的历史列表的基础信息并显示于所述第二显示区域；

55、通过所述第一设备响应对所述查看控件的触发指令，向所述第二设备发送与所述查看控件的触发指令对应的第二查询指令；

56、通过所述第二设备获取所述第二查询指令，并返回与所述第二查询指令对应的历史列表的详细信息给所述第一设备；

57、通过所述第一设备获取与所述第二查询指令对应的历史列表的详细信息并显示于列表查看窗口，所述列表查看窗口包括返回控件；

58、通过所述第一设备响应对所述返回控件的触发指令，显示所述用户操作页面。

59、又一方面，本发明实施例提供了一种电子设备，包括存储器、处理器以及存储在所述存储器上并可在所述处理器上运行的程序，所述程序被所述处理器执行时实现前面所述的快速构建多层级动态表头列表的方法。

60、又一方面，本发明实施例提供了一种计算机存储介质，其中存储有处理器可执行的程序，所述处理器可执行的程序在由处理器执行时用于实现前面所述的快速构建多层级动态表头列表的方法。

61、本发明的有益效果是：提供快速构建多层级动态表头列表的方法、电子设备和介质，方法包括：在位于前端的第一设备显示用户操作页面，响应于在页面的第一输入区域的输入指令，在第一输入区域显示与第一输入区域的输入指令对应的多级表头数据，响应于对页面的生成控件的触发指令，对多级表头数据进行处理，生成目标表头数据，响应于对页面的填充控件的触发指令，向位于后端的第二设备发送目标表头数据，之后获取与目标表头数据对应的目标表格数据，根据目标表头数据和目标表格数据生成目标列表并显示于页面的第一显示区域。本发明实施例无需位于后端的第二设备提供复杂返参，也无需位于前端的第一设备写死列表字段参数，通过位于前端的第一设备的用户操作页面的交互显示即可实现多层级动态表头列表的快速构建，通过将数据处理集中在位于前端的第一设备来有效解决位于后端的第二设备需要拼接构造位于前端的第一设备所需复杂数据的问题，减少前端和后端的数据处理的难度和工作量的同时还提高了页面构建的灵活性，满足用户对自定义页面参数的需求，具有高实用性。

62、本技术的其它特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本技术而了解。本技术的目的和其他优点可通过在说明书、权利要求书以及附图中所特别指出的结构来实现和获得。