React-tree-check NPM

react-tree-check

基于 React 开发的树形插件；
没有引入第三方库，原生 js 封装，文件小性能不错；

效果

左边 SelectTree多选组件，右边 TreeCheckBox 多选下拉组件。

样式简陋，请根据自己需要修改, 或者覆盖。

安装

npm install react-tree-check --save-dev

引入方式

import {TreeCheckBox, SelectTree} from 'react-tree-check'
import 'react-tree-check/lib/index.css'

API

TreeCheckBox:

属性	说明	默认
sources	渲染树形结构的数组	[]
onChange	改变选中回调事件	null
topPid	顶级pid	sources 的第一条的Pid

SelectTree:

属性	说明	默认
sources	渲染树形结构的数组	[]
onChange	改变选中回调事件	null
topPid	顶级pid	sources 的第一条的Pid
name	input的name	null

事件

onChange 每次更新CheckBox的状态时候触发, 返还数据。

Usage 使用案例

import 'react-tree-check/lib/index.css'
import {TreeCheckBox, SelectTree} from 'react-tree-check'

class Module extends React.Component {
    constructor(props){
        super(props)

        this.state = {
            sources:[
                {id:1, name:"全部",  open:true},// open 默认是否显示子选项
                {id:11, pId:1, name:"综合部"}, // pId 父级的 id id不可以重复不然渲染有问题
                {id:12, pId:11, name:"综合部-1", value:"综合部-1", checked:true}, // checked 默认是否勾选

                {id:2, pId:1, name:"人力资源"},
                {id:21, pId:2, name:"人力资源-1", value:"人力资源-1"},
                {id:21, pId:2, name:"人力资源-2", value:"人力资源-2"},
                {id:211, pId:21, name:"人力资源-2", value:"人力资源-2"},

                {id:3, pId:2, name:"开发管理"},
                {id:31, pId:3, name:"开发管理-1", value:"开发管理-1"}
                
            ],
            selected: ''
        }
        this.changeSelected = this.changeSelected.bind(this)
    }

    changeSelected(res) {
        let arr = [];
        res.forEach((item) => {
            if (item.checked && item.value) arr.push(item.value)
        })
        this.setState({
            selected: arr.join(', ') || ''
        })
    }

    render() {
        return <div>
            <h1> Hello </h1>
            <div className="left">
                <p>{this.state.selected}</p>
                <TreeCheckBox sources={this.state.sources}  onChange={this.changeSelected}/>
            </div>
            <div className="right">
                <SelectTree sources={this.state.sources} />
            </div>
        </div>
    }
}