ReactJs实现树形结构的数据显示的组件的示例
本文介绍了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文件的数据,在实际的交互中可根据自己输入的名称去请求后台对应的数据即可)
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们
赞 (0)