樹形結構的checkbox

在線體驗地址

const container = document.createElement("div");
const treeNodeTemplate = (key, label) => `<div id="${key}">
              <label>${label}</label>
              <input type="checkbox" />
              <ul class="children"></ul>
            </div>
            `;
const createTreeNodeFromKeyAndLabel = (key, label) => {
  const tmeplate = treeNodeTemplate(key, label);
  container.innerHTML = tmeplate;

  return container.children[0];
};

const effects = [];
const visited = new Set();
let flushed = false;

class TreeNode {
  elem = null;
  parent = null;
  children = [];
  data = null;
  effects = [];

  constructor(data) {
    this.data = data;
    const uninitialized = this.render(data);
    this.initEvent(uninitialized);
  }

  setCheckboxValue(node, val) {
    const checkbox = this.getCheckboxFromTreeElem(node.elem);
    node.data.checked = val;
    checkbox.checked = val;
  }

  setChildrenValueRecursively(newVal, needTrackSideEffect = false) {
    for (const child of this.children) {
      const elem = child.elem;

      this.setCheckboxValue(child, newVal);
      if (needTrackSideEffect) {
        visited.add(child);
      }
      child.setChildrenValueRecursively(newVal);
    }
  }

  getCheckboxFromTreeElem(elem) {
    return elem.children[1];
  }

  bubbleProperties(newVal) {
    if (!this.parent) return;

    if (newVal) {
      const needUpdate = this.parent.children.every((v) => {
        const checkbox = this.getCheckboxFromTreeElem(v.elem);

        return checkbox.checked;
      });

      if (needUpdate) {
        this.setCheckboxValue(this.parent, newVal);

        this.parent.bubbleProperties(newVal);
      }
    } else {
      this.setCheckboxValue(this.parent, newVal);
      this.parent.bubbleProperties(newVal);
    }
  }

  initEvent(uninitialized) {
    console.assert(!!this.elem, this);

    if (!uninitialized) return;

    const checkbox = this.getCheckboxFromTreeElem(this.elem);
    console.assert(checkbox.tagName === "INPUT", checkbox);

    checkbox.addEventListener("change", (e) => {
      if (e.target.checked) {
        //該節點被切換為true需要將他所有子節點全部置為true
        //并且如果他所在層級所在的節點全部都為true還需要向上冒泡

        //把子節點變為true
        this.setChildrenValueRecursively(true);

        //向上冒泡
        this.bubbleProperties(true);
      } else {
        //把子節點全部變為false
        this.setChildrenValueRecursively(false);

        //向上冒泡
        this.bubbleProperties(false);
      }
      this.data.checked = e.target.checked;
    });
  }

  render(data) {
    let elem = data.__elem;
    const { key, label, children, checked } = data;
    console.assert(!!(key && label), { key, label });
    let uninitialized = elem == null;

    if (checked === true) {
      effects.push(this);
    }

    if (!elem) {
      elem = createTreeNodeFromKeyAndLabel(key, label);
    }

    const childrenContainer = elem.querySelector(".children");

    data.__elem = elem;
    this.elem = elem;

    if (!children) return uninitialized;

    console.assert(Array.isArray(children), children);
    console.assert(!!childrenContainer, childrenContainer);

    for (const child of children) {
      const subTreeNode = new TreeNode(child);
      this.children.push(subTreeNode);
      subTreeNode.parent = this;
      childrenContainer.appendChild(subTreeNode.elem);
    }

    return uninitialized;
  }
}

const treeData = {
  key: "1",
  label: "1",
  children: [
    { key: "2", label: "2", children: [] },
    {
      key: "3",
      label: "3",
      checked: true,
      children: [
        { key: "5", label: "5" },
        { key: "6", label: "6" }
      ]
    },
    { key: "4", label: "4" },
    { key: "7", label: "7", checked: true }
  ]
};

/**
 * 將初始化抽離出來,以防止O(N^2)時間復雜度的初始化更新
 **/
const flushEffects = () => {
  for (let i = 0; i < effects.length; ++i) {
    const effect = effects[i];
    if (visited.has(effect)) continue;
    effect.setCheckboxValue(effect, true);
    visited.add(effect);
    effect.setChildrenValueRecursively(true, true);
  }

  effects.length = 0;
  visited.clear();
};

const renderTree = (data) => {
  const root = new TreeNode(data);
  flushEffects();
  return root;
};

const root = renderTree(treeData);
const app = document.getElementById("app");
app.appendChild(root.elem);
const button = document.getElementById("button");
button.onclick = () => {
  console.log(root.data);
};