CN117519891B - 数据的渲染方法、装置、终端设备和可读存储介质 - Google Patents
数据的渲染方法、装置、终端设备和可读存储介质 Download PDFInfo
- Publication number
- CN117519891B CN117519891B CN202410021331.7A CN202410021331A CN117519891B CN 117519891 B CN117519891 B CN 117519891B CN 202410021331 A CN202410021331 A CN 202410021331A CN 117519891 B CN117519891 B CN 117519891B
- Authority
- CN
- China
- Prior art keywords
- data
- parameters
- screening
- rendering
- value
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000009877 rendering Methods 0.000 title claims abstract description 63
- 238000000034 method Methods 0.000 title claims abstract description 38
- 238000012216 screening Methods 0.000 claims abstract description 77
- 230000000007 visual effect Effects 0.000 claims abstract description 14
- 238000004590 computer program Methods 0.000 claims description 24
- 230000006870 function Effects 0.000 claims description 24
- 238000006243 chemical reaction Methods 0.000 claims description 4
- 230000010365 information processing Effects 0.000 abstract description 2
- 238000010586 diagram Methods 0.000 description 6
- 238000001914 filtration Methods 0.000 description 6
- 238000012545 processing Methods 0.000 description 5
- 230000008569 process Effects 0.000 description 4
- 230000009286 beneficial effect Effects 0.000 description 3
- 230000008878 coupling Effects 0.000 description 3
- 238000010168 coupling process Methods 0.000 description 3
- 238000005859 coupling reaction Methods 0.000 description 3
- 238000013461 design Methods 0.000 description 3
- 230000008520 organization Effects 0.000 description 3
- 238000004891 communication Methods 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 230000002452 interceptive effect Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000012856 packing Methods 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 230000001360 synchronised effect Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/903—Querying
- G06F16/90335—Query processing
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Human Computer Interaction (AREA)
- Computational Linguistics (AREA)
- Data Mining & Analysis (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本申请适用于信息处理技术领域，提供了一种数据的渲染方法、装置、终端设备和可读存储介质。上述数据的渲染方法包括：获取树形数据；将树形数据转换成扁平数组；为扁平数组中的数据设置属性参数，得到第一数据；为第一数据设置筛选参数，得到第二数据；接收滚动指令，并根据滚动指令确定可视区域；利用vxe‑list组件在可视区域内渲染第二数据。本申请实施例可以直接在扁平数组中查找和渲染数据，从而提高渲染性能，减少渲染时间，提高用户体验。同时为扁平数据中的数据设置属性参数以及筛选参数，可以便于后续控制数据节点的状态，以及使得用户可以对数据进行筛选，从而提升用户的使用体验。
Description
技术领域
本申请属于信息处理技术领域，尤其涉及一种数据的渲染方法、装置、终端设备和可读存储介质。
背景技术
树形结构是交互设计中的基础组件，其拥有清晰的层级结构，可以通过这些清晰的层级结构来展示层级信息，以便用户根据层级结构来浏览和选择不同的项目或选项。树形结构使用较为广泛，例如导航、空间或逻辑组织、页面定位、级联选择等，其结构可展开或折叠，并根据相应的使用环境可进行相应的适应性改造。
在相关技术中，树形数据大多是采用递归形式生成，当树形数据较多时，例如超过1000条时，采用递归形式生成的树形结构在渲染时容易出现卡顿，从而影响用户体验。
发明内容
本申请实施例提供一种数据的渲染方法、装置、终端设备和可读存储介质，可以解决相关技术中采用树形结构渲染大量数据时容易卡顿的问题。
第一方面，本申请实施例提供了一种数据的渲染方法，包括：
获取树形数据；
将树形数据转换成扁平数组；
为扁平数组中的数据设置属性参数，得到第一数据；
为第一数据设置筛选参数，得到第二数据；
接收滚动指令，并根据滚动指令确定可视区域；
利用vxe-list组件在可视区域内渲染第二数据。
第二方面，本申请实施例提供了一种数据的渲染装置，包括：
获取模块，用于获取树形数据；
转换模块，用于将树形数据转换成扁平数组；
第一设置模块，用于为扁平数组中的数据设置属性参数，得到第一数据；
第二设置模块，用于为第一数据设置筛选参数，得到第二数据；
确定模块，用于接收滚动指令，并根据滚动指令确定可视区域；
渲染模块，用于利用vxe-list组件在可视区域内渲染第二数据。
第三方面，本申请实施例提供了一种终端设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述数据的渲染方法的步骤。
第四方面，本申请实施例提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现上述数据的渲染方法的步骤。
第五方面，本申请实施例提供了一种计算机程序产品，当计算机程序产品在终端设备上运行时，使得终端设备执行上述数据的渲染方法。
本申请实施例与现有技术相比的有益效果是：本申请实施例通过获取树形数据，并将树形数据转换成扁平数组，再为扁平数组中的数据设置属性参数，得到第一数据，以及为第一数据设置筛选参数，得到第二数据，然后接收滚动指令，并根据滚动指令确定可视区域，最后利用vxe-list组件在可视区域内渲染第二数据。本申请实施例通过将树形数据转换成扁平数组，不需要再递归遍历整个树形结构，可以直接在扁平数组中查找和渲染数据，从而提高渲染性能，减少渲染时间，提高用户体验。同时为扁平数据中的数据设置属性参数以及筛选参数，可以便于后续控制数据节点的状态，以及使得用户可以对数据进行筛选，从而提升用户的使用体验。
附图说明
为了更清楚地说明本申请实施例中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
图1是本申请实施例提供的一种数据的渲染方法的实现流程示意图；
图2是本申请实施例提供的设置筛选参数的实现流程示意图；
图3是本申请实施例提供的渲染第二数据的实现流程示意图；
图4是本申请实施例提供的更新绑定值的实现流程示意图；
图5是本申请实施例提供的一种数据的渲染装置的结构示意图；
图6是本申请实施例提供的终端设备的结构示意图。
具体实施方式
为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。基于本申请的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本申请保护。
需要说明的是，本申请的说明书和权利要求书及上述附图中的术语“包括”、“包含”和“具有”以及它们任何变形，意图在于覆盖不排他的包含。例如包含了一系列步骤或单元的过程、方法、终端、产品或设备没有限定于已列出的步骤或单元，而是可选地还包括没有列出的步骤或单元，或可选地还包括对于这些过程、方法、产品或设备固有的其他步骤或单元。在本申请的权利要求书、说明书以及说明书附图中的术语，诸如“第一”和“第二”等之类的关系术语仅仅用来将一个实体/操作/对象与另一个实体/操作/对象区分开来，而不一定要求或者暗示这些实体/操作/对象之间存在任何这种实时的关系或者顺序。
在本文中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本申请的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其他实施例互斥的独立的或备选的实施例。本领域技术人员显式地和隐式地理解的是，本文所描述的实施例可以与其他实施例相结合。
树形结构是交互设计中的基础组件，其拥有清晰的层级结构，可以通过这些清晰的层级结构来展示层级信息，以便用户根据层级结构来浏览和选择不同的项目或选项。树形结构使用较为广泛，例如导航、空间或逻辑组织、页面定位、级联选择等，其结构可展开或折叠，并根据相应的使用环境可进行相应的适应性改造。在相关技术中，树形数据大多是采用递归形式生成，当树形数据较多时，例如超过1000条时，采用递归形式生成的树形结构在渲染时容易出现卡顿，从而影响用户体验。
有鉴于此，本申请实施例通过将树形数据转换成扁平数组，不需要再递归遍历整个树形结构，可以直接在扁平数组中查找和渲染数据，从而提高渲染性能，减少渲染时间，提高用户体验。同时为扁平数据中的数据设置属性参数以及筛选参数，可以便于后续控制数据节点的状态，以及使得用户可以对数据进行筛选，从而提升用户的使用体验。
为了说明本申请的技术方案，下面通过具体实施例来进行说明。
图1示出了本申请实施例提供的一种数据的渲染方法的实现流程示意图，该方法可以应用于终端设备上。终端设备可以是手机、平板电脑、笔记本电脑、超级移动个人计算机(ultra-mobile personal computer，UMPC)、上网本等。
具体的，上述数据的渲染方法可以包括以下步骤S101至步骤S106。
步骤S101，获取树形数据。
在本申请的实施方式中，用户可以向终端设备发送数据获取指令（例如URL）。终端设备可以接收数据获取指令，向对应的服务器或网页获取树形结构。可以理解的是，服务器或网页中可以储存有树形数据。
步骤S102，将树形数据转换成扁平数组。
其中，扁平数组可以是一个扁平的列表，树形数据中的每个节点都可以在扁平数组中占据一个位置，也即各节点不再嵌套层次。扁平数组通常是一个一维数组，每个节点包含其在树形结构中的信息，例如节点的层级关系、父节点的标识符以及节点的数据等。
在本申请的一些具体实施方式中，上述将树形数据转换成扁平数组，具体可以包括以下步骤：
调用toTreeArray函数将树形数据转换成扁平数组。
其中，toTreeArray函数可以用于将树形数据结构转换成扁平的数组结构。
在本申请的实施方式中，终端设备可以调用toTreeArray函数，对树形数据进行递归遍历，将树形数据中的所有节点一一添加至扁平数组中。
步骤S103，为扁平数组中的数据设置属性参数，得到第一数据。
其中，属性参数可以用于控制扁平数组中的数据的状态。第一数据为设置了属性参数后的数据。
在本申请的一些具体实施方式中，上述为扁平数组中的数据设置属性参数，得到第一数据，具体可以包括以下步骤：
为扁平数组中的所有数据设置属性参数，得到第一数据。
其中，属性参数可以包括位置下标参数、层级参数、唯一键参数、叶子节点参数、父级键参数、收起参数、展开参数、显示参数、选中参数中的一种或多种。具体的，位置下标参数为_INDEX，可以用于指示树形结构中节点的位置或索引。它提供了一种方式来唯一标识树中的节点，以便在数据结构中进行查找、访问或排序操作。层级参数为_LEVEL，可以用于表示树形结构中节点的深度或层级。它通常用于跟踪从根节点到当前节点的路径长度，以确定节点在树中的位置。唯一键参数为_KEY，可以用于表示树形结构中节点的键值。叶子节点参数为_LEAF，可以用于指示树形结构中叶节点的位置或标识。叶节点是指没有子节点的节点，通常用于表示数据的最终点或末端。父级键参数为_PARENT，可以用于表示树形结构中节点的父节点。父节点是指与当前节点直接连接的节点，用于组织树的结构。收起参数为_SHRINK，可以用于缩小树形结构中的节点。它通常用于减少节点的子节点数量，以优化存储空间或提高查询效率。展开参数为_EXPAND，可以用于扩展树形结构中的节点。它通常用于增加节点的子节点数量，以添加更多的相关数据或组织结构。显示参数为_VISUAL，可以用于可视化树形结构中的节点和边。它通常用于呈现树的结构和关系，以便更好地理解和分析数据。选中参数为_SELECT，可以用于选择树形结构中的节点或子树。它通常用于过滤或查找满足特定条件的节点或子树，以便进行进一步的处理或操作。
在本申请的实施方式中，终端设备可以根据实际需要，为扁平数组中的所有数据添加属性参数，并对属性参数进行设置。例如可以为所有节点添加收起参数，并将第一层的节点收起参数设置为false，即可控制第一层的所有节点都不收起。本申请实施方式通过为扁平数据中的数据节点设置属性参数，可以便于后续控制数据节点的状态。
步骤S104，为第一数据设置筛选参数，得到第二数据。
其中，筛选参数可以用于控制节点的筛选状态。第二数据为设置了筛选参数的数据。
在本申请的实施方式中，终端设备可以为第一数据添加并设置筛选参数，从而得到第二数据。本申请实施方式通过为数据节点设置筛选参数，可以使得用户可以对数据进行筛选，从而提升用户的使用体验。
步骤S105，接收滚动指令，并根据滚动指令确定可视区域。
其中，滚动指令可以是用户通过滚动鼠标滚轮所生成的。可视区域用于确定数据的渲染范围。
在本申请的实施方式中，终端设备可以接收滚动指令，并根据滚动指令中所包含的滚动距离，来确定可视区域。
步骤S106，利用vxe-list组件在可视区域内渲染第二数据。
其中，vxe-list组件可以用于渲染可视区域内的数据。
在本申请的实施方式中，终端设备可以将第二数据传入vxe-list组件，利用vxe-list组件对可视区域内的第二数据进行渲染，并将可视区域外的数据卷起来，从而提高渲染性能及流畅性。
本申请实施例与现有技术相比的有益效果是：本申请实施例通过获取树形数据，并将树形数据转换成扁平数组，再为扁平数组中的数据设置属性参数，得到第一数据，以及为第一数据设置筛选参数，得到第二数据，然后接收滚动指令，并根据滚动指令确定可视区域，最后利用vxe-list组件在可视区域内渲染第二数据。本申请实施例通过将树形数据转换成扁平数组，不需要再递归遍历整个树形结构，可以直接在扁平数组中查找和渲染数据，从而提高渲染性能，减少渲染时间，提高用户体验。同时为扁平数据中的数据设置属性参数以及筛选参数，可以便于后续控制数据节点的状态，以及使得用户可以对数据进行筛选，从而提升用户的使用体验。
如图2所示，在本申请的一些具体实施方式中，上述为第一数据设置筛选参数，得到第二数据，具体可以包括步骤S201及至步骤S204。
步骤S201，获取第一输入值。
其中，第一输入值是用户输入的值。
在本申请的实施方式中，终端设备可以获取用户在输入框中输入的值（即第一输入值）。
步骤S202，调用filterTreeArray函数将第一输入值作为输入，得到返回值。
其中，filterTreeArray函数可以用于确定哪些节点符合筛选条件。返回值可以是布尔值。
在本申请的实施方式中，终端设备可以调用filterTreeArray函数，并将第一输入值作为filterTreeArray函数的输入，filterTreeArray函数可以检查节点的对应属性，当节点的对应属性横纵包含第一输入值时，则返回true。若节点的对应属性横纵不包含第一输入值，则返回flase。
步骤S203，基于返回值判断第一数据是否符合筛选条件，得到判断结果。
在本申请的实施方式中，终端设备可以获取返回值，并根据返回值判断第一数据是否符合筛选条件。具体的，若返回值为true，则判断结果为第一数据符合筛选条件。若返回值为flase，则判断结果为第一数据不符合筛选条件。
步骤S204，根据判断结果为第一数据设置筛选参数，得到第二数据。
其中，筛选参数可以包括筛选结果参数、筛选相关性参数、子级筛选参数中的一种或多种。筛选结果参数是FILTER，可以用于在树形结构中过滤出符合特定条件的数据。筛选相关性参数是_FILTER_RELATE，可以用于在树形结构中执行关系过滤。它接受两个参数，通常是一个节点和一个关系类型，并返回一个布尔值，表示该节点是否与给定的关系类型相关联。子级筛选参数是_IS_CHILD_FILTER，可以用于在树形结构中确定一个节点是否是另一个节点的子节点。它接受两个参数，通常是一个节点和另一个节点，并返回一个布尔值，表示第一个节点是否是第二个节点的子节点。
在本申请的实施方式中，终端设备可以根据判断结果为第一数据设置筛选参数。具体的，若判断结果为第一数据符合筛选条件，则可以根据预先设备的默认筛选条件，为第一数据设置筛选参数，例如可以将筛选结果参数设置为false，将筛选相关性参数设置为true，将子级筛选参数设置为flase。若判断结果为第一数据不符合筛选条件，则可以根据预先设备的默认筛选条件，为第一数据设置筛选参数，例如可以将筛选结果参数设置为true，将筛选相关性参数设置为flase，将子级筛选参数设置为true。
如图3所示，在本申请的一些具体实施方式中，上述利用vxe-list组件在可视区域内渲染第二数据，具体可以包括步骤S301至步骤S303。
步骤S301，获取第二数据的筛选相关性参数。
在本申请的实施方式中，终端设备可以直接获取第二数据的筛选相关性参数。
步骤S302，基于筛选相关性参数判断第二数据的显示参数以及收起参数。
在本申请的实施方式中，终端设备可以根据筛选相关性参数的布尔值，以及预先设置的筛选相关性参数的布尔值，与显示参数以及收起参数的布尔值之间的对应关系，来判断第二数据的显示参数的布尔值以及收起参数的布尔值。
步骤S303，将第二数据中的第三数据传入vxe-list组件，并利用vxe-list组件在可视区域内渲染第三数据。
其中，第三数据的收起参数为false且显示参数属性为true。
在本申请的实施方式中，终端设备可以接收用户输入的筛选值，并根据输入的筛选值返回收起参数为false且显示参数属性为true的第三数据。然后对第三数据进行渲染。
可以理解的是，在本申请的实施方式中，可以根据节点设置的筛选参数，以及用户输入的筛选值，来渲染并显示对应的节点。
如图4所示，在本申请的一些实施方式中，在上述为第一数据设置筛选参数，得到第二数据之后，上述接收滚动指令，并根据所述滚动指令确定可视区域之前，上述方法还可以包括步骤S401至步骤S404。
步骤S401，获取绑定值以及第二输入值。
其中，绑定值可以是在第一次渲染时，从服务器获取的勾选值，也即用户的历史勾选值。第二输入值可以是用户输入的值。
在本申请的实施方式中，终端设备可以从服务器获取绑定值，还可以从输入框获取第二输入值。
步骤S402，判断绑定值与第二输入值是否一致。
在本申请的实施方式中，得到绑定值与第二输入值后，终端设备可以比较绑定值与第二输入值，判断绑定值与第二输入值是否一致。
步骤S403，若绑定值与第二输入值不一致，将第二输入值更新为绑定值，得到更新第二输入值。
在本申请的实施方式中，若绑定值与第二输入值不一致，可以说明用户没有输入与绑定值一致的值，此时终端设备可以将第二输入值更新为绑定值，得到更新第二输入值。也即将第二输入值变成与绑定值一致。
具体的，若是绑定值对应的节点是单选节点，则根据绑定值更新对应节点的选择状态。如果绑定值匹配某个节点的值，那么该节点的选中参数将被设置为true，表示该节点被选中，同时取消之前选中节点的选择状态。这样可以确保当前选中的节点始终与绑定值的值保持同步。若是绑定值对应的节点是多选节点，则该节点的选中参数同样将被设置为true。
步骤S404，对更新第二输入值进行展开控制。
在本申请的实施方式中，在将第二输入值更新为绑定值后，终端设备可以对更新第二输入值进行展开控制。
可以理解的是，当用户在某次操作中勾选了某些节点后，服务器可以储存这些勾选值，并变成绑定值。在下次操作中，当用户重新打开渲染这些节点时，一开始这些节点没有被勾选，此时终端设备可以调取服务器中的绑定值，并根据绑定值勾选对应的节点，不需要用户再重新勾选这些节点，减少了用户的操作量，从而提升了用户的使用体验。
在本申请的一些实施方式中，在上述获取树形数据之后，上述将树形数据转换成扁平数组之前，上述方法还包括以下步骤：
配置树形数据的功能参数。
其中，功能参数可以包括单选/多选参数、高亮参数、父子不互相关联参数、子关联参数、显示无关节点参数中的一种或多种。具体的，单选/多选参数可以用于指定节点是单选节点还是多选节点。高亮参数可以用于指示是否突出显示当前选定的节点。当用户选择或交互某个节点时，该节点通常会被突出显示，以吸引用户的注意力并强调其重要性。父子不互相关联参数可以用于指定两个节点之间是否存在关系。当两个节点之间没有明确的关系或连接时，可以设置no-relationship为true，表示它们之间没有直接的关联。子关联参数可以用于指定一个节点是否是其父节点的子节点。显示无关节点参数可以用于指示是否显示与当前视图或查询无关的节点。在某些情况下，可能只对显示与特定条件或查询相关的节点感兴趣，而隐藏其他无关的节点。将show-irrelevant-nodes设置为false可以隐藏这些无关的节点。
在本申请的实施方式中，终端设备可以为所有树形数据的所有节点预先设置上述功能参数。
图5示出了本申请实施例提供的一种数据的渲染装置的结构示意图，上述数据的渲染装置5可以配置于终端设备上，具体的，上述数据的渲染装置5，可以包括：
获取模块501，用于获取树形数据；
转换模块502，用于将树形数据转换成扁平数组；
第一设置模块503，用于为扁平数组中的数据设置属性参数，得到第一数据；
第二设置模块504，用于为第一数据设置筛选参数，得到第二数据；
确定模块505，用于接收滚动指令，并根据滚动指令确定可视区域；
渲染模块506，用于利用vxe-list组件在可视区域内渲染第二数据。
本申请实施例与现有技术相比的有益效果是：本申请实施例通过获取树形数据，并将树形数据转换成扁平数组，再为扁平数组中的数据设置属性参数，得到第一数据，以及为第一数据设置筛选参数，得到第二数据，然后接收滚动指令，并根据滚动指令确定可视区域，最后利用vxe-list组件在可视区域内渲染第二数据。本申请实施例通过将树形数据转换成扁平数组，不需要再递归遍历整个树形结构，可以直接在扁平数组中查找和渲染数据，从而提高渲染性能，减少渲染时间，提高用户体验。同时为扁平数据中的数据设置属性参数以及筛选参数，可以便于后续控制数据节点的状态，以及使得用户可以对数据进行筛选，从而提升用户的使用体验。
在本申请的一些实施方式中，上述第二设置模块504还可以用于：获取第一输入值；调用filterTreeArray函数将第一输入值作为输入，得到返回值；基于返回值判断第一数据是否符合筛选条件，得到判断结果；根据判断结果为第一数据设置筛选参数，得到第二数据，筛选参数包括筛选结果参数、筛选相关性参数、子级筛选参数中的一种或多种。
在本申请的一些实施方式中，上述渲染模块506还可以用于：获取第二数据的筛选相关性参数；基于筛选相关性参数判断第二数据的显示参数以及收起参数；将第二数据中的第三数据传入vxe-list组件，并利用vxe-list组件在可视区域内渲染第三数据，第三数据的收起参数为false且显示参数属性为true。
在本申请的一些实施方式中，上述数据的渲染装置5还可以包括更新模块，用于：获取绑定值以及第二输入值；判断绑定值与第二输入值是否一致；若绑定值与第二输入值不一致，将第二输入值更新为绑定值，得到更新第二输入值；对更新第二输入值进行展开控制。
在本申请的一些实施方式中，上述第一设置模块503还可以用于：为扁平数组中的所有数据设置属性参数，得到第一数据，属性参数包括位置下标参数、层级参数、唯一键参数、叶子节点参数、父级键参数、收起参数、展开参数、显示参数、选中参数中的一种或多种。
在本申请的一些实施方式中，上述转换模块502还可以用于：调用toTreeArray函数将树形数据转换成扁平数组。
在本申请的一些实施方式中，上述数据的渲染装置5还可以包括配置模块，用于：配置树形数据的功能参数，功能参数包括单选/多选参数、高亮参数、父子不互相关联参数、子关联参数、显示无关节点参数中的一种或多种。
如图6所示，为本申请实施例提供的一种终端设备的示意图。该终端设备6可以包括：处理器601、存储器602以及存储在所述存储器602中并可在所述处理器601上运行的计算机程序603，例如数据的渲染程序。所述处理器601执行所述计算机程序603时实现上述各个数据的渲染方法实施例中的步骤，例如图1所示的步骤S101至步骤S106。或者，所述处理器601执行所述计算机程序603时实现上述各装置实施例中各模块/单元的功能，例如图5所示的获取模块501、转换模块502、第一设置模块503、第二设置模块504、确定模块505、渲染模块506。
所述计算机程序可以被分割成一个或多个模块/单元，所述一个或者多个模块/单元被存储在所述存储器602中，并由所述处理器601执行，以完成本申请。所述一个或多个模块/单元可以是能够完成特定功能的一系列计算机程序指令段，该指令段用于描述所述计算机程序在所述终端设备中的执行过程。
所述终端设备可包括，但不仅限于，处理器601、存储器602。本领域技术人员可以理解，图6仅仅是终端设备的示例，并不构成对终端设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件，例如所述终端设备还可以包括输入输出设备、网络接入设备、总线等。
所称处理器601可以是中央处理单元(Central Processing Unit，CPU)，还可以是其他通用处理器、数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现成可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。
所述存储器602可以是所述终端设备的内部存储单元，例如终端设备的硬盘或内存。所述存储器602也可以是所述终端设备的外部存储设备，例如所述终端设备上配备的插接式硬盘，智能存储卡（Smart Media Card，SMC），安全数字（Secure Digital，SD）卡，闪存卡（Flash Card）等。进一步地，所述存储器602还可以既包括所述终端设备的内部存储单元也包括外部存储设备。所述存储器602用于存储所述计算机程序以及所述终端设备所需的其他程序和数据。所述存储器602还可以用于暂时地存储已经输出或者将要输出的数据。
需要说明的是，为描述的方便和简洁，上述终端设备的结构还可以参考方法实施例中对结构的具体描述，在此不再赘述。
所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，仅以上述各功能单元、模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能单元、模块完成，即将所述装置的内部结构划分成不同的功能单元或模块，以完成以上描述的全部或者部分功能。实施例中的各功能单元、模块可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中，上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。另外，各功能单元、模块的具体名称也只是为了便于相互区分，并不用于限制本申请的保护范围。上述系统中单元、模块的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。
本申请实施例还提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时可实现上述数据的渲染方法中的步骤。
本申请实施例提供了一种计算机程序产品，当计算机程序产品在移动终端上运行时，使得移动终端执行时可实现上述数据的渲染方法中的步骤。
在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述或记载的部分，可以参见其它实施例的相关描述。
本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对各个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本申请的范围。
在本申请所提供的实施例中，应该理解到，所揭露的装置/终端设备和方法，可以通过其它的方式实现。例如，以上所描述的装置/终端设备实施例仅仅是示意性的，例如，所述模块或单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通讯连接可以是通过一些接口，装置或单元的间接耦合或通讯连接，可以是电性，机械或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。
所述集成的模块/单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请实现上述实施例方法中的全部或部分流程，也可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一计算机可读存储介质中，该计算机程序在被处理器执行时，可实现上述各个方法实施例的步骤。其中，所述计算机程序包括计算机程序代码，所述计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。所述计算机可读介质可以包括：能够携带所述计算机程序代码的任何实体或装置、记录介质、U盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器（Read-Only Memory，ROM）、随机存取存储器（RandomAccess Memory，RAM）、电载波信号、电信信号以及软件分发介质等。需要说明的是，所述计算机可读介质包含的内容可以根据司法管辖区内立法和专利实践的要求进行适当的增减，例如在某些司法管辖区，根据立法和专利实践，计算机可读介质不包括电载波信号和电信信号。
以上所述实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的精神和范围，均应包含在本申请的保护范围之内。
Claims (7)
1.一种数据的渲染方法，其特征在于，包括：
获取树形数据；
将所述树形数据转换成扁平数组；
为所述扁平数组中的数据设置属性参数，得到第一数据；
为所述第一数据设置筛选参数，得到第二数据；
接收滚动指令，并根据所述滚动指令确定可视区域；
利用vxe-list组件在所述可视区域内渲染所述第二数据；
其中，所述为所述第一数据设置筛选参数，得到第二数据，包括：
获取第一输入值；
调用filterTreeArray函数将所述第一输入值作为输入，得到返回值；
基于所述返回值判断所述第一数据是否符合筛选条件，得到判断结果；
根据所述判断结果为所述第一数据设置筛选参数，得到所述第二数据，所述筛选参数包括筛选结果参数、筛选相关性参数、子级筛选参数中的一种或多种；
其中，所述利用vxe-list组件在所述可视区域内渲染所述第二数据，包括：
获取所述第二数据的所述筛选相关性参数；
基于所述筛选相关性参数判断所述第二数据的显示参数以及收起参数；
将所述第二数据中的第三数据传入所述vxe-list组件，并利用所述vxe-list组件在所述可视区域内渲染所述第三数据，所述第三数据的所述收起参数为false且所述显示参数属性为true；
其中，在所述为所述第一数据设置筛选参数，得到第二数据之后，所述接收滚动指令，并根据所述滚动指令确定可视区域之前，所述方法还包括：
获取绑定值以及第二输入值；
判断所述绑定值与所述第二输入值是否一致；
若所述绑定值与所述第二输入值不一致，将所述第二输入值更新为所述绑定值，得到更新第二输入值；
对所述更新第二输入值进行展开控制。
2.如权利要求1所述的数据的渲染方法，其特征在于，所述为所述扁平数组中的数据设置属性参数，得到第一数据，包括：
为所述扁平数组中的所有数据设置所述属性参数，得到第一数据，所述属性参数包括位置下标参数、层级参数、唯一键参数、叶子节点参数、父级键参数、收起参数、展开参数、显示参数、选中参数中的一种或多种。
3.如权利要求1所述的数据的渲染方法，其特征在于，所述将所述树形数据转换成扁平数组，包括：
调用toTreeArray函数将所述树形数据转换成扁平数组。
4.如权利要求1所述的数据的渲染方法，其特征在于，在所述获取树形数据之后，所述将所述树形数据转换成扁平数组之前，所述方法还包括：
配置所述树形数据的功能参数，所述功能参数包括单选/多选参数、高亮参数、父子不互相关联参数、子关联参数、显示无关节点参数中的一种或多种。
5.一种数据的渲染装置，其特征在于，包括：
获取模块，用于获取树形数据；
转换模块，用于将所述树形数据转换成扁平数组；
第一设置模块，用于为所述扁平数组中的数据设置属性参数，得到第一数据；
第二设置模块，用于为所述第一数据设置筛选参数，得到第二数据；
确定模块，用于接收滚动指令，并根据所述滚动指令确定可视区域；
渲染模块，用于利用vxe-list组件在所述可视区域内渲染所述第二数据；
其中，所述第二设置模块还用于：
获取第一输入值；
调用filterTreeArray函数将所述第一输入值作为输入，得到返回值；
基于所述返回值判断所述第一数据是否符合筛选条件，得到判断结果；
根据所述判断结果为所述第一数据设置筛选参数，得到所述第二数据，所述筛选参数包括筛选结果参数、筛选相关性参数、子级筛选参数中的一种或多种；
其中，所述渲染模块还用于：
获取所述第二数据的所述筛选相关性参数；
基于所述筛选相关性参数判断所述第二数据的显示参数以及收起参数；
将所述第二数据中的第三数据传入所述vxe-list组件，并利用所述vxe-list组件在所述可视区域内渲染所述第三数据，所述第三数据的所述收起参数为false且所述显示参数属性为true；
其中，所述数据的渲染装置还包括更新模块，用于：
获取绑定值以及第二输入值；
判断所述绑定值与所述第二输入值是否一致；
若所述绑定值与所述第二输入值不一致，将所述第二输入值更新为所述绑定值，得到更新第二输入值；
对所述更新第二输入值进行展开控制。
6.一种终端设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如权利要求1至4任一项所述数据的渲染方法的步骤。
7.一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至4任一项所述数据的渲染方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202410021331.7A CN117519891B (zh) | 2024-01-08 | 2024-01-08 | 数据的渲染方法、装置、终端设备和可读存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202410021331.7A CN117519891B (zh) | 2024-01-08 | 2024-01-08 | 数据的渲染方法、装置、终端设备和可读存储介质 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN117519891A CN117519891A (zh) | 2024-02-06 |
| CN117519891B true CN117519891B (zh) | 2024-04-30 |
Family
ID=89746096
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202410021331.7A Active CN117519891B (zh) | 2024-01-08 | 2024-01-08 | 数据的渲染方法、装置、终端设备和可读存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN117519891B (zh) |
Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US8726230B1 (en) * | 2011-10-07 | 2014-05-13 | Google Inc. | Generating a user interface for sending data among resources |
| CN112506509A (zh) * | 2020-12-11 | 2021-03-16 | 杭州安恒信息技术股份有限公司 | 一种实现树形控件支持大数据渲染的方法及相关装置 |
| CN114840293A (zh) * | 2022-04-22 | 2022-08-02 | 平安国际智慧城市科技股份有限公司 | 树形控件的渲染方法、装置、计算机设备及存储介质 |
| CN115686509A (zh) * | 2022-09-27 | 2023-02-03 | 中银金融科技有限公司 | 一种基于vue框架的树形结构数据渲染方法、装置和介质 |
| CN116610398A (zh) * | 2023-05-09 | 2023-08-18 | 北京洞悉网络有限公司 | 递归树形组件展示方法、装置、计算机设备及计算机可读存储介质 |
| CN116931783A (zh) * | 2023-09-15 | 2023-10-24 | 中建三局信息科技有限公司 | 一种前端海量树形结构展示方法、装置、电子设备及介质 |
| CN116932829A (zh) * | 2023-07-21 | 2023-10-24 | 德邦证券股份有限公司 | 针对开发者的支持大数据树形视图组件的解决方案 |
| CN116955863A (zh) * | 2023-05-30 | 2023-10-27 | 武汉依迅北斗时空技术股份有限公司 | 基于虚拟树的动态树形结构渲染方法及装置 |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| JP5976825B2 (ja) * | 2012-10-10 | 2016-08-24 | エスケー プラネット カンパニー、リミテッド | ウェブ文書の高速ウェブスクロールを支援するユーザ端末装置及びスクロール方法 |
-
2024
- 2024-01-08 CN CN202410021331.7A patent/CN117519891B/zh active Active
Patent Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US8726230B1 (en) * | 2011-10-07 | 2014-05-13 | Google Inc. | Generating a user interface for sending data among resources |
| CN112506509A (zh) * | 2020-12-11 | 2021-03-16 | 杭州安恒信息技术股份有限公司 | 一种实现树形控件支持大数据渲染的方法及相关装置 |
| CN114840293A (zh) * | 2022-04-22 | 2022-08-02 | 平安国际智慧城市科技股份有限公司 | 树形控件的渲染方法、装置、计算机设备及存储介质 |
| CN115686509A (zh) * | 2022-09-27 | 2023-02-03 | 中银金融科技有限公司 | 一种基于vue框架的树形结构数据渲染方法、装置和介质 |
| CN116610398A (zh) * | 2023-05-09 | 2023-08-18 | 北京洞悉网络有限公司 | 递归树形组件展示方法、装置、计算机设备及计算机可读存储介质 |
| CN116955863A (zh) * | 2023-05-30 | 2023-10-27 | 武汉依迅北斗时空技术股份有限公司 | 基于虚拟树的动态树形结构渲染方法及装置 |
| CN116932829A (zh) * | 2023-07-21 | 2023-10-24 | 德邦证券股份有限公司 | 针对开发者的支持大数据树形视图组件的解决方案 |
| CN116931783A (zh) * | 2023-09-15 | 2023-10-24 | 中建三局信息科技有限公司 | 一种前端海量树形结构展示方法、装置、电子设备及介质 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN117519891A (zh) | 2024-02-06 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US8250491B2 (en) | Navigation history | |
| US7730397B2 (en) | System and method for rapid presentation of structured digital content items | |
| CN109308284B (zh) | 报表菜单生成方法、装置、计算机设备及存储介质 | |
| US20160147773A1 (en) | Server side system and method for search backed calendar user interface | |
| CN102662666B (zh) | 一种界面菜单的创建方法及装置 | |
| CN112631591B (zh) | 表元素联动方法、装置、设备与计算机可读存储介质 | |
| CN112099891A (zh) | 弹窗展示方法、装置、电子设备及计算机可读存储介质 | |
| CN103761278A (zh) | 一种进行位置信息搜索的方法和一种浏览器终端 | |
| CN117519891B (zh) | 数据的渲染方法、装置、终端设备和可读存储介质 | |
| CN108052290A (zh) | 用于存储数据的方法和装置 | |
| CN109814778B (zh) | 小程序选项卡的实现方法、装置、电子设备及介质 | |
| CN116932829A (zh) | 针对开发者的支持大数据树形视图组件的解决方案 | |
| CN108959294A (zh) | 一种访问搜索引擎的方法和装置 | |
| CN111142989A (zh) | 对象管理方法、装置及存储介质 | |
| CN111367606A (zh) | 一种应用程序页面的显示方法、装置、终端及介质 | |
| CN103838474A (zh) | 浏览器新建标签页的展现方法和浏览器客户端 | |
| CN113094286B (zh) | 页面测试方法和装置、存储介质和电子设备 | |
| CN113589996A (zh) | 一种菜单处理方法及装置 | |
| CN110532260B (zh) | 逻辑表达式的存储及读取方法、装置、电子设备及介质 | |
| CN110442403B (zh) | 一种调用功能组件的方法、装置、电子设备及介质 | |
| CN112905759A (zh) | 一种知识产权检索系统及方法 | |
| CN114065248A (zh) | 用户访问权限的控制方法、装置、电子设备及存储介质 | |
| CN103778181A (zh) | 浏览器收藏夹中图标的导入方法及装置 | |
| CN114416945A (zh) | 一种词云图显示方法、装置、设备及介质 | |
| CN108255931B (zh) | 一种网站导航方法及服务器 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |