Tree 树形控件

如果项目中使用的是 1.x 版本的基础组件（@alifd/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @icedesign/base@latest -S

何时使用

文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用树控件可以完整展现其中的层级关系，并具有展开收起选择等交互功能。

API

树形控件

Tree.Node

代码示例

基本

最简单的用法，展示可展开，可选中，可勾选，可编辑，可右键，禁用，禁用勾选，默认展开，默认选中，默认勾选等功能。

查看源码在线预览

import { Tree } from "@icedesign/base";
const { Node: TreeNode } = Tree;
class Demo extends React.Component {
  onSelect(keys, info) {
    console.log("onSelect", keys, info);
  }
  onCheck(keys, info) {
    console.log("onCheck", keys, info);
  }
  onEditFinish(info) {
    console.log("onEditFinish", info);
  }
  onRightClick(info) {
    console.log("onRightClick", info);
  }
  render() {
    return (
      <Tree
        multiple
        checkable
        editable
        defaultExpandedKeys={["0-0-0", "0-0-1"]}
        defaultCheckedKeys={["0-0-0", "0-0-1"]}
        onSelect={this.onSelect}
        onCheck={this.onCheck}
        onEditFinish={this.onEditFinish}
        onRightClick={this.onRightClick}
      >
        <TreeNode label="parent 1" key="0-0">
          <TreeNode label="parent 1-0" key="0-0-0" disabled>
            <TreeNode label="leaf" key="0-0-0-0" disableCheckbox />
            <TreeNode label="leaf" key="0-0-0-1" />
          </TreeNode>
          <TreeNode label="parent 1-1" key="0-0-1">
            <TreeNode
              label={<span style={{ color: "#08c" }}>abc</span>}
              key="0-0-1-0"
            />
          </TreeNode>
        </TreeNode>
      </Tree>
    );
  }
}
ReactDOM.render(<Demo />, mountNode);

父子节点选中是否关联

展示父子节点选中是否关联的用法。

查看源码在线预览

import { Tree, Checkbox } from "@icedesign/base";
const { Node: TreeNode } = Tree;
const data = [
  {
    id: "0-0",
    children: [
      {
        id: "0-0-0",
        children: [
          {
            id: "0-0-0-0",
            children: [
              {
                id: "0-0-0-0-0"
              }
            ]
          },
          {
            id: "0-0-0-1"
          }
        ]
      },
      {
        id: "0-0-1",
        children: [
          {
            id: "0-0-1-0"
          },
          {
            id: "0-0-1-1"
          }
        ]
      }
    ]
  }
];
class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      checkedKeys: [],
      checkStrictly: false
    };
    this.handleCheck = this.handleCheck.bind(this);
    this.handleCheckStrictly = this.handleCheckStrictly.bind(this);
  }
  handleCheck(keys, info) {
    console.log(keys, info);
    this.setState({
      checkedKeys: keys
    });
  }
  handleCheckStrictly() {
    this.setState({
      checkStrictly: !this.state.checkStrictly,
      checkedKeys: []
    });
  }
  render() {
    const loop = data =>
      data.map(item => {
        return (
          <TreeNode label={item.id} key={item.id}>
            {item.children && item.children.length ? loop(item.children) : null}
          </TreeNode>
        );
      });
    const { checkedKeys, checkStrictly } = this.state;
    return (
      <div className="control-check-demo">
        <label className="strictly-check">
          <Checkbox value={checkStrictly} onChange={this.handleCheckStrictly} />
          <span className="strictly-text">
            开启严格受控，父子节点选中不再关联
          </span>
        </label>
        <Tree
          defaultExpandAll
          checkable
          checkStrictly={checkStrictly}
          checkedKeys={checkedKeys}
          onCheck={this.handleCheck}
        >
          {loop(data)}
        </Tree>
      </div>
    );
  }
}
ReactDOM.render(<Demo />, mountNode);

.control-check-demo .strictly-check {
    display: block;
    margin-bottom: 10px;
}
.control-check-demo .strictly-text {
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
    color: #666;
    font-size: 14px;
}

单选与多选

展示单选与多选的用法。

查看源码在线预览

import { Tree, Checkbox } from "@icedesign/base";
const { Node: TreeNode } = Tree;
const data = [
  {
    id: "0-0",
    children: [
      {
        id: "0-0-0",
        children: [
          {
            id: "0-0-0-0",
            children: [
              {
                id: "0-0-0-0-0"
              }
            ]
          },
          {
            id: "0-0-0-1"
          }
        ]
      },
      {
        id: "0-0-1",
        children: [
          {
            id: "0-0-1-0"
          },
          {
            id: "0-0-1-1"
          }
        ]
      }
    ]
  }
];
class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedKeys: [],
      multiple: false
    };
    this.handleSelect = this.handleSelect.bind(this);
    this.handleCheck = this.handleCheck.bind(this);
  }
  handleSelect(keys, info) {
    console.log(keys, info);
    this.setState({
      selectedKeys: keys
    });
  }
  handleCheck() {
    this.setState({
      multiple: !this.state.multiple,
      selectedKeys: []
    });
  }
  render() {
    const loop = data =>
      data.map(item => {
        return (
          <TreeNode label={item.id} key={item.id}>
            {item.children && item.children.length ? loop(item.children) : null}
          </TreeNode>
        );
      });
    const { multiple, selectedKeys } = this.state;
    return (
      <div className="control-select-demo">
        <label className="multiple-check">
          <Checkbox value={multiple} onChange={this.handleCheck} />
          <span className="multiple-text">开启多选</span>
        </label>
        <Tree
          defaultExpandAll
          multiple={multiple}
          selectedKeys={selectedKeys}
          onSelect={this.handleSelect}
        >
          {loop(data)}
        </Tree>
      </div>
    );
  }
}
ReactDOM.render(<Demo />, mountNode);

.control-select-demo .multiple-check {
    display: block;
    margin-bottom: 10px;
}
.control-select-demo .multiple-text {
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
    color: #666;
    font-size: 14px;
}

拖动

将节点拖拽到其他节点内部或前后。

查看源码在线预览

import { Tree } from "@icedesign/base";
const { Node: TreeNode } = Tree;
const x = 3;
const y = 2;
const z = 1;
const gData = [];
const generateData = (_level, _preKey, _tns) => {
  const preKey = _preKey || "0";
  const tns = _tns || gData;
  const children = [];
  for (let i = 0; i < x; i++) {
    const key = `${preKey}-${i}`;
    tns.push({ label: key, key });
    if (i < y) {
      children.push(key);
    }
  }
  if (_level < 0) {
    return tns;
  }
  const level = _level - 1;
  children.forEach((key, index) => {
    tns[index].children = [];
    return generateData(level, key, tns[index].children);
  });
};
generateData(z);
class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      gData,
      expandedKeys: ["0-0", "0-0-0", "0-0-0-0"]
    };
  }
  // eslint-disable-next-line
  onDragEnter(info) {
    // expandedKeys 需要受控时设置
    // this.setState({
    //   expandedKeys: info.expandedKeys,
    // });
  }
  onDrop(info) {
    const dragKey = info.dragNode.props.eventKey;
    const dropKey = info.node.props.eventKey;
    const dropPos = info.node.props.pos.split("-");
    // 通过info.node.props.pos计算得到的dropPos为-1则为拖动到节点之上，1则为拖动到节点之下
    const dropPosition =
      info.dropPosition - Number(dropPos[dropPos.length - 1]);
    const loop = (data, key, callback) => {
      data.forEach((item, index, arr) => {
        if (item.key === key) {
          return callback(item, index, arr);
        }
        if (item.children) {
          return loop(item.children, key, callback);
        }
      });
    };
    const data = [...this.state.gData];
    let dragObj;
    loop(data, dragKey, (item, index, arr) => {
      arr.splice(index, 1);
      dragObj = item;
    });
    // dropToGap为true 则拖动到节点内部
    if (info.dropToGap) {
      let ar;
      let i;
      loop(data, dropKey, (item, index, arr) => {
        ar = arr;
        i = index;
      });
      if (dropPosition === -1) {
        ar.splice(i, 0, dragObj);
      } else {
        ar.splice(i + 1, 0, dragObj);
      }
    } else {
      loop(data, dropKey, item => {
        item.children = item.children || [];
        // where to insert 示例添加到尾部，可以是随意位置
        item.children.push(dragObj);
      });
    }
    this.setState({
      gData: data
    });
  }
  render() {
    const loop = data =>
      data.map(item => {
        if (item.children) {
          return (
            <TreeNode key={item.key} label={item.key}>
              {loop(item.children)}
            </TreeNode>
          );
        }
        return <TreeNode key={item.key} label={item.key} />;
      });
    return (
      <Tree
        defaultExpandedKeys={this.state.expandedKeys}
        draggable
        selectable={false}
        onDragEnter={this.onDragEnter.bind(this)}
        onDrop={this.onDrop.bind(this)}
      >
        {loop(this.state.gData)}
      </Tree>
    );
  }
}
ReactDOM.render(<Demo />, mountNode);

异步加载数据

点击展开节点，动态加载数据。

查看源码在线预览

import { Tree } from "@icedesign/base";
const { Node: TreeNode } = Tree;
function generateTreeNodes(treeNode) {
  const arr = [];
  const key = treeNode.props.eventKey;
  for (let i = 0; i < 3; i++) {
    arr.push({ name: `leaf ${key}-${i}`, key: `${key}-${i}` });
  }
  return arr;
}
function setLeaf(treeData, curKey, level) {
  const loopLeaf = (data, lev) => {
    const l = lev - 1;
    data.forEach(item => {
      if (
        item.key.length > curKey.length
          ? item.key.indexOf(curKey) !== 0
          : curKey.indexOf(item.key) !== 0
      ) {
        return;
      }
      if (item.children) {
        loopLeaf(item.children, l);
      } else if (l < 1) {
        item.isLeaf = true;
      }
    });
  };
  loopLeaf(treeData, level + 1);
}
function getNewTreeData(treeData, curKey, child, level) {
  const loop = data => {
    if (level < 1 || curKey.length - 3 > level * 2) {
      return;
    }
    data.forEach(item => {
      if (curKey.indexOf(item.key) === 0) {
        if (item.children) {
          loop(item.children);
        } else {
          item.children = child;
        }
      }
    });
  };
  loop(treeData);
  setLeaf(treeData, curKey, level);
}
class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      treeData: []
    };
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({
        treeData: [
          { name: "pNode 01", key: "0-0" },
          { name: "pNode 02", key: "0-1" },
          { name: "pNode 03", key: "0-2", isLeaf: true }
        ]
      });
    }, 100);
  }
  onSelect(info) {
    console.log("selected", info);
  }
  onLoadData(treeNode) {
    return new Promise(resolve => {
      setTimeout(() => {
        const treeData = [...this.state.treeData];
        getNewTreeData(
          treeData,
          treeNode.props.eventKey,
          generateTreeNodes(treeNode),
          2
        );
        this.setState({ treeData });
        resolve();
      }, 500);
    });
  }
  render() {
    const loop = data =>
      data.map(item => {
        if (item.children) {
          return (
            <TreeNode label={item.name} key={item.key}>
              {loop(item.children)}
            </TreeNode>
          );
        }
        return (
          <TreeNode
            label={item.name}
            key={item.key}
            isLeaf={item.isLeaf}
            disabled={item.key === "0-0-0"}
          />
        );
      });
    const treeNodes = loop(this.state.treeData);
    return (
      <Tree
        onSelect={this.onSelect.bind(this)}
        loadData={this.onLoadData.bind(this)}
      >
        {treeNodes}
      </Tree>
    );
  }
}
ReactDOM.render(<Demo />, mountNode);

带线样式

展示Tree组件带线的样式外观。

查看源码在线预览

import { Tree } from "@icedesign/base";
const { Node: TreeNode } = Tree;
ReactDOM.render(
  <Tree defaultExpandAll showLine>
    <TreeNode label="Trunk">
      <TreeNode label="Branch">
        <TreeNode label="Branch">
          <TreeNode label="Leaf" />
        </TreeNode>
        <TreeNode label="Leaf" />
      </TreeNode>
      <TreeNode label="Branch">
        <TreeNode label="Leaf" />
        <TreeNode label="Leaf" />
      </TreeNode>
    </TreeNode>
  </Tree>,
  mountNode
);

可搜索的树

展示可搜索的树。

查看源码在线预览

import { Tree, Search } from "@icedesign/base";
const { Node: TreeNode } = Tree;
const data = [
  {
    id: "0-0",
    children: [
      {
        id: "0-0-0",
        children: [
          {
            id: "0-0-0-0",
            children: [
              {
                id: "0-0-0-0-0"
              }
            ]
          },
          {
            id: "0-0-0-1"
          }
        ]
      },
      {
        id: "0-0-1",
        children: [
          {
            id: "0-0-1-0"
          },
          {
            id: "0-0-1-1"
          }
        ]
      }
    ]
  }
];
class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "",
      expandedKeys: ["0-0"],
      autoExpandParent: true
    };
    this.matchedKeys = [];
    this.handleSearch = this.handleSearch.bind(this);
    this.handleExpand = this.handleExpand.bind(this);
  }
  handleSearch(result) {
    const value = result.key;
    const matchedKeys = [];
    const loop = data =>
      data.forEach(item => {
        if (item.id.indexOf(value.trim()) > -1) {
          matchedKeys.push(item.id);
        }
        if (item.children && item.children.length) {
          loop(item.children);
        }
      });
    loop(data);
    this.setState({
      value: result.key,
      expandedKeys: matchedKeys,
      autoExpandParent: true
    });
    this.matchedKeys = matchedKeys;
  }
  handleExpand(keys) {
    this.setState({
      expandedKeys: keys,
      autoExpandParent: false
    });
  }
  render() {
    const loop = data =>
      data.map(item => {
        return (
          <TreeNode label={item.id} key={item.id}>
            {item.children && loop(item.children)}
          </TreeNode>
        );
      });
    const { value, expandedKeys, autoExpandParent } = this.state;
    const filterTreeNode = node =>
      value && this.matchedKeys.indexOf(node.props.eventKey) > -1;
    return (
      <div>
        <Search
          type="normal"
          size="medium"
          searchText=""
          value={value}
          onSearch={this.handleSearch}
        />
        <Tree
          expandedKeys={expandedKeys}
          autoExpandParent={autoExpandParent}
          filterTreeNode={filterTreeNode}
          onExpand={this.handleExpand}
        >
          {loop(data)}
        </Tree>
      </div>
    );
  }
}
ReactDOM.render(<Demo />, mountNode);

相关区块

暂无相关区块