[发明专利]一种基于树形组件的页面展示方法及设备

说明书

本申请的目的是提供一种基于树形组件的页面展示的方法及设备，本申请通过将树形组件的指定属性设置为变量，得到受控组件，其中，所述受控组件包括开关控件和复选框控件；基于请求方式从前端页面获取数据源，对所述数据源进行调整，得到树形数据对象；根据所述树形数据对象对所述开关控件和复选框控件进行渲染，得到新的树形数据对象，其中，所述新的树形数据对象中的父节点包括开关控件且叶子节点包括复选框控件；根据选中的节点所对应的键值重新计算关联选中的开关控件下的所有节点的键值以及关联选中的复选框控件下的所有节点的键值，根据重新计算后的键值进行前端页面上的展示。从而灵活联动父节点及子节点，便于用户进行操作。

技术领域

本申请涉及计算机领域，尤其涉及一种基于树形组件的页面展示方法及设备。

背景技术

在网页(Web)前端开发领域里，树形组件可以很好的展示层级数据的显示，如展示组织架构、国家地区等等。常见的交互方式父子级数据关联选择、节点禁止选择及展开折叠等操作。

当前，父子节点关联控制的交互效果，通常为父节点选中，则选中全部子节点，并禁用；选中子节点后却不关联父节点的选中。使得用户难以进行灵活选择，不能够自由设置选中的节点，选中子节点后需要重新关联父节点增加了操作的复杂度。

发明内容

本申请的一个目的是提供一种基于树形组件的页面展示方法及设备，解决现有技术中父节点选中后选中全部子节点并禁用以及选中子节点后不关联父节点的选中的问题。

根据本申请的一个方面，提供了一种基于树形组件的页面展示方法，该方法包括：

将树形组件的指定属性设置为变量，得到受控组件，其中，所述受控组件包括开关控件和复选框控件；

基于请求方式从前端页面获取数据源，对所述数据源进行调整，得到树形数据对象；

根据所述树形数据对象对所述开关控件和复选框控件进行渲染，得到新的树形数据对象，其中，所述新的树形数据对象中的父节点包括开关控件且叶子节点包括复选框控件；

根据选中的节点所对应的键值重新计算关联选中的开关控件下的所有节点的键值以及关联选中的复选框控件下的所有节点的键值，根据重新计算后的键值进行前端页面上的展示。

可选地，所述根据选中的节点所对应的键值重新计算关联选中的开关控件下的所有节点的键值以及关联选中的复选框控件下的所有节点的键值之前，还包括：

为每一个开关控件添加第一监听函数以在所述开关控件被选中时或被取消选中时触发回调函数；

为每一个复选框控件添加第二监听函数以在所述复选框控件被选中时触发回调函数；

当所述第一监听函数或第二监听函数中任意一项被触发时，启动所述回调函数以根据所述选中的节点所对应的键值重新计算出关联选中的开关控件下的所有节点的键值以及关联选中的复选框控件下的所有节点的键值。

可选地，所述树形组件的指定属性包括props属性，将树形组件的指定属性设置为变量，得到受控组件，包括：

将树形组件的props属性中的selectedKeys设置为变量，得到受控组件。

可选地，所述基于请求方式从前端页面获取数据源，对所述数据源进行调整，得到树形数据对象，包括：

基于请求方式使用所述受控组件从提供数据源的服务器上获取用于前端页面展示用的数组格式的数据源，其中，所述指定请求方式包括Http请求方式；

遍历所述数据源使用相关函数将数据源中每一项对象数据的属性进行调整，得到树形数据对象。

可选地，遍历所述数据源使用相关函数将数据源中每一项对象数据的属性进行调整，包括：