ReactJs實(shí)現(xiàn)樹形結(jié)構(gòu)的數(shù)據(jù)顯示的組件的示例
更新時(shí)間：2017年08月18日 09:56:50 作者：拇指風(fēng)云
本篇文章主要介紹了ReactJs實(shí)現(xiàn)樹形結(jié)構(gòu)的數(shù)據(jù)顯示的組件的示例，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
本文介紹了ReactJs實(shí)現(xiàn)樹形結(jié)構(gòu)的數(shù)據(jù)顯示的組件的示例，分享給大家，具體如下：
1、該組件樹形顯示數(shù)據(jù)
2、組件中數(shù)據(jù)的請(qǐng)求方式為fetch方式
3、點(diǎn)擊對(duì)應(yīng)的數(shù)據(jù)前面的小三角，fetch請(qǐng)求改數(shù)據(jù)下對(duì)應(yīng)的子數(shù)據(jù)，并展開該節(jié)點(diǎn)。
4、將該組件的js、less文件放到kpiTree目錄下，在kpiTree目錄下創(chuàng)建images目錄將組件需要的圖片放入給目錄，在kpiTree目錄下創(chuàng)建json文件夾將該組件需要的json文件放入改文件夾中，組件便可正常運(yùn)行。
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;//搜索框輸入的關(guān)鍵字
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',//跨域請(qǐng)求
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',//跨域請(qǐng)求
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=" 請(qǐng)輸入搜索關(guān)鍵字"/>
<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>指標(biāo)選擇</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":"綜合指標(biāo)","hasChild":"1","pid":"-1"},
{"kid":"02","kname":"分析類指標(biāo)","hasChild":"1","pid":"-1"},
{"kid":"03","kname":"組合指標(biāo)","hasChild":"1","pid":"-1"},
{"kid":"04","kname":"移動(dòng)業(yè)務(wù)計(jì)費(fèi)收入","hasChild":"1","pid":"-1"},
{"kid":"05","kname":"2G業(yè)務(wù)","hasChild":"1","pid":"-1"}
]
treeListData01.json文件
[
{"kid":"010","kname":"綜合指標(biāo)1","hasChild":"1","pid":"01"},
{"kid":"011","kname":"分析類指標(biāo)1","hasChild":"1","pid":"01"},
{"kid":"012","kname":"組合指標(biāo)1","hasChild":"1","pid":"01"},
{"kid":"013","kname":"移動(dòng)業(yè)務(wù)計(jì)費(fèi)收入1","hasChild":"1","pid":"01"},
{"kid":"014","kname":"2G業(yè)務(wù)1","hasChild":"1","pid":"01"}
]
treeListData010.json文件
[
{"kid":"0100","kname":"綜合指標(biāo)000","hasChild":"0","pid":"010"},
{"kid":"0101","kname":"分析類指標(biāo)000","hasChild":"0","pid":"010"},
{"kid":"0102","kname":"組合指標(biāo)000","hasChild":"0","pid":"010"},
{"kid":"0103","kname":"移動(dòng)業(yè)務(wù)計(jì)費(fèi)收入000","hasChild":"0","pid":"010"},
{"kid":"0104","kname":"2G業(yè)務(wù)000","hasChild":"0","pid":"010"}
]
searchListData.json文件
[
{"kid":"01","kname":"綜合指標(biāo)","hasChild":"0","pid":"-1"},
{"kid":"02","kname":"分析類指標(biāo)","hasChild":"0","pid":"-1"},
{"kid":"03","kname":"組合指標(biāo)","hasChild":"0","pid":"-1"},
{"kid":"04","kname":"移動(dòng)業(yè)務(wù)計(jì)費(fèi)收入","hasChild":"0","pid":"-1"},
{"kid":"05","kname":"2G業(yè)務(wù)","hasChild":"0","pid":"-1"},
{"kid":"01","kname":"綜合指標(biāo)","hasChild":"0","pid":"-1"},
{"kid":"02","kname":"分析類指標(biāo)","hasChild":"0","pid":"-1"},
{"kid":"03","kname":"組合指標(biāo)","hasChild":"0","pid":"-1"},
{"kid":"04","kname":"移動(dòng)業(yè)務(wù)計(jì)費(fèi)收入","hasChild":"0","pid":"-1"},
{"kid":"05","kname":"2G業(yè)務(wù)","hasChild":"0","pid":"-1"},
{"kid":"01","kname":"綜合指標(biāo)","hasChild":"0","pid":"-1"},
{"kid":"02","kname":"分析類指標(biāo)","hasChild":"0","pid":"-1"},
{"kid":"03","kname":"組合指標(biāo)","hasChild":"0","pid":"-1"},
{"kid":"04","kname":"移動(dòng)業(yè)務(wù)計(jì)費(fèi)收入","hasChild":"0","pid":"-1"},
{"kid":"05","kname":"2G業(yè)務(wù)","hasChild":"0","pid":"-1"},
{"kid":"01","kname":"綜合指標(biāo)","hasChild":"0","pid":"-1"},
{"kid":"02","kname":"分析類指標(biāo)","hasChild":"0","pid":"-1"},
{"kid":"03","kname":"組合指標(biāo)","hasChild":"0","pid":"-1"},
{"kid":"04","kname":"移動(dòng)業(yè)務(wù)計(jì)費(fèi)收入","hasChild":"0","pid":"-1"},
{"kid":"05","kname":"2G業(yè)務(wù)","hasChild":"0","pid":"-1"}
]
樹組件運(yùn)行后的結(jié)果：
搜索結(jié)果：（這里是請(qǐng)求了一個(gè)json文件的數(shù)據(jù)，在實(shí)際的交互中可根據(jù)自己輸入的名稱去請(qǐng)求后臺(tái)對(duì)應(yīng)的數(shù)據(jù)即可）
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家
相關(guān)文章
這篇文章主要介紹了react批量引入svg圖標(biāo)的方法,在批量引入之前,我們需要安裝一個(gè)包并配置到typescript.json文件中,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了在create-react-app中使用sass的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10
這篇文章主要介紹了React 18版本配置rem 和 vw的詳細(xì)步驟,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
ReactNative之鍵盤Keyboard的彈出與消失示例
本篇文章主要介紹了ReactNative之鍵盤Keyboard的彈出與消失示例，具有一定的參考價(jià)值，有興趣的可以了解一下2017-07-07
解決React報(bào)錯(cuò)The?tag?is?unrecognized?in?this?browser
這篇文章主要為大家介紹了解決React報(bào)錯(cuò)The?tag?is?unrecognized?in?this?browser示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
React render核心階段深入探究穿插scheduler與reconciler
這篇文章主要介紹了React render核心階段穿插scheduler與reconciler，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-11-11
這篇文章主要為大家介紹了React并發(fā)更新與性能優(yōu)化解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
react+antd實(shí)現(xiàn)動(dòng)態(tài)編輯表格數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了react+antd實(shí)現(xiàn)動(dòng)態(tài)編輯表格數(shù)據(jù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
Hook是React16.8的新增特性。它可以讓你在不編寫class的情況下使用state以及其他的React特性，這篇文章主要介紹了React hook的使用2022-10-10
react實(shí)現(xiàn)組件狀態(tài)緩存的示例代碼
本文主要介紹了react實(shí)現(xiàn)組件狀態(tài)緩存的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02