react封装组织架构递归树
想用react实现一个递归树，但一些框架里面的有些不符合需求，于是自己写了个，功能比较简单，欢迎批评指正。。
react实现这样一个组织架构递归树，下级部门的收起和展开，点击部门名称时请求接口获取下级部门以及员工等。效果如下：
首先封装左边的组织架构组件organize-tree
import React, { Component } from 'react';
export default class OrganizeTree extends React.Component {
render(){
let self = this;
return (
<div className="OrganizeTree">
<div className="left">
{
this.props.treedata.map(function(item,index){
return <div className="row-li" key={index}>
<span className={`${item.show?'':'rotate90'}`}>
<i className={`iconfont arrow ${item.departs?'icon-arrowdropdown':''}`} onClick={self.toggle.bind(self,item,index)}></i>
</span>
<span className={`depart ${item.departs?'':'departmentname'}`} onClick={self.showdepart.bind(self,item,index)}>{item.departmentName}</span>
{
item.departs&&item.show?<OrganizeTree treedata={item.departs} toggleTree={self.toggle.bind(self,item.departs)} showDepart={self.showdepart.bind(self,item.departs)}/>:''
}
</div>
})
}
</div>
</div>
)
}
toggle(item,index){ // 点击左侧切换符号切换展开收起
if(typeof index === 'number'){
this.props.toggleTree(item)
}else{
this.props.toggleTree(index)
}
}
showdepart(item,index){
if(typeof index === 'number'){
this.props.showDepart(item)
}else{
this.props.showDepart(index)
}
}
}
样式tree.less
.Organization{ // 组织架构树组件 .left-tree{width: 200px;background: #fff;margin: 15px 0 15px 15px;min-height: 700px; .search-wrapper{padding:20px 10px;position:relative; .search{font-size: 12px;height: 30px;padding-left: 25px;width: 100%;line-height: 30px;border:1px solid #d8d8d8;} .icon-sousuo{position: absolute;top: 25px;left: 15px;z-index: 1;color: #d8d8d8;} } .row-li{text-align: left;font-size: 12px;line-height: 35px; .arrow{font-size: 30px;} .departmentname{padding-left: 16px;} .depart{cursor: pointer;} .icon-arrow-right{font-size: 24px;} } } .right-con{width: 100%; .title{margin: 10px 0; .iconfont{margin-right: 10px;} } .bt1p{border-bottom: 1px solid #d8d8d8;padding-bottom: 10px;} } } .OrganizeTree{padding-left: 15px;}
页面引用该组件 organization.jsx
import React, { Component } from 'react';
import InterfaceServer from '@/axios/interface'
const interfaceServer = new InterfaceServer();
import OrganizeTree from '@/components/organize-tree'
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import * as infoActions from '@/store/userinfo/action'
import store from '@/store/store'
import './tree.less'
class Organization extends React.Component {
constructor(props,context){
super(props,context)
this.state = {
treedata:[],
}
}
render(){
let s = store.getState().organizeInfo
return(
<div className="Organization">
<div className="nav col666"><span>组织架构</span></div>
<div className="flex">
<!--左边的组织架构树-->
<div className="left-tree">
<div className="search-wrapper">
<input type="text" className="input search" placeholder="请输入部门名称"/>
<i className="iconfont icon-sousuo"></i>
</div>
<OrganizeTree treedata={this.state.treedata} toggleTree={this.toggleTree.bind(this)} showDepart={this.showDepart.bind(this)}/>
</div>
<!--右边的详情-->
<div className="right-con bgcon txtleft">
<div className="title"><i className="iconfont icon-zuzhi"></i>才华有限公司 <button className="btn">编辑</button></div>
<div className="title bt1p"><i className="iconfont icon-bumen"></i>下级部门 <button className="btn">增加</button></div>
{
s.department&&s.department.length?
<table className="table" border="0" cellPadding="0" cellSpacing="0" bordercolor="#eee">
<thead>
<tr>
<th>部门名称</th>
<th>部门主管</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{
s.department.map(function(item,index){
return <tr key={index}>
<td>{item.departmentName}</td>
<td>{item.supervisor}</td>
<td><a className="linka">编辑</a><a className="linka">删除</a></td>
</tr>
})
}
</tbody>
</table>
:<div>暂无下级部门</div>
}
<div className="title bt1p"><i className="iconfont icon-bumen1"></i>部门员工 <button className="btn">增加</button></div>
{
s.employees&&s.employees.length?
<table className="table" border="0" cellPadding="0" cellSpacing="0" bordercolor="#eee">
<thead>
<tr>
<th>姓名</th>
<th>职位名称</th>
<th>联系电话</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{
s.employees.map(function(item,index){
return <tr key={index}>
<td>{item.emName}</td>
<td>{item.poName}</td>
<td>{item.emPhone}</td>
<td><a className="linka">编辑</a><a className="linka">删除</a></td>
</tr>
})
}
</tbody>
</table>
:<div>暂无下级部门</div>
}
</div>
</div>
</div>
)
}
componentWillMount(){
this._sendOrganizationServer()
console.log(store.getState().organizeInfo);
let organizeInfo = store.getState().organizeInfo
this._sendShowemployeeServer({departmentName:'才华有限公司'})
}
_sendOrganizationServer(){
interfaceServer.sendOrganizationServer({
onSuccess:res=>{
console.log(res);
let result = res.data
result.forEach(item=>{
item.show = true;
if(item.departs){
item.departs.forEach(i=>{
i.show = true
})
}
})
this.setState({
treedata:result
})
}
})
}
_sendShowemployeeServer(param){
interfaceServer.sendShowemployeeServer({
data:param,
onSuccess:res=>{
console.log(res);
// 保存到redux里
this.props.organizeInfoActions.saveOrganizeINFO(res.data)
}
})
}
toggleTree(item,index){
item.show = !item.show;
this.setState({
treedata:this.state.treedata
})
}
showDepart(item){
console.log(item);
this._sendShowemployeeServer({departmentName:item.departmentName})
}
}
function mapStateToProps(state){
return {
organizeInfo: state.organizeInfo
}
}
function mapDispatchToProps(dispatch){
return {
organizeInfoActions: bindActionCreators(infoActions, dispatch)
}
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(Organization)
更多详细代码见 https://github.com/leitingting08/react-app/tree/master/src/components/organize-tree
