原来的思路:
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。只用来操作数据。