JavaScript

超轻量级php框架startmvc

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

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

更新时间：2020-05-30 22:54:01 作者：startmvc
本文介绍了ReactJs实现树形结构的数据显示的组件的示例，分享给大家，具体如下：1、该组

本文介绍了ReactJs实现树形结构的数据显示的组件的示例，分享给大家，具体如下：

1、该组件树形显示数据

2、组件中数据的请求方式为fetch方式

3、点击对应的数据前面的小三角，fetch请求改数据下对应的子数据，并展开该节点。

4、将该组件的js、less文件放到kpiTree目录下，在kpiTree目录下创建images目录将组件需要的图片放入给目录，在kpiTree目录下创建json文件夹将该组件需要的json文件放入改文件夹中，组件便可正常运行。

kpiTree.js文件 


 /** 
 * 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.less文件 


.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; 
}

下面这些json文件都放入json文件夹中

treeListData.json文件 


[ 
 {"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"} 
]

treeListData01.json文件 


[ 
 {"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"} 
]

treeListData010.json文件 


[ 
 {"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"} 
]

searchListData.json文件 


[ 
 {"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"} 
]

树组件运行后的结果：

 

搜索结果：（这里是请求了一个json文件的数据，在实际的交互中可根据自己输入的名称去请求后台对应的数据即可）

 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家

react 树形组件 ReactJs 树形结构
文章分类
相关文章

详解使用webpack+electron+reactJs开发windows桌面应用

react 实现页面代码分割、按需加载的方法

尝试自己动手用react来写一个分页组件(小结)

React.Js添加与删除onScroll事件的方法详解

ReactJS实现表单的单选多选和反选的示例

react.js 父子组件数据绑定实时通讯的示例代码

react高阶组件经典应用之权限控制详解

React如何将组件渲染到指定DOM节点详解

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

详解react使用react-bootstrap当轮子造车

react.js使用webpack搭配环境的入门教程

详解基于webpack搭建react运行环境

React-router 4 按需加载的实现方式及原理详解

React.js中常用的ES6写法总结（推荐）