网络编程 
首页 > 网络编程 > 浏览文章

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

(编辑：jimmy 日期: 2024/11/15 浏览：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="/UploadFiles/2021-04-02/hide.png">


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实现树形结构的数据显示的组件的示例 


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持
上一篇：JavaScript编写的网页小游戏，很给力
下一篇：基于 Vue 的树形选择组件的示例代码
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 网站地图 SiteMap