1.0.9 • Published 8 years ago
ux-upaas-tree v1.0.9
Tree 使用说明
项目运行
cnpm install 或 npm install cnpm使用教程
npm install -g json-server 安装json-server 用于模拟获取数据（或者在app/modules/BaseTree下，拷贝根目录下tree.json数据到treeData中）
json-server -- watch tree.json 运行json-server
npm run dev （开发环境打包 port:8080）
npm run test （测试用例）
npm run build （生产环境打包）
Props ---- width Redux(Initialize)
async: 1, //1异步 0同步 业务中使用
hidden:false, //是否显示树组件
treeData: [], //树的数据，无需嵌套，一维数据
id:0, //异步请求的第一层数据pid，非必须
postData:[]&{}, //Post请求发送的data
methodType:'GET', //Method类型
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 参数
需复制app、modules目录下 BaseTree.js文件 至Reducers中，请求的数据需拼接到原有数据上并传入组件内
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) ;
import Tree from './src/index.js';
@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')
);