# @beisen-cmps/tree > ## 项目运行 Latest version **0.0.1** (published 2018-05-15) · ISC license · 0 weekly downloads ## Install ```sh npm install @beisen-cmps/tree pnpm add @beisen-cmps/tree yarn add @beisen-cmps/tree bun add @beisen-cmps/tree ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.0.1 | | Published | 2018-05-15 | | First published | 2018-05-15 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 5 | | Unpacked size | 2.3 MB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | beisen | | Maintainers | beisencorp | | Keywords | beisen, react-component, es6 | ## Links - npm: https://www.npmjs.com/package/@beisen-cmps/tree - npm.io page: https://npm.io/package/@beisen-cmps/tree ## Dependencies (5) - [react](https://npm.io/package/react.md) ^15.0.1 - [react-dom](https://npm.io/package/react-dom.md) ^15.0.1 - [@beisen/loading](https://npm.io/package/@beisen/loading.md) ^0.1.41 - [@beisen/tool-tip](https://npm.io/package/@beisen/tool-tip.md) ^0.1.50 - [@beisen/common-func](https://npm.io/package/@beisen/common-func.md) 0.0.13 ## Recent versions - 0.0.1 (latest) — 2018-05-15 ## 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 参数 需复制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?"":; return (
{tree}
) } } render( , document.getElementById('content') ); ``` --- _Source: https://npm.io/package/@beisen-cmps/tree · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._