ztree-for-react
对jQuery zTreeV3.x 插件做react封装
install
npm install ztree-for-react --save-devuseage
import React,{Component} from 'react';
import ReactZtree from 'ztree-for-react';
const nodes= [
{name: "父节点1",
id:0,
children: [
{name: "子节点1",
id:1},
{name: "子节点2",id:2,children:[
{name:"子节点3",id:3}
]}
]}
];
export default class App extends Component {
render() {
return (
<div>
<ReactZtree nodes={nodes} events={this.getEvents()} check={check} ref="ztree" treeName={'tree1'}/>
<ReactZtree nodes={nodes} events={this.getEvents()} check={check} ref="ztree"/>
</div>
);
}
getEvents(){
return {
'onClick':(event,treeId,treeNode)=>{this.handleClick(event,treeId,treeNode)},
'onCheck':(event,treeId,treeNode)=>{this.handleClick(event,treeId,treeNode)}
}
}
handleClick(event,treeId,treeNode){
console.log(treeNode);
console.log(this.refs.ztree.ztreeObj.getCheckedNodes());
}
handleCheck(event,treeId,treeNode){
console.log(treeNode);
}
componentDidMount(){
//you can add treeName prop to set this treeObj to the window
console.log(window.ztree);
/**
*
* {tree1: {…}}
tree1
:
{setting: {…}, addNodes: ƒ, cancelSelectedNode: ƒ, destroy: ƒ, expandAll: ƒ, …}
__proto__
:
Object
* /
}
}quick start
npm install
npm startopen http://127.0.0.1:3000 in you browser
component props
treeName(string) the global attribute namenodes(required, object) the zTreee Nodes dataevents(object) the zTree Nodes event(the zTree callback setting)async(object) to load zTree Nodes as async(the zTree async setting)check(object) the zTree check setting(the zTree check setting)data(object) the zTree data settingedit(object) the zTree eidt settingview(object) the zTree view setting
please go jQuery zTree to get more infomations!
FAQ
1. jQuery is not defined?
Please install expose-loader,and add some config to your webpack config 😄
module: {
loaders: [{
test:require.resolve('jquery'),
loader:'expose?jQuery!expose?$'
}]
}LICENSE
MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent