javascript通过递归改子节点数据-用于层级深度未知的树形结构
2024-08-22 19:33:54
最近在做这么个需求：树形结构，层级深度未知，一旦某个节点的状态是置灰的话，其所有子节点都要置灰。
方案一(数据库有值)：如果数据库里置灰节点的所有子节点，值也都是"置灰"，那后台取数据时就会拿到这个字段，前台直接用就可以；
方案二(后台手动赋值)：如果后台在构建JSON数据的时候，把置灰节点的所有子节点都手动添加这个字段，前台也可以直接用；
方案三(前台手动赋值)：如果后台接口返回给前台的出参里，置灰节点的子节点都没标这个字段值，只能前台手动添加。以Vue+ElementUI为例，代码如下：
<template>
<div class="mainPage">
<el-tree :data="dataDealwith" :props="defaultProps">
<span class="custom-tree-node" slot-scope="{ node, data }">
<span :class="data.statusIsIncorrect == 'yes' ? 'ccfont1' : ''">{{ node.label }}</span>
</span>
</el-tree>
</div>
</template>
<script>
export default {
computed: {
dataDealwith(){
var data = this.data;
function setGrayNode(data){ //遍历树 获取id数组
for(var i=0;i<data.length;i++){
if(data[i].statusIsIncorrect == 'yes'){// 如果某一个节点是禁用的，它的所有子节点都应该禁用
setChildrenGray(data[i].children)//子节点传给另一个函数专门用来改数据
continue;
} else {
if(data[i].children){// 如果当前节点有子节点，就递归调用一次
setGrayNode(data[i].children);
}
}
}
}
function setChildrenGray(data){
for(var n=0;n<data.length;n++){
data[n].statusIsIncorrect = 'yes';// 子节点先置灰
if(data[n].children && data[n].children.length > 0){
setChildrenGray(data[n].children)
}
}
}
setGrayNode(data)
return data;
}
},
data() {
return {
data: [
{
label: "一级 1",
id: "1",
children: [
{
label: "二级 1-1",
id: "1.1",
children: [
{
label: "三级 1-1-1",
id: "1.1.1"
}
]
}
]
},
{
label: "一级 2",
id: "2",
statusIsIncorrect: 'yes',
children: [
{
label: "二级 2-1",
id: "2.1",
children: [
{
label: "三级 2-1-1",
id: "2.1.1"
}
]
},
{
label: "二级 2-2",
id: "2.2",
children: [
{
label: "三级 2-2-1",
id: "2.2.1"
}
]
}
]
},
{
label: "一级 3",
id: "3",
children: [
{
label: "二级 3-1",
id: "3.1",
children: [
{
label: "三级 3-1-1",
id: "3.1.1"
}
]
},
{
label: "二级 3-2",
id: "3.2",
children: [
{
label: "三级 3-2-1",
id: "3.2.1"
}
]
}
]
}
],
defaultProps: {
children: "children",
label: "label"
},
};
},
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.mainPage {
padding: 20px;
color: #000;
.el-tree {
margin-top: 10px;
font-size: 18px;
.ccfont1 {color: #aaa;}
}
}
</style>
最新文章
- Fedora 22中的Locale and Keyboard Configuration
- java中集合类中Collection接口中的Map接口的常用方法熟悉
- vc++2013中使用MySQL connector/C++ 1.1.4静态链接报错
- SQL Server的Execute As与连接池结合使用的测试
- data and dream
- LwIP情景示例
- 如何利用jq来实现复选框的全选，反选！
- JavaScript在IE6,IE7下报错'expected identifier, string or number'
- WPF学习笔记1——XAML之1
- Nltest
- 网络基本功（八）：细说TCP滑动窗口
- IEnumerable中的 Any方法
- Git之detached HEAD
- 【转】 ubuntu12.04更新源 官网和163等
- MPAndroidChart绘制图形表
- gustafson,Sun-Ni,Amdahl
- git的使用,将本地项目push到github上
- 用.Net Core控制台模拟一个ASP.Net Core的管道模型
- 【git学习笔记】
- log4j直接输出日志到flume