使用 ztree.js 创建的树型组件

安装

npm i @programmermark/ztree

参数说明

id: 节点 id，唯一标识

pid: 父级节点 id，没有父节点时，该参数为 undefined

checked: checkbox 是否选中

open: 节点是否展开,

clickSelf: 为 true 时，点击事件只会选中自身； 为 false 时，点击事件会选中自身和子节点

除此之外，节点还可以自定义属性。具体请参看代码中的 typescript 注释。

代码示例

import React, { useState } from "react";
import "./App.css";
import { Tree, ITreeNode } from "@programmermark/ztree";

function App() {
  const [treeData, setTreeData] = useState<ITreeNode[]>([
    {
      id: "10000",
      pId: undefined,
      name: "湖北省",
      checked: true,
      open: false,
    },
    {
      id: "10001",
      pId: "10000",
      name: "武汉市",
      checked: true,
      open: true,
      clickSelf: true /** 为true时，点击事件只会选中自身 */,
    },
    {
      id: "10010",
      pId: "10001",
      name: "汉口",
      checked: true,
      open: true,
    },
    {
      id: "10011",
      pId: "10001",
      name: "武昌",
      checked: true,
      open: true,
    },
    {
      id: "10012",
      pId: "10001",
      name: "汉阳",
      checked: true,
      open: true,
    },
    {
      id: "10002",
      pId: "10000",
      name: "孝感市",
      checked: true,
      open: true,
    },
    {
      id: "10020",
      pId: "10002",
      name: "云梦",
      checked: true,
      open: true,
    },
    {
      id: "10021",
      pId: "10002",
      name: "大悟",
      checked: true,
      open: true,
    },
    {
      id: "10022",
      pId: "10002",
      name: "应城",
      checked: true,
      open: true,
    },
  ]);

  const handleUpdateExpandNode = (id: string, open: boolean) => {
    setTreeData((treeData) => {
      const newTreeData = treeData.map((node) => {
        if (node.id === id) {
          // 更新当前节点的展开状态
          return {
            ...node,
            open,
          };
        }
        return node;
      });
      return newTreeData;
    });
  };

  const handleUpdateNodes = (ids: string[], checked: boolean) => {
    setTreeData((treeData) => {
      const newTreeData = treeData.map((node) => {
        if (ids.includes(node.id)) {
          // 更新当前节点的选中状态
          return {
            ...node,
            checked,
          };
        }
        return node;
      });
      return newTreeData;
    });
  };

  return (
    <div className="App">
      <Tree
        nodes={treeData}
        updateExpandNode={handleUpdateExpandNode}
        updateNodes={handleUpdateNodes}
      />
    </div>
  );
}

export default App;