Tree 树形控件

Tree 树形控件

何时使用

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

代码演示

绑定数据源

绑定数据源。


import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, Tree } from 'choerodon-ui/pro';
function nodeRenderer({ record }) {
  return record.get('text');
}
class App extends React.Component {
  ds = new DataSet({
    primaryKey: 'id',
    queryUrl: '/tree.mock',
    autoQuery: true,
    parentField: 'parentId',
    expandField: 'expand',
    idField: 'id',
    fields: [
      { name: 'id', type: 'number' },
      { name: 'expand', type: 'boolean' },
      { name: 'parentId', type: 'number' },
    ],
    events: {
      select: ({ record, dataSet }) => console.log('select', record, dataSet),
      unSelect: ({ record, dataSet }) => console.log('unSelect', record, dataSet),
    },
  });
  render() {
    return (
      <Tree
        dataSet={this.ds}
        checkable
        renderer={nodeRenderer}
      />
    );
  }
}
ReactDOM.render(
  <App />,
  document.getElementById('container')

check和expand使用

expand 和 check 可以配合dataSet的使用方法


import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, Tree } from 'choerodon-ui/pro';
import { Row, Col } from 'choerodon-ui';
function nodeRenderer({ record }) {
  return record.get('text');
}
class App extends React.Component {
  ds = new DataSet({
    primaryKey: 'id',
    queryUrl: '/tree-less.mock',
    autoQuery: true,
    expandField: 'expand',
    checkField: 'ischecked',
    parentField: 'parentId',
    idField: 'id',
    fields: [
      { name: 'id', type: 'number' },
      { name: 'expand', type: 'boolean' },
      { name: 'parentId', type: 'number' },
    ],
    events: {
      select: ({ record, dataSet }) => console.log('select', record, dataSet),
      unSelect: ({ record, dataSet }) =>
        console.log('unSelect', record, dataSet),
    },
  });
  dsDefault = new DataSet({
    primaryKey: 'id',
    queryUrl: '/tree-less.mock',
    autoQuery: true,
    parentField: 'parentId',
    idField: 'id',
    fields: [
      { name: 'id', type: 'number' },
      { name: 'expand', type: 'boolean' },
      { name: 'parentId', type: 'number' },
    ],
    events: {
      select: ({ record, dataSet }) => console.log('select', record, dataSet),
      unSelect: ({ record, dataSet }) =>

只使用check功能

dataSet selection 为 false ， Tree checkable 为 true 可以实现整个treenode点击触发check 。注意：优先级高于record 里面的selectable


import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, Tree } from 'choerodon-ui/pro';
import { Row, Col } from 'choerodon-ui';
function nodeRenderer({ record }) {
  return record.get('text');
}
class App extends React.Component {
  ds = new DataSet({
    primaryKey: 'id',
    queryUrl: '/tree-less.mock',
    autoQuery: true,
    expandField: 'expand',
    selection: false,
    checkField: 'ischecked',
    parentField: 'parentId',
    idField: 'id',
    fields: [
      { name: 'id', type: 'number' },
      { name: 'expand', type: 'boolean' },
      { name: 'parentId', type: 'number' },
    ],
    events: {
      select: ({ record, dataSet }) => console.log('select', record, dataSet),
      unSelect: ({ record, dataSet }) =>
        console.log('unSelect', record, dataSet),
    },
  });
  render() {
    return (
      <>
        <Row>
          <Col span={12}>
            <Tree
              dataSet={this.ds}
              checkable
              draggable
              showIcon
              renderer={nodeRenderer}
            />

异步加载


import ReactDOM from 'react-dom';
import { DataSet, Tree } from 'choerodon-ui/pro';
import React, { useMemo } from 'react';
import axios from 'axios';
// 这里面可以控制node结点的判断来实现是否展示为叶结点
function nodeCover({ record }) {
  const nodeProps = {
    title: record.get('text'),
  };
  if (record.get('text') === '岗位管理') {
    nodeProps.isLeaf = true;
  }
  return nodeProps;
}
const TreeDs = () => ({
  primaryKey: 'id',
  queryUrl: '/tree-async.mock',
  autoQuery: true,
  parentField: 'parentId',
  expandField: 'expand',
  idField: 'id',
  fields: [
    { name: 'id', type: 'number' },
    { name: 'expand', type: 'boolean' },
    { name: 'parentId', type: 'number' },
  ],
  events: {
    select: ({ record, dataSet }) => console.log('select', record, dataSet),
    unSelect: ({ record, dataSet }) => console.log('unSelect', record, dataSet),
  },
});
const App = () => {
  const dataSet = useMemo(() => new DataSet(TreeDs()), []);

API

Tree props

参数	说明	类型	默认值
dataSet	绑定的数据源	DataSet
renderer	节点 title 渲染钩子，只在绑定数据源时起效	({ dataSet, record, text }) => ReactNode
defaultExpandAll	默认展开所有树节点当 dataSet 绑定 expandField 时候忽略	boolean	false
defaultExpandedKeys	默认展开指定的树节点当 dataSet 绑定 expandField 时候忽略	string[]	[]
defaultCheckedKeys	默认选中复选框的树节点当 dataSet 绑定 checkField 时候忽略	string[]	[]
defaultSelectKeys	默认选择节点当，默认绑定 dataSet 的 idField	string[]	[]
treeNodeRenderer	对于 Treenode 结点的渲染覆盖	(({ record, dataSet }) => TreeNodeRendererProps )	() => {}

TreeNodeRenderer Props

参数	说明	类型	默认值
checkable	当树为 checkable 时，设置独立节点是否展示 Checkbox	boolean
disableCheckbox	禁掉 checkbox	boolean	false
disabled	禁掉响应	boolean	false
icon	自定义图标。可接收组件，props 为当前节点 props	ReactNode/Function(props):ReactNode
isLeaf	设置为叶子节点(设置了`loadData`时有效)	boolean	false
title	标题	string\|ReactNode
switcherIcon	自定义树节点的展开/折叠图标	React.ReactNode	((props: TreeNodeProps) => React.ReactNode)
className	子节点类名	string
style	子节点样式	React.CSSProperties

DataSet 相关

参数	说明	类型	默认值
titleField	节点文字对应数据源的字段，只在绑定数据源时起效	string
selection	selection 为 false Tree checkable 为 true 可以实现整个 treenode 点击触发 check	string \| boolean

dataSet 数据形式采用打平的结构，并且存在有 Id 和 parentId 的结构

更多案例和属性请参考 Tree。

Tree树形控件