react-do-tree-select

A tree select React component.

简体中文

Features

• Support a large amount of data (1000,000 pieces of data were tested for stability)
• Support half-selection (even if the child nodes are all selected, the check of parent level will not be affected)

Demo

• online

Install

npm install react-do-tree-select --save
 
# or 
 
yarn install react-do-tree-select

react-do-tree-select depends on React

Examples

Here's simple example to get you started.

import React from 'react';
import TreeSelect from 'react-do-tree-select';
import Data from './Data';
 
class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            treeData: [],
            selectVal: '',
            showlevel: 0,
        }
        this.onSelect = this.onSelect.bind(this);
        this.onExpand = this.onExpand.bind(this);
        this.onChecked = this.onChecked.bind(this);
        this.customTitleRender = this.customTitleRender.bind(this);
    }
 
    componentDidMount() {
        const treeData = Data;
        this.setState({treeData});
    }
  
    customTitleRender(item) {
        return item.title
    }
 
    onSelect(val, e) {
        console.log(val);
    }
 
    onExpand(val, e) {
        console.log(val);
    }
 
    onChecked(val, e) {
        console.log(val);
    }
 
    render() {
        return (
            const { treeData, showlevel } = this.state;
            const checkbox = {
                enable: true,
                parentChain: true,              // child Affects parent nodes;
                childrenChain: true,            // parent Affects child nodes;
                halfChain: true,                // The selection of child nodes affects the semi-selection of parent nodes.
                initCheckedList: []             // Initialize check multiple lists
            }
            return (
                <div className="App">
                    <TreeSelect
                        treeData            = {treeData}
                        style               = {{width: 320,height: 600}}
                        selectVal           = {this.state.selectVal}
                        onSelect            = {this.onSelect}
                        onExpand            = {this.onExpand}
                        onChecked           = {this.onChecked}
                        checkbox            = {checkbox}
                        showlevel           = {showlevel}
                        customTitleRender   = {this.customTitleRender}/>
                </div>
            );
        );
    }
}

./Data.js

export default [
    {
        title: '广东省',
        value: '1',
        children: [
            {
                title: '广州市',
                value: '1-1',
                children: [
                    {
                        title: '越秀区',
                        value: '1-1-1',
                    },{
                        title: '白云区',
                        value: '1-1-2',
                    }
                ]
            },{
                title: '珠海市',
                value: '1-2',
                disabled: true,
            },{
                title: '深圳市',
                value: '1-3',
            }
        ]
    },{
        title: '广西省',
        value: '2',
        children: [
            {
                title: '南宁市',
                value: '2-1',
            },{
                title: '桂林市',
                value: '2-2',
            },{
                title: '玉林市',
                value: '2-3',
            }
        ]
    }
]

API

property	description	type	default	required
treeData	source data config	array	-	true
showlevel	Hierarchy of expansion	number	0
checkbox	Check box config config	object	-
wrapperClassName	Extended class name	string	-
selectVal	Selected items	string	-
style	Custom style	object	{width: 320, height: 800}
onSelect	Click the event callback function	function( item, event )	-
onExpand	Icon Click the event callback function	function( item, event )	-
onChecked	Check the callback function for the event	function( items, event )	-
customIconRender	The custom icon is extended after the entry	function(item) : DOM	-
customTitleRender	Displays the title of the entry	function(item) : DOM	-

treeData

property	description	type	default	required
title	Item title	string	-
value	The unique identity of the item	string	-
disabled	Whether the item is disabled	bool	false
children	Item children	array	-

checkbox

property	description	type	default	required
enable	Switch the check box	bool	false
parentChain	child Affects parent nodes	bool	true
childrenChain	parent Affects child nodes	bool	true
halfChain	The selection of child nodes affects the semi-selection of parent nodes	bool	true
initCheckedList	Initialize check multiple lists	array	-

License

react-do-tree-select is available under the MIT License.