material Tree组件父节点联动改造

先看效果图：

父节点联动的规则如下:

        第一种情况：全部子节点勾选，则父节点也勾选 即checked = true

        第二种情况：子节点全部取消勾选，则父节点取消勾选 即checked = false

        第三种情况：部分子节点勾选，则父节点也勾选 即checked = true

实现思路：

在之前的逻辑上 - 即点击某个节点 其子节点也全部自动勾选，

得到的一组数据之后，（不在之前的逻辑上直接设置关联的父节点，因为子节点是从上往下递归，而父节点需要至下而上的寻找）

单独写一个关联父节点的方法：

1.首先根据所勾选的节点，查找到它的全部父节点（可能父节点还有父节点所以需要递归）

两个参数，一个所勾选的节点（多个，单个），一个完整的tree数据

// 根据树子节点（单个，多个）寻找所有父节点
export const findParentNodes = (selected, tree) => {
  let spreadTreeData = setSpreadTreeData(tree, false, []);
  let parsentNodes = [];
  let deep = (parentId, parsentNodes) => {
    for (let tree of spreadTreeData) {
      if (tree.id == parentId) {
        parsentNodes.push(tree);
        if (tree.parentId) {
          deep(tree.parentId, parsentNodes);
        }
      }
    }
    return parsentNodes;
  };

  // autotemplate 组件传递的seleted是个array需要处理
  if (Array.isArray(selected)) {
    for (let selectedItem of selected) {
      parsentNodes = deep(selectedItem.parentId, parsentNodes);
    }
  } else {
    parsentNodes = deep(selected.parentId, parsentNodes);
  }

  return parsentNodes;
};

还需要一个平铺tree数据的方法：setSpreadTreeData

// 平铺tree
// 此函数的作用：拿到树结构后 进行树结构的渲染 同时需要把已经checked的数据 平铺到一层
// 主要是因为Autocomplete组件需要进行渲染 是个只有一层的array
// jugdeCheck 这个字段如果平铺不需要判断是否checked 就不需要传递
export const setSpreadTreeData = (tree, jugdeCheck, data = []) => {
  for (let i = 0; i < tree.length; i++) {
    let item = tree[i];
    if (jugdeCheck) {
      if (item.checked) {
        data.push(item);
      }
    } else {
      data.push(item);
    }
    item.children && setSpreadTreeData(item.children, jugdeCheck, data);
  }
  return data;
};

2.得到所勾选的子节点的全部父节点之后，再单独写一个方法，传递之前已经处理勾选逻辑的数据，

进行向上遍历。

// 根据所勾选的子节点 关联其父节点
export const cascaderParsent = (parsents, checked, tree) => {
  for (let i = 0; i < tree.length; i++) {
    let item = tree[i];
    for (let parsent of parsents) {
      // console.log('parsent::', parsent);
      if (parsent.id === item.id) {
        let { checkedNodes, activeNodeChildren } = setSpreadTreeDataCascader(
          parsent.children || []
        );
        // 第一种情况：全部子节点勾选，则父节点也勾选 即checked = true
        // 第二种情况：子节点全部取消勾选，则父节点取消勾选 即checked = false
        // 第三种情况：部分子节点勾选，则父节点也勾选 即checked = true
        // console.log('checkedNodes::', checkedNodes);
        // console.log('activeNodeChildren::', activeNodeChildren);
        if (checkedNodes.length === activeNodeChildren.length) {
          item.checked = true;
        } else if (checkedNodes.length === 0 && activeNodeChildren.length > 0) {
          item.checked = false;
        } else {
          item.checked = true;
        }
      }
    }

    if (item.children) {
      // 继续往子集找
      cascaderParsent(parsents, checked, item.children);
    }
  }

  return tree;
};

这里判断父节点是是勾选或者是不勾选的逻辑是根据：

1.父节点全部的子节点

2.父节点已激活的子节点

判断逻辑如下：

        第一种情况：全部子节点勾选，则父节点也勾选 即checked = true

        第二种情况：子节点全部取消勾选，则父节点取消勾选 即checked = false

        第三种情况：部分子节点勾选，则父节点也勾选 即checked = true

这里还有一个平铺的方法：setSpreadTreeDataCascader

也可以使用之前的setSpreadTreeData ，但是需要递归两次

像这样：

       // 全部节点 
     let activeNodeChildrenCount = setSpreadTreeData(node.children);
        //获取当前父节点当前所有激活的子节点
      let checkedNodes = setSpreadTreeData(node.children, true);

但是效率很低，理想的状态是一次递归就生成两种所需数据：

改造一下：

// tree联动平铺专用
export const setSpreadTreeDataCascader = (
  tree,
  checkedNodes = [], //已勾选的节点
  activeNodeChildren = [] //全部节点 - 包含已勾选和未勾选
) => {
  for (let i = 0; i < tree.length; i++) {
    let item = tree[i];
    if (item.checked) {
      checkedNodes.push(item);
    }
    activeNodeChildren.push(item);
    item.children &&
      setSpreadTreeDataCascader(
        item.children,
        checkedNodes,
        activeNodeChildren
      );
  }
  return { checkedNodes, activeNodeChildren };
};

然后取值就可以这样做了：

      let { checkedNodes, activeNodeChildren } = setSpreadTreeDataCascader(
        node.children || []
      );

然后就是material chekbox的ui

横杠的ui其实就是checkbox的indeterminate属性

判断就行即可(代码为递归的一部分，前置还有treeItem的自定义label):

判断ui的逻辑为：

       有子集的情况下：

       第一种情况：全部子节点勾选，则父节点也是勾选的样式1 即indeterminate = false

       第二种情况：子节点全部取消勾选，则父节点是勾选的样式1 即即indeterminate = false

       第三种情况：部分子节点勾选，则父节点是勾选的样式2 即indeterminate = true

    // 判断chekbox样式  - 优化方案
    let jugdeIndetermainte = (node) => {
      let { checkedNodes, activeNodeChildren } = setSpreadTreeDataCascader(
        node.children || []
      );
      // 有子集的情况下：
      // 第一种情况：全部子节点勾选，则父节点也是勾选的样式1 即indeterminate = false
      // 第二种情况：子节点全部取消勾选，则父节点是勾选的样式1 即即indeterminate = false
      // 第三种情况：部分子节点勾选，则父节点是勾选的样式2 即indeterminate = true
      // console.log('checkedNodes::', checkedNodes.length);
      // console.log('activeNodeChildren::', activeNodeChildren.length);
      if (
        checkedNodes.length === activeNodeChildren.length ||
        (checkedNodes.length === 0 && activeNodeChildren.length > 0)
      ) {
        return false;
      } else {
        return true;
      }
    };

    <Checkbox
          indeterminate={jugdeIndetermainte(node)}
          checked={node.checked}
          color="primary"
          onChange={(e) => {
          	//balabala
          }}
        />

然后没什么了

有疑问可以留言

拜拜 各位同学！