dd-rc-nstree

基于 react + antd + zTree 定制的节点树。

Usage no npm install needed!

<script type="module">
  import ddRcNstree from 'https://cdn.skypack.dev/dd-rc-nstree';
</script>

README

dd-rc-nstree


基于 react + antd + zTree 定制的节点树。

安装

dd-rc-nstree

示例

import { Nstree } from 'dd-rc-nstree';

const App = React.createClass({
  nstreeBeforeInit(treeData) {
    return treeData.children[0];
  },
  render() {
    return  (
      <div className="nsTree-sidebar">
        <Nstree 
          beforeInit={this.nstreeBeforeInit}
          treeApi="http://127.0.0.1:8848/rig/worldtree/tree"
        />
      </div>
    );
  }
});

ReactDOM.render(<App />, document.getElementById('react-content'));

API

参数 说明 类型 默认值
width 宽度 string、number 200
height 高度度 string、number 500
treeId 节点树ID string 'nstree'
treeApi 数据接口 string ''
zTreeObjSetting zTree配置 object {}
beforeInit 初始化前回调 function(treeData) noop
afterInit 初始化后回调 function(zTreeObj) noop
search search模块配置 object

search

参数 说明 类型 默认值
enabled 是否开启搜索模块 boolean
searchTypes 搜索类型 array
searchTypes = [{
  name: '搜索节点',
  type: 'ns'
}, {
  name: '搜索机器',
  type: 'machine'
}, {
  name: '搜索监控',
  type: 'collect'
}, {
  name: '初始化策略',
  type: 'init'
}, {
  name: '部署策略',
  type: 'deploy'
}]

refresh nsTree

$(document).trigger('refreshTree');

License

MIT