iview手风琴树算法 • w00d1f

设置外部变量 lastNode 保存上次节点（若 lastNode 为 null 则什么都不做）以判断父子关系

依据父子关系：

若点击自身或子树，不操作。若点击父树，则折叠所有子树。若点击父树的兄弟树，则折叠与兄弟树同级的所有其他父树

如果 lastNode 和 currentNode 在同一树分支中，父树的 nodeKey 一定比子树小，遍历 nodeKey 小的树，来确定 lastNode 和 currentNode 是父子树关系，还是兄弟树关系

若确定 currentNode 是 lastNode 的兄弟树。则查找 currentNode 与 lastNode 的公共父树。（由于 accordion 模式，若是兄弟树关系则 currentNode 一定是 lastNode 父树的兄弟树，因此 currentNode 的父树也是 lastNode 的父树，是双方的公共父树）

用到的函数：查找兄弟树父树、折叠除当前节点外，当前节点父树下所有的结点、判断树关系、递归查找是否为子节点

/*
 * 传入当前点击的树节点与整个树的数据
 * 修改树的数据以实现手风琴树
 */
let lastNode = null;
function toggleMenuTreeOrigin(currentNode, treeData) {
  /*
   * 根据节点nodeKey的大小传入两个节点
   * 判断第二个节点是否为第一个节点的子节点
   */
  function isChild(parent, child) {
    // 遍历判断第二个节点的nodeKey是否与第一个节点的子节点相同，若相同则返回true，否则判断第一个节点的子节点是否还有子节点，若无则返回false，若有则递归判断。
    return parent.children.some((item) =>
      item.nodeKey === child.nodeKey
        ? (() => {
            return true;
          })()
        : (() => (item.children ? isChild(item, child) : false))(),
    );
  }
  /*
   * 传入当前点击节点与上次点击节点
   * 判断当前点击节点与上次点击节点是相同节点、父节点、子节点还是兄弟节点关系
   */
  function treeRelationship(currentNode, lastNode) {
    // 若当前节点nodeKey与上次点击节点nodeKey相同，则返回"same"，若当前节点nodeKey大于上次节点nodeKey，根据iview生成nodeKey的规律，当前节点只可能是上次节点的子节点或兄弟节点，若当前节点nodeKey小于上次节点nodeKey，则当前节点只可能是上次节点的父节点或兄弟节点，使用isChild方法判断是否父子节点，根据判断结果返回"parent"、"child"、"brother"
    if (currentNode.nodeKey === lastNode.nodeKey) {
      return "same";
    } else if (currentNode.nodeKey > lastNode.nodeKey) {
      return isChild(lastNode, currentNode) ? "child" : "brother";
    } else {
      return isChild(currentNode, lastNode) ? "parent" : "brother";
    }
  }
  /*
   * 传入树数据和当前节点
   * 返回当前节点的父节点
   */
  function findParent(treeData, currentNode) {
    // 最终父节点
    let finalParentNode = null;
    /*
     * 传入树数据，当前点击节点、与此时遍历节点的父节点
     * 将最终父节点赋值为当前点击节点的父节点
     */
    function findParentInner(treeData, currentNode, parentNode) {
      // 内部查找函数，若当前节点nodeKey与遍历节点nodeKey相同时，则此时的parentNode为要找的最终父节点，否则判断遍历节点是否存在子节点，若存在则递归执行函数，若不存在则什么都不做
      treeData.forEach((item) =>
        item.nodeKey === currentNode.nodeKey
          ? (() => {
              finalParentNode = parentNode;
            })()
          : (() => {
              item.children
                ? findParentInner(item.children, currentNode, item)
                : "";
            })(),
      );
    }
    // 执行内部函数
    findParentInner(treeData, currentNode, finalParentNode);
    return finalParentNode;
  }
  /*
   * 传入树数据，当前点击节点
   * 折叠树
   */
  function collapseTree(treeData, currentNode) {
    treeData.forEach((item) => {
      // 若遍历节点为折叠则什么都不做，若为展开则判断遍历节点与当前节点nodeKey是否相同，若相同则什么都不做，否则设为折叠
      item.expand
        ? (() => {
            item.nodeKey === currentNode.nodeKey ? "" : (item.expand = false);
          })()
        : (() => {})();
      // 若遍历节点存在子节点则递归此函数，否则什么都不做
      item.children ? collapseTree(item.children, currentNode) : "";
    });
  }
  // 若上次点击节点为空则什么都不做，否则判断当前点击节点与上次点击节点关系，若为相同或子节点，则什么都不做；若为父节点，则折叠当前节点所有子节点；若为兄弟节点，则找到当前节点父节点，若父节点为空则说明点击了根节点，折叠整个树，否则折叠父节点的所有子节点
  lastNode === null
    ? (() => {})()
    : (() => {
        let parentNode;
        switch (treeRelationship(currentNode, lastNode)) {
          case "same":
          case "child":
            break;
          case "parent":
            collapseTree(currentNode.children, currentNode);
            break;
          case "brother":
            parentNode = findParent(treeData, currentNode);
            parentNode === null
              ? collapseTree(treeData, currentNode)
              : collapseTree(parentNode.children, currentNode);
            break;
        }
      })();
  // 将上次点击节点赋值为本次点击节点
  lastNode = currentNode;
}

前方高能预警

以上全是Bullshit，算法冗余太多。

最终精简算法

无需判断父子关系，直接找到当前点击节点 currentNode 的父节点 parrentNode，折叠除当前节点 currentNode 外，父节点 parentNode 下所有子节点。

用到的函数：查找父结点，折叠除父节点外所有子节点

/*
 * iview手风琴树（每次只展开一个树节点）
 * 传入当前节点与树数据（类型Array）
 */
export const accordionTree = (currentNode, treeData) => {
  /*
   * 传入树数据和当前节点
   * 返回当前节点的父节点
   */
  function findParent(treeData, currentNode) {
    // 声明最终父节点
    let finalParentNode = null;
    /*
     * 传入树数据，当前点击节点、与此时遍历节点的父节点
     * 将最终父节点赋值为当前点击节点的父节点
     */
    function findParentInner(treeData, currentNode, parentNode) {
      // 内部查找函数，若当前节点nodeKey与遍历节点nodeKey相同时，则此时的parentNode为要找的最终父节点，否则判断遍历节点是否存在子节点，若存在则递归执行函数，若不存在则什么都不做
      treeData.forEach((item) =>
        item.nodeKey === currentNode.nodeKey
          ? (() => {
              finalParentNode = parentNode;
            })()
          : (() => {
              item.children
                ? findParentInner(item.children, currentNode, item)
                : "";
            })(),
      );
    }
    // 执行内部函数
    findParentInner(treeData, currentNode, finalParentNode);
    return finalParentNode;
  }
  /*
   * 传入树数据，当前点击节点
   * 折叠树
   */
  function collapseTree(treeData, currentNode) {
    treeData.forEach((item) => {
      // 若遍历节点为折叠则什么都不做，若为展开则判断遍历节点与当前节点nodeKey是否相同，若相同则什么都不做，否则设为折叠
      item.expand
        ? (() => {
            item.nodeKey === currentNode.nodeKey ? "" : (item.expand = false);
          })()
        : (() => {})();
      // 若遍历节点存在子节点则递归此函数，否则什么都不做
      item.children ? collapseTree(item.children, currentNode) : "";
    });
  }
  // 找到当前点击节点的父节点
  let parentNode = findParent(treeData, currentNode);
  // 折叠树，若父节点为null，则为根节点，传入所有树数据（根节点）；若不为null，则传入父节点的子节点
  parentNode === null
    ? collapseTree(treeData, currentNode)
    : collapseTree(parentNode.children, currentNode);
};