@beisen-platform/tree
v1.0.2
Published
``` 使用树控件可以完整展现其中的层级关系，并具有展开收起选择等交互功能，如文件夹、组织架构、分类、地区等常用树形控件展示。 ```
Downloads
38
Readme
Tree 使用说明
项目简介
使用树控件可以完整展现其中的层级关系，并具有展开收起选择等交互功能，如文件夹、组织架构、分类、地区等常用树形控件展示。项目运行
1. cnpm install 或 npm install cnpm使用教程
2. npm install -g json-server 安装json-server 用于模拟获取数据（或者在app/modules/BaseTree下，拷贝根目录下tree.json数据到treeData中）
3. json-server -- watch tree.json 运行json-server
4. npm run dev （开发环境打包 port:8080）
5. npm run test （测试用例）
6. npm run build （生产环境打包）使用参数Props ---- width Redux(Initialize)
async: 1, //1异步 0同步 业务中使用
hidden:false, //是否显示树组件
treeData: [], //树的数据，无需嵌套，一维数据
id:0, //异步请求的第一层数据pid，非必须
postData:[]&{}, //Post请求发送的data
methodType:'GET', //Method类型
isFetching: false, //loading状态
initGetData:true, //默认为true,是否组件在首次渲染时请求数据,树组件默认会在DidMount时执行getTreeData方法去请求数据
getTreeData:function(){} //对应reducers中获取数据的方法，方法在 app/modules/BaseTree.js 中
getTreeDataAPI: '' || 'http://localhost:3001/getTreeData' //请求接口
hiddenTip:false, //是否显示提示，默认为显示
sideTip:false, //false为垂直，true为水平，默认垂直显示提示
,style:{ //自定义样式
}异步请求说明
数据说明
"id": "32025", //id
"name": "技术体系", //名称
"path": "32024.32025.", //树级路径
"pid": "32024", //父级id
"level": "1", //当前层级
"is_open":true, //是否直接打开节点并且请求当前层级数据
"clickable":false, // 当前节点是否可点击
"has_child":true //是否有子数据,只有当该字段为tree时才会显示展开的加号测试数据
将该数据放在treeData中即可
[
{
"id": "32025",
"name": "技术体系",
"path": "32025.",
"pid": "0",
"level": "1",
"has_child":true
},
{
"id": "1612",
"name": "产品线",
"path": "1612.",
"pid": "0",
"level": "1",
"has_child":true
},
{
"id": "32345",
"name": "青岛研发中心",
"path": "32025.32345.",
"pid": "32025",
"level": "2",
"has_child":false
},
{
"id": "32038",
"name": "技术学院",
"path": "32025.32038.",
"pid": "32025",
"level": "2",
"has_child":false
},
{
"id": "32037",
"name": "技术管理",
"path": "32025.32037.",
"pid": "32025",
"level": "2",
"has_child":false
},
{
"id": "32036",
"name": "DevOPS",
"path": "32025.32034.32036.",
"pid": "32034",
"level": "3",
"has_child":false
},
{
"id": "32035",
"name": "SysOPS",
"path": "32025.32034.32035.",
"pid": "32034",
"level": "3",
"has_child":false
},
{
"id": "32034",
"name": "运维技术",
"path": "32025.32034.",
"pid": "32025",
"level": "2",
"has_child":true
},
{
"id": "32033",
"name": "大数据",
"path": "32025.32033.",
"pid": "32025",
"level": "2",
"has_child":false
},
{
"id": "32032",
"name": "基础服务",
"path": "32025.32032.",
"pid": "32025",
"level": "2",
"has_child":false
},
{
"id": "32031",
"name": "BeisenCloud",
"path": "32025.32031.",
"pid": "32025",
"level": "2",
"has_child":false
},
{
"id": "32029",
"name": "TalentMobile",
"path": "32025.32026.32029.",
"pid": "32026",
"level": "3",
"has_child":false
},
{
"id": "32028",
"name": "TalentDesign",
"path": "32025.32026.32028.",
"pid": "32026",
"level": "3",
"has_child":false
},
{
"id": "32027",
"name": "TalentUI",
"path": "32025.32026.32027.",
"pid": "32026",
"level": "3",
"has_child":false
},
{
"id": "32026",
"name": "前端架构&用户体验",
"path": "32025.32026.",
"pid": "32025",
"level": "2",
"has_child":true
},
{
"id": "1749",
"name": "继任",
"path": "1612.1749.",
"pid": "1612",
"level": "2",
"has_child":false
},
{
"id": "1618",
"name": "员工调查",
"path": "1612.1618.",
"pid": "1612",
"level": "2",
"has_child":false
},
{
"id": "1617",
"name": "360°评估",
"path": "1612.1617.",
"pid": "1612",
"level": "2",
"has_child":false
},
{
"id": "1616",
"name": "绩效",
"path": "1612.1616.",
"pid": "1612",
"level": "2",
"has_child":false
},
{
"id": "1615",
"name": "招聘",
"path": "1612.1615.",
"pid": "1612",
"level": "2",
"has_child":false
},
{
"id": "1614",
"name": "测评",
"path": "1612.1614.",
"pid": "1612",
"level": "2",
"has_child":false
},
{
"id": "1613",
"name": "tita",
"path": "1612.1613.",
"pid": "1612",
"level": "2",
"has_child":false
}
]Tree 调用方法
- 安装npm组件包
npm install @beisen/ux-tree --save-dev - 引用组件（需复制app、modules目录下 BaseTree.js文件 至Reducers中，请求的数据需拼接到原有数据上并传入组件内）
import Tree from "@beisen/ux-tree- 传入参数
该参数为上述参数，传入方式使用: {...参数}
import React, {Component, PropTypes} from 'react'
import {render} from 'react-dom'
import ConfigureStore from './app/configureStore';
import { Provider, connect } from 'react-redux';
import usReducers from './app/modules/BaseTree';
import * as usActions from './app/modules/BaseTree';
import Immutable from 'immutable';
import { toJS } from 'immutable';
const store = ConfigureStore(usReducers);
@connect(
state => state.toJS(),
{...usActions}
)
class Demo extends Component{
state = {
treeShow:true
}
openTree(){
this.setState({treeShow:false});
}
treeClick(event,val){
//点击树节点
console.log(val)
}
render () {
let tree = this.state.treeShow?"":<Tree {...this.props} multi={true} onClick={this.treeClick}/>;
return (
<div>
<button onClick={this.openTree}>测试</button>
{tree}
</div>
)
}
}
render(
<Provider store={store}>
<Demo />
</Provider>,
document.getElementById('content')
);