Nondigestible Purple Mayonnaise

    @beisen/tree

    0.2.9 • Public • Published

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

    Install

    npm i @beisen/tree

    DownloadsWeekly Downloads

    6

    Version

    0.2.9

    License

    ISC

    Unpacked Size

    2.43 MB

    Total Files

    69

    Last publish

    Collaborators

    • beisencorp