[发明专利]一种可视化多级状态的筛选方法及装置

说明书

技术领域

本发明涉及web前端、可视化的技术领域，尤其涉及一种可视化多级状态的筛选方法，以及可视化多级状态的筛选装置。

背景技术

Treeview(筛选树)控件是用来显示数据的分级视图，如同windows中的资源管理器目录。支持远程数据绑定。对节点进行操作可以改变treeview的状态(例如，展开/收起，节点拖拽，排序，勾选等)。

treeview的应用场景，大致是将treeview作为一个多级筛选器，操作筛选器(例如，点选、勾选、拖拽、筛选等)，控制预览区数据状态。但是，预览区域数据状态不可同步至treeview。具体如下：

问题1：

如果点选treeview上节点，会发起一次ajax请求，刷新预览区数据，之前对预览区的操作(例如勾选)就会丢失。

问题2：

A.如果勾选treeview上节点，无法同步预览区子节点为全选状态。

B.如果勾选treeview上一级节点，反勾选预览区节点，无法同步treeview勾选状态。

C.如果全选预选区全部节点，无法同步treeview上对应父节点勾选状态。

发明内容

为克服现有技术的缺陷，本发明要解决的技术问题是提供了一种可视化多级状态的筛选方法，其可以实现预览区与筛选树的状态同步。

本发明的技术方案是：这种可视化多级状态的筛选方法，该方法包括以下步骤：

(1)初始化：获取数据；渲染DOM，并进行数据绑定；事件绑定；

(2)进行数据维护；

(3)进行多级可预览筛选操作。

本发明通过初始化，获取数据，渲染DOM，并进行数据绑定，事件绑定，进行数据维护，进行多级可预览筛选操作，从而可以实现预览区与筛选树的状态同步。

还提供了一种可视化多级状态的筛选装置，该装置包括：

初始化模块，其配置来获取数据；渲染DOM，并进行数据绑定；事件绑定；

维护模块，其配置来进行数据维护；

操作模块，其配置来进行多级可预览筛选操作。

附图说明

图1所示为根据本发明的可视化多级状态的筛选方法的流程图。

具体实施方式

如图1所示，这种可视化多级状态的筛选方法，该方法包括以下步骤：

(1)初始化：获取数据；渲染DOM，并进行数据绑定；事件绑定；

(2)进行数据维护；

(3)进行多级可预览筛选操作。

本发明通过初始化，获取数据，渲染DOM，并进行数据绑定，事件绑定，进行数据维护，进行多级可预览筛选操作，从而可以实现预览区与筛选树的状态同步。

另外，所述步骤(1)中，获取数据时，使用懒加载，初始化加载筛选树的一级节点。

另外，所述步骤(1)中，渲染DOM并进行数据绑定时，筛选树节点绑定code、name、level、hasChildren、hasCDom、spritClass。

另外，所述步骤(1)中，事件绑定时，使用事件委托，绑定事件至筛选器根节点。

另外，所述步骤(2)中，包括checked_tags字典和pre_sel_list字典；checked_tags字典以code为key，字典为value来存储该节点的数据；pre_sel_list字典以父节点的code为key，数组为value，数组中存储预览区勾选状态的节点数据对象。

另外，所述步骤(3)包括以下分步骤：

(3.1)点选筛选树上节点：节点的hasChildren属性，若为真，则该节点还有子节点，筛选树继续展开，否则只更新预览区；节点的hasCDom属性，若为真，则节点的子结构已加载至文档，不再进行ajax请求，只需为节点添加展开样式，否则先进行ajax请求，再为节点添加展开样式；pre_sel_list.code为空，预览区无需状态同步，否则同步预览区对应节点状态；

(3.2)勾选节点：调用状态同步函数及更新数据函数进行视图与数据刷新。

另外，该方法还包括步骤(4)，更新勾选数据(维护checkedTags及pre_sel_list)，遍历筛选树(findParent()、findChildren()、findSiblings()、findChecked()、findTagByCode()、findByText()等)，状态同步(勾选同步、点选同步等)，获取数据。