前端数据映射

前端数据映射—>平铺

1.树形结构的映射

const data = [{
			id:1,
			name:'1',
			children:[
				{
					id:2,
					name:'1-1',
					children:[
						{
							id:3,
							name:"1-1-1"
						},
						{
							id:4,
							name:"1-1-2",
							children:[
								{
									id:5,
									name:"1-1-2-1"
								}
							]
						}
					]
				}
			]
		},
		{
			id:6,
			name:'2',
			children:[
				{
					id:7,
					name:'2-1',
					children:[
						{
							id:8,
							name:"2-1-1"
						},
						{
							id:9,
							name:"2-1-2"
						},
					]
				}
			]
		}

	]
	// 这里的主要工作就是数据平铺,以及加个索引,类似于后台数据库中的索引吧,方便快速查找
	const floatMap = (data)=>{
	  let key = 0;
	  const float = (data,parent)=>{
	    return data.reduce((obj,currentNode)=>{
	      currentNode.key = key;
	      obj[key] = {
	            parent,
	            node: currentNode
	        }
	      key ++ ;
	      if (currentNode.children) {
	        obj= {...obj,...float(currentNode.children,currentNode)}
	      }
	      return obj
	    },{})
	  }
	 return float(data);
	}
// 得出的结果大概就是 我们起个名字叫MappingData,
	MappingData = {
		0:{node:{id:1,name:'1',key:0,children:[xxxx]}},
		1:{node:{id:2,name:'1-1',key:1,children:[xxxx]}},
	}
// 此时源数据的每一个item上也会又一个key 属性


给这个Tree树添加checked,我们都知道一般的树组件都有这个功能,当选中父亲时,所有的儿子都要选中,当所有的儿子选中时,父亲也自动选中;

	// 当用户选择一个节点时,我们要有两个动作,
	// 一个是向下递归,选择它所有儿子节点,
	// 二是然后在向上递归,查看它是否(所在层)的儿子都是选中状态
	// 这里为什么是所在层呢,
	// 比如说:本层的children 里面的item项,如果item项里面所有的item子孙都是选中的,那么item也会自动选中,如果没有一箱没有选中,那item也就没有选中,所以父亲只需要判断自己的children是否都是选中状态即可
	1.先说向下递归 方法就叫checkDown吧,
	// 1.这里的item 项表示选中的某一项,2.checked表示当前是要选中还是不选中也就是true和false
	const checkDown = (item,checked)=>{
		//1.首先更改自己,给自己添加一个属性, 同样会使 MappingData 中的node 数据改变会增加key 属性
		item.checked = checked;

		if(item.children){
			item.children.forEach(i=>checkDown(i,checked))
		}
	}
	2.向上递归,这里就会用到我们的MappingData,映射后得到的数据
	// 1.这里的item 项表示选中的某一项,2.checked表示当前是要选中还是不选中也就是true和false
	const checkUp = (item,checked)=>{
		// 向上递归自然要找到父节点,如果快速找到父节点,这里就用到了MappingData,因为用它就不需要循环查找
		// MappingData数据结构例如:{0:{node:{},parent:{}}},这里的0 ,也就是item中的key;
		// 这样就找到了第一层级的父亲parent
		const parent = MappingData[item.key].parent
		//父亲是否需要选中,要看它下一层级的儿子是否都选中
		// 因为这里还需要找到父亲的父亲,还要继续网上查找,所以这里要用到递归
		if(checked ){
			parent.checked = parent.children.evey(i=>i.checked)
		}else{
			parent.checked = false
		}
		// 因为这里还需要找到父亲的父亲,还要继续网上查找,所以这里要用到递归
		
		checkUp(parent,checked)

	}

这里如果是vue 的话,就不需要管了,因为vue 是响应式的,会自动更新

如果是react 的还要setDate 一下,
因为react 更新数据要是一个全新的数据,这里我们可以使用:

this.setState({
	TreeDate:data.slice(0)
})
// 如果用的是hooks
setTreeData(data.slice(0))

这里的映射数据(并且铺平)还有一个什么好处呢,那就是只管获取数据
1.比如要我要拿到所有选中的节点,那要是没有映射表的话,那只能递归去寻找了
2.因为我们这里用到了平铺并且建立了索引
我们只需要


const checkedArray = Object.values(MappingData).map(i=>{
	return i.node.checked
})

很方便即可拿到我们所选中的数据
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页