react 树形菜单_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)=>{