ReactJs实现树形结构的数据显示的组件的示例
程序员文章站
2022-09-08 22:58:17
本文介绍了reactjs实现树形结构的数据显示的组件的示例，分享给大家，具体如下：
1、该组件树形显示数据
2、组件中数据的请求方式为fetch方式
3、...
本文介绍了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文件的数据，在实际的交互中可根据自己输入的名称去请求后台对应的数据即可）
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持
推荐阅读
-
Python数据结构之顺序表的实现代码示例
-
微信小程序实现用table显示数据库反馈的多条数据功能示例
-
DevExpress的TreeList怎样设置数据源使其显示成单列树形结构
-
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
-
php实现的树形结构数据存取类实例
-
JS实现线性表的链式表示方法示例【经典数据结构】
-
JS实现线性表的顺序表示方法示例【经典数据结构】
-
vue组件Prop传递数据的实现示例
-
AJAX+Servlet实现的数据处理显示功能示例
-
Python cookbook(数据结构与算法)实现对不原生支持比较操作的对象排序算法示例