react-ztree
react-ztree is react-based implementation of zTree(http://www.treejs.cn/v3/main.php#_zTreeInfo)
Installation
npm install react-ztree --save-dev
Usage
import React from 'react';
import ReactDOM from 'react-dom';
import ZTree from 'react-ztree';
const App = () => {
const nodes= [{
name: 'Nkia',
id:0,
children: [{
name: 'R&D',
id:1
},{
name: 'Sales',
id:2,
children:[{
name:'Global',
id:3
}]
}]
}];
return (
<ZTree treeId='tree' nodes={nodes}/>
);
};
ReactDOM.render(
<App />,
document.getElementById('app')
);
Demo Build
npm run examples
Documentation
https://nkiateam.github.io/react-ztree/docs
Configuration webpack
-- webpack
// jquery expose
module: {
rules: [
{
test:require.resolve('jquery'),
use: [{
loader: 'expose-loader',
options: 'jQuery'
}]
}
],
},
Import css
-- css
-- style
// css file-path - ../node_modules/ztree/css/zTreeStyle/zTreeStyle.css
<link rel="stylesheet" href="{public-path}/ztree/css/zTreeStyle/zTreeStyle.css">
-- import
@import '~ztree/css/zTreeStyle/zTreeStyle.css';
/**
* If a gif file error is found...
* 1. npm install --save-dev file-loader
* 2. webpack
*/
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {}
}
]
}
],
}