ReactJs实现树形结构的数据显示的组件的示例

 /**  * Created by Administrator on 2017/3/20 0020.  */ import React,{Component} from "react" import "./kpiTree.less"; export default class KpiTree extends Component{   constructor(props){     super(props);     this.state={     }     this._handleSelect=this._handleSelect.bind(this);     this._handleSearch=this._handleSearch.bind(this);     this._handleReturn=this._handleReturn.bind(this);   }   _handleSearch=()=>{     debugger     var _self=this;     var _inputValue=this.refs.ksearchInput.value;//搜索框输入的关键字     var _main=this.refs.kpiTree;     _main.innerHTML="";     var searchListUrl = '../src/kpiTree/json/searchListData.json';     fetch(searchListUrl,{       credentials:'same-origin',       async:false,       //method: 'POST',       method: 'GET',       mode:'cors',//跨域请求       headers: {         "Content-type": "application/x-www-form-urlencoded",         "User-Agent": " Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.102 Safari/537.36"       },     })       .then(function(res) {         console.log("Response succeeded?", JSON.stringify(res.ok));         return res.json();       })        .then(function(data) {         debugger         _self._renderTreeNode(_main,data,0);       })       .catch(function(e) {         console.log("fetch fail",e.toString());       });   }   _handleReturn=()=>{     this.refs.ksearchInput.value="";//清空搜索输入框     var _main=this.refs.kpiTree;     _main.innerHTML="";     this._fetchTreeNodeData("",_main,0);   }   _handleSelect=()=>{     debugger;     var _select=[];     $(this.refs.kpiTree).find("input:checkbox").each(function() {//$('#kpiTree input:checkbox')       if ($(this)[0].pid!=undefined&&$(this)[0].checked ==true) {         var _selected_kpi={};         _selected_kpi.kid=$(this)[0].parentNode.id.substring(4);         _selected_kpi.kname=$(this)[0].parentNode.children[1].innerHTML         _selected_kpi.pid=$(this)[0].parentNode.pid.substring(4);         _select.push(_selected_kpi);       }     });     this.props.callbackParent(_select);   }   componentDidMount=()=>{     var _main=this.refs.kpiTree;     this._fetchTreeNodeData("",_main,0);   }   _selectAllCheckBox=(parentNodeId,event)=>{     var _items=$("#" + parentNodeId+" input")     for(var i=0;i<_items.length;i++){       if (_items[i].pid!=undefined&&_items[i].pid==parentNodeId){         _items[i].checked=event.currentTarget.checked;       }     }   }   _renderTreeNode=(nodeObj,treeData,paddingLeft)=>{     var _self=this;     var hasAllSelectBox=false;     if(treeData.length>0){       for(var i=0;i<treeData.length;i++){         if(treeData[i].hasChild=="0"){           hasAllSelectBox=true         }       }       var _node=treeData.map((data,index)=>{         var _kname=data.kname;         var _div=document.createElement("div");         _div.pid="node"+data.pid;         _div.id="node"+data.kid;         _div.style.paddingLeft=paddingLeft+"px";         var _img=document.createElement("img");         _img.src="/src/kpiTree/images/hide.png";         _img.className="knode-hide-show-icon";         _img.onclick=_self._handleClick.bind(this,data.kid);         var _checkBox=document.createElement("input");         _checkBox.type="checkbox"         _checkBox.pid="node"+data.pid;         var _span=document.createElement("span");         _span.innerHTML=_kname;         var allCheckBoxDiv=null;         if(data.pid!="-1"&&index==0&&hasAllSelectBox==true){           allCheckBoxDiv=document.createElement("div");           allCheckBoxDiv.pid="node"+data.pid;           allCheckBoxDiv.style.paddingLeft=paddingLeft+"px";           var _allCheckBox=document.createElement("input");           _allCheckBox.type="checkbox";           _allCheckBox.onchange=_self._selectAllCheckBox.bind(this,nodeObj.id);           var _allCheckBoxLabel=document.createElement("span");           _allCheckBoxLabel.innerHTML="全选";           allCheckBoxDiv.appendChild(_allCheckBox);           allCheckBoxDiv.appendChild(_allCheckBoxLabel);         }         if(data.hasChild=="1"){           _div.appendChild(_img);         }         else if(data.hasChild=="0"){           _div.appendChild(_checkBox);         }         _div.appendChild(_span);         if(allCheckBoxDiv){           nodeObj.appendChild(allCheckBoxDiv)         }         nodeObj.appendChild(_div);       })      }   }   _fetchTreeNodeData=(nodeId,nodeObj,paddingLeft)=>{     debugger;     var _self=this;     var treeListUrl = '../src/kpiTree/json/treeListData'+nodeId+'.json';     fetch(treeListUrl,{       credentials:'same-origin',       async:false,       //method: 'POST',       method: 'GET',       mode:'cors',//跨域请求       headers: {         "Content-type": "application/x-www-form-urlencoded",         "User-Agent": " Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.102 Safari/537.36"       },     })       .then(function(res) {         console.log("Response succeeded?", JSON.stringify(res.ok));         return res.json();       })        .then(function(data) {         debugger         _self._renderTreeNode(nodeObj,data,paddingLeft);       })       .catch(function(e) {         console.log("fetch fail",e.toString());       });    }   _handleClick=(nodeId,event)=>{     debugger;     var _clickImg=event.currentTarget     var currentNode=event.currentTarget.parentNode;     if(_clickImg.src.indexOf("hide")!=-1){       _clickImg.src="/src/kpiTree/images/show.png";       if(currentNode.childNodes[3]!=null&¤tNode.childNodes[3]!=undefined){         this._showOrHideNode(currentNode,1);       }       else {         this._fetchTreeNodeData(nodeId,currentNode,20);       }     }     else if(_clickImg.src.indexOf("show")!=-1){       _clickImg.src="/src/kpiTree/images/hide.png";       this._showOrHideNode(currentNode,0);     }   }   _showOrHideNode=(pNode,isShow)=>{     var _sub_nodes=pNode.childNodes;     for(var i=0;i<_sub_nodes.length;i++){       if(_sub_nodes[i].pid==pNode.id){         if(isShow==1){           _sub_nodes[i].style.display="block";         }         else if(isShow==0){           _sub_nodes[i].style.display="none";         }       }     }   }   render=()=> {     var tabId=this.props.tabId;     var _kpiTreePanelHeight=tabId=="tab01"?"kpitree_panel_height_01":"kpitree_panel_height_02";     var _bottomContentHeight=tabId=="tab01"?"kbottom-content_height_01":"kbottom-content_height_02";     return (       <div className={"kpitree_panel "+_kpiTreePanelHeight}>         <div className="ksearch-div">           <input type="text" className="ksearch-input" ref="ksearchInput" placeholder=" 请输入搜索关键字"/>           <img className="ksearch-icon" src="/src/kpiTree/images/search-icon.png" onClick={this._handleSearch}/>           <div className="kreturn-button" onClick={this._handleReturn}>             <span>返回</span>           </div>           <div className="kselecte-button" onClick={this._handleSelect}>             <span>指标选择</span>           </div>         </div>         <div className={"kbottom-content "+_bottomContentHeight} ref="kpiTree">         </div>       </div>     );   } }; 

.kpitree_panel{  position: relative;  width:308px;  background-color: #F2F2F2;  border: 1px solid #cfcfcf ; } .kpitree_panel_height_01{  height: 548px; } .kpitree_panel_height_02{  height: 378px; } .ksearch-div{  position: relative;  top: 10px;  margin-left: 4px;  width: 310px;  height: 30px; } .ksearch-input{  border: 1px;  width: 145px;  height: auto;  border-radius: 10px; } .ksearch-icon{  position: relative;  left: -24px;  width: 17px;  height: 17px; } .ksearch-button{  position: relative;  left: 150px;  top: -22px;  font-size: 12px;  color: #999999;  padding-top: 3px;  text-align: center;  cursor: pointer;  width: 40px;  height:24px;  border: solid 0.8px #CBCBCB ;  -webkit-border-radius: 8px; } .kreturn-button{  position: relative;  left: 171px;  top: -22px;  font-size: 12px;  color: #999999;  padding-top: 3px;  text-align: center;  cursor: pointer;  width: 40px;  height: 24px;  border: solid 0.8px #CBCBCB;  -webkit-border-radius: 8px; } .kselecte-button{  position: relative;  left: 226px;  top: -46px;  font-size: 12px;  color: #999999;  padding-top: 3px;  text-align: center;  cursor: pointer;  width: 60px;  height: 25px;  border: solid 0.8px #CBCBCB;  -webkit-border-radius: 8px;  background-color: #F2F2F2; } .kbottom-content{  padding: 10px;  color: #999999;  margin-left: 13px;  overflow-y: scroll;  overflow-x: hidden;  width: 280px;  margin-top: 20px;  background-color: #F7F7F7; } .kbottom-content_height_01{  height: 480px;  } .kbottom-content_height_02{  height: 318px; } .knode-hide-show-icon{  width: 10px;  height: 10px;  cursor: pointer; } 

[  {"kid":"01","kname":"综合指标","hasChild":"1","pid":"-1"},  {"kid":"02","kname":"分析类指标","hasChild":"1","pid":"-1"},  {"kid":"03","kname":"组合指标","hasChild":"1","pid":"-1"},  {"kid":"04","kname":"移动业务计费收入","hasChild":"1","pid":"-1"},  {"kid":"05","kname":"2G业务","hasChild":"1","pid":"-1"} ] 

[  {"kid":"010","kname":"综合指标1","hasChild":"1","pid":"01"},  {"kid":"011","kname":"分析类指标1","hasChild":"1","pid":"01"},  {"kid":"012","kname":"组合指标1","hasChild":"1","pid":"01"},  {"kid":"013","kname":"移动业务计费收入1","hasChild":"1","pid":"01"},  {"kid":"014","kname":"2G业务1","hasChild":"1","pid":"01"} ] 

[  {"kid":"0100","kname":"综合指标000","hasChild":"0","pid":"010"},  {"kid":"0101","kname":"分析类指标000","hasChild":"0","pid":"010"},  {"kid":"0102","kname":"组合指标000","hasChild":"0","pid":"010"},  {"kid":"0103","kname":"移动业务计费收入000","hasChild":"0","pid":"010"},  {"kid":"0104","kname":"2G业务000","hasChild":"0","pid":"010"} ] 

[  {"kid":"01","kname":"综合指标","hasChild":"0","pid":"-1"},  {"kid":"02","kname":"分析类指标","hasChild":"0","pid":"-1"},  {"kid":"03","kname":"组合指标","hasChild":"0","pid":"-1"},  {"kid":"04","kname":"移动业务计费收入","hasChild":"0","pid":"-1"},  {"kid":"05","kname":"2G业务","hasChild":"0","pid":"-1"},  {"kid":"01","kname":"综合指标","hasChild":"0","pid":"-1"},  {"kid":"02","kname":"分析类指标","hasChild":"0","pid":"-1"},  {"kid":"03","kname":"组合指标","hasChild":"0","pid":"-1"},  {"kid":"04","kname":"移动业务计费收入","hasChild":"0","pid":"-1"},  {"kid":"05","kname":"2G业务","hasChild":"0","pid":"-1"},  {"kid":"01","kname":"综合指标","hasChild":"0","pid":"-1"},  {"kid":"02","kname":"分析类指标","hasChild":"0","pid":"-1"},  {"kid":"03","kname":"组合指标","hasChild":"0","pid":"-1"},  {"kid":"04","kname":"移动业务计费收入","hasChild":"0","pid":"-1"},  {"kid":"05","kname":"2G业务","hasChild":"0","pid":"-1"},  {"kid":"01","kname":"综合指标","hasChild":"0","pid":"-1"},  {"kid":"02","kname":"分析类指标","hasChild":"0","pid":"-1"},  {"kid":"03","kname":"组合指标","hasChild":"0","pid":"-1"},  {"kid":"04","kname":"移动业务计费收入","hasChild":"0","pid":"-1"},  {"kid":"05","kname":"2G业务","hasChild":"0","pid":"-1"} ]