[发明专利]数据渲染方法、装置及电子设备

说明书

本申请提供一种数据渲染方法、装置及电子设备。该方法包括：根据节点数据，构建具有父子属性的结构数据；针对结构数据中的每一层，为该层的节点数据封装组件，并将每层的节点数据传递至封装的组件中；根据所有节点数据的组件，执行渲染处理。本申请根据数据的实际层级来动态地生成树形组件进行渲染，相较于向预先封装的树形组件进行渲染的方法，能够满足实际数据结构的多变性，提高了数据渲染的灵活性。

技术领域

本申请涉及组件渲染技术，尤其涉及一种数据渲染方法、装置及电子设备。

背景技术

用树形结构展现数据在web应用中有着很广泛的应用，如用于显示带有上下级关系的组织结构和用户关系、用于显示层级的菜单等等。树形结构能最直观地呈现出数据间的父子关系。

目前，用于渲染树形结构数据的方法是将数据渲染进入预先封装好的树形组件。现有的树形组件展示方式多为垂直排列的组织结构，当树形结构数据层级较多时，需要点开每个层级选取子节点。

然而，预先封装好的树形组件的渲染效果固定且单一，灵活性较低。

发明内容

本申请提供一种数据渲染方法、装置及电子设备，用以提高数据渲染的灵活性。

第一方面，本申请提供一种数据渲染方法，包括：根据节点数据，构建具有父子属性的结构数据；针对结构数据中的每一层，为该层的节点数据封装组件，并将每层的节点数据传递至封装的组件中；根据所有节点数据的组件，执行渲染处理。

本申请依据树形结构数据的父子关系，动态地生成组件渲染出树形节点数据间的层级关系，相较于对预先封装的空组件执行数据渲染，能够满足实际数据结构的多变性，提高了数据渲染的灵活性。并且避免了对预先封装的空组件执行数据渲染过程中可能出现的空数据的渲染问题，提高了网页加载性能。

进一步地，针对结构数据中的每一层，为该层的节点数据封装组件，并将每层的节点数据传递至封装的组件中，包括：针对结构数据中的首层，则为该层中的节点封装父节点层级组件，并将该层的节点数据传递至父节点层级组件中；自顶向下依次针对结构数据中的每一层，执行组件处理，直至当前层中的节点均不存在下一层子节点，组件处理包括：获取该层中的每个节点的下一层子节点，为子节点封装子节点层级组件，并将子节点的节点数据传递至封装的子节点层级组件中。

上述提供了一种为对结构数据的封装顺序。自根节点至叶子节点向下逐渐封装，相较于反向封装，实现起来更简单。

进一步地，为子节点封装子节点层级组件，包括：根据显示需求，选择具有对应的显示属性的组件，为子节点封装子节点层级组件。

上述方式使用户完全可以根据自身需求来封装各层级节点进行渲染，满足了用户个性化需求。通过选择平铺属性，可以满足业务页面以平铺方式展示树形结构的需求。

进一步地，为子节点封装子节点层级组件，包括：当当前层中的节点均不存在下一层子节点时，选择具有可选功能属性的组件，为子节点封装子节点层级组件。

上述设置，使用户可以与展示的节点进行交互，实现单选或多选操作。

进一步地，根据节点数据，构建具有父子属性的结构数据，包括：获取节点数据中各节点的子节点编号属性；利用各节点的子节点编号属性，构建具有父子属性的结构数据，结构数据包括各节点的子节点列表。

上述提供了一种构建结构数据的方法。

第二方面，本申请提供一种数据渲染装置，包括：

数据处理模块，用于根据节点数据，构建具有父子属性的结构数据；

封装模块，用于针对结构数据中的每一层，为该层的节点数据封装组件，并将每层的节点数据传递至封装的组件中；

渲染模块，用于根据所有节点数据的组件，执行渲染处理。