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

权利要求书

1.一种基于树形组件的页面展示方法，其中，所述方法包括：

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

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

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

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

2.根据权利要求1所述的方法，其中，所述根据选中的节点所对应的键值重新计算关联选中的开关控件下的所有节点的键值以及关联选中的复选框控件下的所有节点的键值之前，还包括：

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

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

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

3.根据权利要求1所述的方法，其中，所述树形组件的指定属性包括props属性，将树形组件的指定属性设置为变量，得到受控组件，包括：

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

4.根据权利要求1所述的方法，其中，所述基于请求方式从前端页面获取数据源，对所述数据源进行调整，得到树形数据对象，包括：

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

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

5.根据权利要求4所述的方法，其中，遍历所述数据源使用相关函数将数据源中每一项对象数据的属性进行调整，包括：

使用父组件标题函数渲染每一项对象数据的标题属性，得到包含标题和开关控件的ReactNode节点；

根据数据源中的叶子节点渲染每一项对象数据的checkable属性；

根据数据源中的禁用复选框键数组是否包含单一节点的键为每一项对象数据生成disable属性；

通过遍历所述数据源为每一项对象数据添加层级属性来标识单一节点的层级。

6.根据权利要求1所述的方法，其中，所述根据所述树形数据对象对所述开关控件和复选框控件进行渲染，得到新的树形数据对象，包括：

根据所述树形数据对象将受控组件中的父节点对象渲染为标题和开关控件；

根据所述树形数据对象将受控组件中的叶子节点渲染为复选框控件和标题；

得到新的树形数据对象。

7.根据权利要求1所述的方法，其中，所述根据选中的节点所对应的键值重新计算关联选中的开关控件下的所有节点的键值以及关联选中的复选框控件下的所有节点的键值，包括：

获取前端页面上被选中的节点，根据所述选中的节点从所述新的树形数据对象中重新筛选出关联对应的目标节点；

判断所述目标节点是否为叶子节点，若是，则所述目标节点的键值即为复选框控件的键值；

若否，则所述目标节点的键值为开关控件的键值，并递归遍历所述目标节点下的所有子节点计算出所有子节点中的开关控件的键值和复选框控件的键值。