欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

树组件运行后的结果:

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

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

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

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