@beisen-platform/tree

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 调用方法

1. 安装npm组件包

npm install @beisen/ux-tree --save-dev  

1. 引用组件（需复制app、modules目录下 BaseTree.js文件 至Reducers中，请求的数据需拼接到原有数据上并传入组件内）

import Tree from "@beisen/ux-tree

1. 传入参数
   该参数为上述参数，传入方式使用: {...参数}

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')
);