基于自定义配置属性字段的页面动态渲染方法及系统技术方案

本公开提供了一种基于自定义配置属性字段的页面动态渲染方法及系统，包括：将待配置的表单或列表文件读入内存，并基于预封装的组件在图形化界面中进行显示；在所述图形化界面中通过拖拽属性字段、修改字段名称以及自定义排序，实现表单或列表文件中各配置项所对应资产属性值的动态配置；获取配置的表单或列表的资产属性值，基于表单或列表的预封装组件实现相关页面中表单或列表的动态渲染；其中，对于所述表单，采用预置表单项的方式封装动态表单组件，其中，所述表单基于JSON格式文件进行表示；对于所述列表，采用JSX与渲染器结合的方式进行动态列表封装；所述封装的动态表单组件及动态列表均在所述图形化界面中进行展示。动态列表均在所述图形化界面中进行展示。动态列表均在所述图形化界面中进行展示。

【技术实现步骤摘要】
基于自定义配置属性字段的页面动态渲染方法及系统


[0001]本公开属于页面配置渲染
，尤其涉及一种基于自定义配置属性字段的页面动态渲染方法及系统。

技术介绍

[0002]本部分的陈述仅仅是提供了与本公开相关的
技术介绍
信息，不必然构成在先技术。
[0003]在项目研发时经常会遇到功能类似、结构不变的业务需求，而对于数据类型的维护与展示缺少不了应用大量的表单和列表。通常，我们将常用的Form表单检索和Table列表展示进行封装，有助于提高开发效率和统一样式风格。
[0004]动态表单、列表的目的是为了根据业务流程不同灵活设计显示页面，显然在业务流程设计阶段不用过多的考虑表单、列表如何实现，将业务流程与页面显示分离开了，充分体现了MVC思想(即Model(模型)、View(视图)和Controller(控制器))，我们可以把动态表单、动态列表看成V层的具体实现。
[0005]现有的技术方案为开发一个配置式的表单，设计一个全新的表单Schema规范，然后根据Schema编写表单JSON对象，最后由表单JSON动态生成表单，并将表单中可能会显示的项，例如：文本框、下拉框、单选框、以及级联选择器等表单项类型尽可能多的提前预设好，通过判断完成不同类型的内容渲染展示。同理，列表中也可预设多选、单选、文字、图标及文本框等内容形式。这种思路已经非常成熟了，并且有非常多成熟的开源项目采用了这种思路。
[0006]但是，专利技术人发现，根据Schema编写表单JSON对象存在如下缺陷：
[0007](1)使用者需要学习表单Schema规范；
[0008](2)此方案难于实现复杂的表单交互逻辑。
[0009]为了实现动态表单的复杂交互逻辑，虽然可以为动态表单增加可编程接口，通过组件的交互事件和API方法实现交互逻辑，但现有技术组件只单独针对动态表单或动态列表完成配置渲染，无法在可视化界面直接操作表单或者列表中的属性字段并自定义其顺序，只能通过修改JSON对象进行增减修改，具有一定的操作局限性。

技术实现思路

[0010]本公开为了解决上述问题，提供了一种基于自定义配置属性字段的页面动态渲染方法及系统，所述方案通过在图形化界面中拖拽属性字段、修改字段名称以及自定义排序的方式，完成表单、列表中资产属性值动态配置，并在获取基础属性值后，通过表单、列表封装组件完成相关页面动态渲染，有效提高了页面动态配置及渲染的效率，使用户能够直接在图形界面进行相关信息处理，便于操作和维护数据，同时也提高了视觉目标搜索的效率以及信息传递的效率。
[0011]根据本公开实施例的第一个方面，提供了一种基于自定义配置属性字段的页面动
态渲染方法，包括：
[0012]将待配置的表单或列表文件读入内存，并基于预封装的组件在图形化界面中进行显示；其中，所述表单及列表文件中的各配置项分别与其对应的预封装组件相关联；
[0013]在所述图形化界面中通过拖拽属性字段、修改字段名称以及自定义排序，实现表单或列表文件中各配置项所对应资产属性值的动态配置；
[0014]获取配置的表单或列表的资产属性值，基于表单或列表的预封装组件实现相关页面中表单或列表的动态渲染；
[0015]其中，对于所述表单，采用预置表单项的方式封装动态表单组件，其中，所述表单基于JSON格式文件进行表示；对于所述列表，采用JSX与渲染器结合的方式进行动态列表封装；所述封装的动态表单组件及动态列表均在所述图形化界面中进行展示。
[0016]进一步的，所述采用预置表单项的方式封装动态表单组件，具体为：预先将表单常用项封装为表单组件，所述表单常用项包括文本框、下拉框、级联选择器、文本域以及日期选择器。
[0017]进一步的，所述实现表单或列表文件中各配置项所对应资产属性值的动态配置，具体为：通过在所述图形化界面中拖拽属性字段、修改字段名称以及自定义排序，实现表单或列表对应配置项的修改，并将修改后的配置项属性值返回至内存中的表单或列表文件中。
[0018]进一步的，获取配置的表单或列表的资产属性值，基于表单或列表的预封装组件实现相关页面中表单或列表的动态渲染，具体为：从表单或列表文件中读取修改后的配置项，并进行相关校验判断后，通过循环遍历表单或列表相关组件的方式完成表单或列表在页面上的渲染。
[0019]进一步的，所述相关校验判断包括表单项类型、是否必填、限制字长、是否超链接、是否校验特殊字符以及一行展示几个表单项的属性值逻辑判断。
[0020]进一步的，所述采用JSX与渲染器结合的方式进行动态列表封装，具体为：采用vxe
‑
table组件结合JSX+渲染器方式实现表头字段筛选以及单元格格式化的复用。
[0021]进一步的，所述列表的渲染，利用vxe
‑
table中的cell
‑
render属性，通过computed函数计算判断出数据是否为超链接、图标或操作项；通过读取全局注册的渲染器，获取对应render函数的返回结果；当存在固定列且列数超过预设阈值时，采用组件自带的loadData/loadColumn函数完成动态列表的渲染。
[0022]根据本公开实施例的第二个方面，提供了一种基于自定义配置属性字段的页面动态渲染系统，包括：
[0023]数据导入单元，其用于将待配置的表单或列表文件读入内存，并基于预封装的组件在图形化界面中进行显示；其中，所述表单及列表文件中的各配置项分别与其对应的预封装组件相关联；
[0024]动态配置单元，其用于在所述图形化界面中通过拖拽属性字段、修改字段名称以及自定义排序，实现表单或列表文件中各配置项所对应资产属性值的动态配置；
[0025]页面渲染单元，其用于获取配置的表单或列表的资产属性值，基于表单或列表的预封装组件实现相关页面中表单或列表的动态渲染；
[0026]其中，对于所述表单，采用预置表单项的方式封装动态表单组件，其中，所述表单
基于JSON格式文件进行表示；对于所述列表，采用JSX与渲染器结合的方式进行动态列表封装；所述封装的动态表单组件及动态列表均在所述图形化界面中进行展示。
[0027]根据本专利技术实施例的第三方面，提供了一种计算机可读存储介质，其上存储有程序，该程序被处理器执行时实现如上所述的一种基于自定义配置属性字段的页面动态渲染方法。
[0028]根据本专利技术实施例的第四方面，提供了一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的程序，所述处理器执行所述程序时实现如上所述的一种基于自定义配置属性字段的页面动态渲染方法。
[0029]与现有技术相比，本公开的有益效果是：
[0030](1)本公开提供了一种基于自定义配置属性字段的页面动态渲染方法及系统，所述方案通过拖拽属性字段、修改字段名称，自定义排序等功能，完成表单、列表中资产属性值动态配置，并在获取基础属性值后，通过表单、列表封装组件完成相关本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于自定义配置属性字段的页面动态渲染方法，其特征在于，包括：将待配置的表单或列表文件读入内存，并基于预封装的组件在图形化界面中进行显示；其中，所述表单及列表文件中的各配置项分别与其对应的预封装组件相关联；在所述图形化界面中通过拖拽属性字段、修改字段名称以及自定义排序，实现表单或列表文件中各配置项所对应资产属性值的动态配置；获取配置的表单或列表的资产属性值，基于表单或列表的预封装组件实现相关页面中表单或列表的动态渲染；其中，对于所述表单，采用预置表单项的方式封装动态表单组件，其中，所述表单基于JSON格式文件进行表示；对于所述列表，采用JSX与渲染器结合的方式进行动态列表封装；所述封装的动态表单组件及动态列表均在所述图形化界面中进行展示。2.如权利要求1所述的一种基于自定义配置属性字段的页面动态渲染方法，其特征在于，所述采用预置表单项的方式封装动态表单组件，具体为：预先将表单常用项封装为表单组件，所述表单常用项包括文本框、下拉框、级联选择器、文本域以及日期选择器。3.如权利要求1所述的一种基于自定义配置属性字段的页面动态渲染方法，其特征在于，所述实现表单或列表文件中各配置项所对应资产属性值的动态配置，具体为：通过在所述图形化界面中拖拽属性字段、修改字段名称以及自定义排序，实现表单或列表对应配置项的修改，并将修改后的配置项属性值返回至内存中的表单或列表文件中。4.如权利要求1所述的一种基于自定义配置属性字段的页面动态渲染方法，其特征在于，获取配置的表单或列表的资产属性值，基于表单或列表的预封装组件实现相关页面中表单或列表的动态渲染，具体为：从表单或列表文件中读取修改后的配置项，并进行相关校验判断后，通过循环遍历表单或列表相关组件的方式完成表单或列表在页面上的渲染。5.如权利要求4所述的一种基于自定义配置属性字段的页面动态渲染方法，其特征在于，所述相关校验判断包括表单项类型、是否必填、限制字长、是否超链接、是否校验特殊字符以及一行展示几个表单项的属性值逻辑判断。6.如权利要求1所述的一种基于自定义配置属性字段的页面动态渲染方法，其特征在于，...

【专利技术属性】
技术研发人员：张馨予，田加峰，崔凤，郝长征，
申请(专利权)人：中孚安全技术有限公司，
类型：发明
国别省市：