javascript通過遞歸改子節點數據-用於層級深度未知的樹形結構

最近在做這麼個需求：樹形結構，層級深度未知，一旦某個節點的狀態是置灰的話，其所有子節點都要置灰。

方案一(資料庫有值)：如果資料庫里置灰節點的所有子節點，值也都是"置灰"，那後台取數據時就會拿到這個欄位，前台直接用就可以；

方案二(後台手動賦值)：如果後台在構建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>

 

Tags:

VirMach 便宜 VPS