【重要】新版树结构和老版树结构对比

原来的思路:

1、分级数据,每一级的都单独一个对象;

2、然后遍历每个对象,组成树结构;

3、勾选时,直接操作dom。然后根据当前树中被勾选的来进行存储数据和渲染已选项目。

4、去除勾选时,操作同上。

5、删除和清空已选项目时,操作同上。

问题:如果加上搜索,搜索后,树结构中只有搜索结果,不存在之前已经勾选的大部分数据,这时,遍历树结构,就会删除之前已选数据。

现有思路:

1、创建类Region,类中包括属性(id,name,pId,type,status,children,parent)和方法(getId,getName,getParent,getChildren,addChildren等等)。

2、遍历所有数据,将所有数据都实例化为Region类型。并通过方法建立一个真正的树(不仅仅是形式上像)。

3、然后对数据进行遍历,来渲染树结构。

4、勾选时,改变节点的status。同时也去修改其父节点和子节点的status。改变状态的同时会改变树中的勾选按钮。

5、取消勾选,操作同上。

6、删除,操作同上。

7、清空时,直接将树中所有节点status置为false。

8、以上操作,只要status改变,就去遍历树的数据来找到状态为true的数据进行保存。并对保存的数据进行渲到已选项目中。而隐藏域中的值,只根据已选项目来进行保存。

支持搜索。问题点就是数据量大时,会有点卡顿,需要继续优化。

引入状态的概念。js不直接操作dom。只用来操作数据。

原文地址:https://www.cnblogs.com/yyumeng/p/8630346.html