树结构插件思路

一个对象。
region = [
{
id:10000,
name:"china",
type:1,
level:1,
pId:0,
status:false,
children:[
{
id:100001
name:'安徽省',
type:1,
level:2,
pId:10000,
status:false,
children:[
{
id:1000011
name:'合肥市',
type:1,
level:3,
pId:100001,
children:[
id:10000111
name:'蜀山区',
type:1,
level:4,
pId:1000011,
status:false
]
}
]
},
]
}
]
1、点击勾选或者取消勾选时,然后将此id传入changeStatus方法,改变状态,然后重新渲染树,
2、存在老数据时,需要根据老数据来修改region中的数据的status。老数据有两种,页面编辑时,和搜索时
3、对已选项目中点击删除时。需要将id传入changeStatus。改变状态,然后重新渲染树。
4、需要根据changeStatus函数处理之后的数据进行渲染树结构。
changeStatus:只用来修改每一项是否选中。其中包括修改其子元素的状态和父元素的状态和祖父元素的状态
其中包括查找其父元素,祖父元素。子元素和孙子元素。
每一次已选项目中的展示,都根据传过去的data进行变化。
类似于模板。
js不直接操作dom。只操作数据。而界面中树节点的是否选中,是根据 数据data中各个节点的status来决定。

这里重新渲染树,只有第一次进入是整体渲染树结构,其余,只要根据id寻找树,并修改状态即可。(虽然也操作了dom.但若是小数据量的修改,效率高。事实是否如此,待定)

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