Tree 树形控件

如果项目中使用的是 0.x 版本的基础组件（@icedesign/base, @ali/ice, @alife/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @alifd/next@latest -S

开发指南

何时使用

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

API

Tree

Tree.Node

代码示例

基本

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

查看源码在线预览

import { Tree } from '@alifd/next';
const TreeNode = Tree.Node;
class Demo extends React.Component {
    onSelect(keys, info) {
        console.log('onSelect', keys, info);
    }
    onCheck(keys, info) {
        console.log('onCheck', keys, info);
    }
    onEditFinish(key, label, node) {
        console.log('onEditFinish', key, label, node);
    }
    onRightClick(info) {
        console.log('onRightClick', info);
    }
    render() {
        return (
            <Tree checkable editable
                defaultExpandedKeys={['2']}
                defaultCheckedKeys={['2', '4', '5']}
                onSelect={this.onSelect}
                onCheck={this.onCheck}
                onEditFinish={this.onEditFinish}
                onRightClick={this.onRightClick}>
                <TreeNode key="1" label="Component">
                    <TreeNode key="2" label="Form" selectable={false}>
                        <TreeNode key="4" label="Input" />
                        <TreeNode key="5" label="Select" disabled />
                    </TreeNode>
                    <TreeNode key="3" label="Display">
                        <TreeNode key="6" label="Table" />
                    </TreeNode>
                </TreeNode>
            </Tree>
        );
    }
}
ReactDOM.render(<Demo />, mountNode);

使用数据直接生成

使用 dataSource 生成树结构，除设置 key, label, children 属性外，还可传入 TreeNode 的其他属性，包括 selectable，disabled，checkable, checkboxDisabled, isLeaf 等。

查看源码在线预览

import { Tree } from '@alifd/next';
const data = [{
    label: 'Component',
    key: '1',
    children: [{
        label: 'Form',
        key: '2',
        selectable: false,
        children: [{
            label: 'Input',
            key: '4'
        }, {
            label: 'Select',
            key: '5',
            disabled: true
        }]
    }, {
        label: 'Display',
        key: '3',
        children: [{
            label: 'Table',
            key: '6'
        }]
    }]
}];
class Demo extends React.Component {
    onSelect(keys, info) {
        console.log('onSelect', keys, info);
    }
    onCheck(keys, info) {
        console.log('onCheck', keys, info);
    }
    onEditFinish(key, label, node) {
        console.log('onEditFinish', key, label, node);
    }
    onRightClick(info) {
        console.log('onRightClick', info);
    }
    render() {
        return (
            <Tree checkable editable
                defaultExpandedKeys={['2']}
                defaultCheckedKeys={['2', '4', '5']}
                onSelect={this.onSelect}
                onCheck={this.onCheck}
                onEditFinish={this.onEditFinish}
                onRightClick={this.onRightClick}
                dataSource={data} />
        );
    }
}
ReactDOM.render(<Demo />, mountNode);

带线样式

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

查看源码在线预览

import { Tree } from '@alifd/next';
const TreeNode = Tree.Node;
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);

树节点占满一行

可以通过设置 isNodeBlock 为 true，来让树节点占满一行，isNodeBlock 也可传入一个对象，支持设置 defaultPaddingLeft（默认的左内边距）和 indent （缩进距离），另外注意 showLine 在开启 isNodeBlock 时失效。

查看源码在线预览

import { Tree } from '@alifd/next';
const TreeNode = Tree.Node;
ReactDOM.render(
    <Tree defaultExpandAll isNodeBlock={{ defaultPaddingLeft: 50 }} defaultSelectedKeys={['1']} style={{ width: '300px' }}>
        <TreeNode label="Component" key="0">
            <TreeNode label="Form" key="1" disabled>
                <TreeNode label="Select" key="2">
                    <TreeNode label="TreeSelect" key="3" />
                </TreeNode>
                <TreeNode label="Input" key="4" />
            </TreeNode>
            <TreeNode label="Display" key="5">
                <TreeNode label="Card" key="6" />
                <TreeNode label="Table" key="7" />
            </TreeNode>
        </TreeNode>
    </Tree>, mountNode);

单选与多选

展示单选与多选的用法。

查看源码在线预览

import { Checkbox, Tree } from '@alifd/next';
const data = [{
    key: '0-0',
    label: '0-0',
    children: [{
        key: '0-0-0',
        label: '0-0-0',
        children: [{
            key: '0-0-0-0',
            label: '0-0-0-0',
            children: [{
                key: '0-0-0-0-0',
                label: '0-0-0-0-0'
            }]
        }, {
            key: '0-0-0-1',
            label: '0-0-0-1'
        }]
    }, {
        key: '0-0-1',
        label: '0-0-1',
        children: [{
            key: '0-0-1-0',
            label: '0-0-1-0'
        }, {
            key: '0-0-1-1',
            label: '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 { multiple, selectedKeys } = this.state;
        return (
            <div className="control-select-demo">
                <label className="multiple-check">
                    <Checkbox value={multiple} onChange={this.handleCheck} />
                    <span className="multiple-text">Enable multiple</span>
                </label>
                <Tree defaultExpandAll multiple={multiple} selectedKeys={selectedKeys} onSelect={this.handleSelect} dataSource={data} />
            </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 { Checkbox, Tree } from '@alifd/next';
const data = [{
    key: '0-0',
    label: '0-0',
    children: [{
        key: '0-0-0',
        label: '0-0-0',
        children: [{
            key: '0-0-0-0',
            label: '0-0-0-0',
            children: [{
                key: '0-0-0-0-0',
                label: '0-0-0-0-0'
            }]
        }, {
            key: '0-0-0-1',
            label: '0-0-0-1'
        }]
    }, {
        key: '0-0-1',
        label: '0-0-1',
        children: [{
            key: '0-0-1-0',
            label: '0-0-1-0'
        }, {
            key: '0-0-1-1',
            label: '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 { checkedKeys, checkStrictly } = this.state;
        return (
            <div className="control-check-demo">
                <label className="strictly-check">
                    <Checkbox value={checkStrictly} onChange={this.handleCheckStrictly} />
                    <span className="strictly-text">Enable checkStrictly</span>
                </label>
                <Tree defaultExpandAll checkable checkStrictly={checkStrictly} checkedKeys={checkedKeys} onCheck={this.handleCheck} dataSource={data} />
            </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 { Search, Tree } from '@alifd/next';
const data = [{
    label: 'Component',
    key: '1',
    children: [{
        label: 'Form',
        key: '2',
        children: [{
            label: 'Input',
            key: '4'
        }, {
            label: 'Select',
            key: '5'
        }]
    }, {
        label: 'Display',
        key: '3',
        children: [{
            label: 'Table',
            key: '6'
        }]
    }]
}];
class Demo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            expandedKeys: ['2'],
            autoExpandParent: true
        };
        this.matchedKeys = [];
        this.handleSearch = this.handleSearch.bind(this);
        this.handleExpand = this.handleExpand.bind(this);
    }
    handleSearch(value) {
        value = value.trim();
        if (!value) {
            this.matchedKeys = null;
            return;
        }
        const matchedKeys = [];
        const loop = data => data.forEach(item => {
            if (item.label.indexOf(value) > -1) {
                matchedKeys.push(item.key);
            }
            if (item.children && item.children.length) {
                loop(item.children);
            }
        });
        loop(data);
        this.setState({
            expandedKeys: [...matchedKeys],
            autoExpandParent: true
        });
        this.matchedKeys = matchedKeys;
    }
    handleExpand(keys) {
        this.setState({
            expandedKeys: keys,
            autoExpandParent: false
        });
    }
    render() {
        const { expandedKeys, autoExpandParent } = this.state;
        const filterTreeNode = node => {
            return this.matchedKeys && this.matchedKeys.indexOf(node.props.eventKey) > -1;
        };
        return (
            <div>
                <Search shape="simple" size="medium" style={{ width: '200px', marginBottom: '10px' }} onChange={this.handleSearch} />
                <Tree expandedKeys={expandedKeys} autoExpandParent={autoExpandParent} filterTreeNode={filterTreeNode} onExpand={this.handleExpand} dataSource={data} />
            </div>
        );
    }
}
ReactDOM.render(<Demo />, mountNode);

异步加载数据

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

查看源码在线预览

import { Tree } from '@alifd/next';
class Demo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [
                { label: 'Expand to load', key: '0' },
                { label: 'Expand to load', key: '1' },
                { label: 'Leaf', key: '2', isLeaf: true }
            ]
        };
        this.onLoadData = this.onLoadData.bind(this);
    }
    onLoadData(node) {
        return new Promise(resolve => {
            if (node.props.children) {
                return resolve();
            }
            const { eventKey, pos } = node.props;
            const item = this.getItemByPos(pos);
            setTimeout(() => {
                item.children = [
                    { label: 'Child Tree', key: `${eventKey}-0` },
                    { label: 'Child Tree', key: `${eventKey}-1` }
                ];
                this.setState({
                    data: [...this.state.data]
                });
                resolve();
            }, 1000);
        });
    }
    getItemByPos(pos) {
        return pos.split('-').slice(1).reduce((ret, num) => ret.children[num], { children: this.state.data });
    }
    render() {
        return (
            <Tree dataSource={this.state.data} loadData={this.onLoadData} />
        );
    }
}
ReactDOM.render(<Demo />, mountNode);

拖动

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

查看源码在线预览

import { Tree } from '@alifd/next';
const TreeNode = Tree.Node;
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
        };
    }
    onDrop(info) {
        if (!info.dragNode) {
            return;
        }
        const dragKey = info.dragNode.props.eventKey;
        const dropKey = info.node.props.eventKey;
        const dropPosition = info.dropPosition;
        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;
        });
        if (info.dropPosition === 0) {
            loop(data, dropKey, (item) => {
                item.children = item.children || [];
                item.children.push(dragObj);
            });
        } else {
            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);
            }
        }
        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 draggable selectable={false} isLabelBlock defaultExpandedKeys={['0-0', '0-0-0', '0-0-0-0']} onDrop={this.onDrop.bind(this)}>
                {loop(this.state.gData)}
            </Tree>
        );
    }
}
ReactDOM.render(<Demo />, mountNode);

相关区块

暂无相关区块