首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onAugust 18, 2017

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木

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

- Author -

拇指风云

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript 变量作用域 代码分析
Jun 26 Javascript
jquery ui dialog ie8出现滚动条的解决方法
Dec 06 Javascript
控制文字内容的显示与隐藏示例
Jun 11 Javascript
jQuery获取及设置表单input各种类型值的方法小结
May 24 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
Oct 13 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
May 08 Javascript
Angularjs为ng-click事件传递参数
Jun 15 Javascript
JS运动特效之链式运动分析
Jan 24 Javascript
vue 实现axios拦截、页面跳转和token 验证
Jul 17 Javascript
JS实现获取自定义属性data值的方法示例
Dec 19 Javascript
react-router-dom 嵌套路由的实现
May 02 Javascript
vant时间控件使用方法详解
Dec 24 Javascript
基于 Vue 的树形选择组件的示例代码
Aug 18 #Javascript
简单实现jQuery手风琴效果
Aug 18 #jQuery
JavaScript中Hoisting详解 (变量提升与函数声明提升)
Aug 18 #Javascript
JavaScript实现旋转轮播图
Aug 18 #Javascript
JavaScript定时器setTimeout()和setInterval()详解
Aug 18 #Javascript
ECMAscript 变量作用域总结概括
Aug 18 #Javascript
微信小程序之前台循环数据绑定
Aug 18 #Javascript
条形码(1) Mysql8(2) OOP(1) Outlook(1) SeaTable(1) tree shaking(1) celery(1) HBuilder(1) Three.js(1) MutationObserver(1)
You might like
php版小黄鸡simsimi聊天机器人接口分享
2014/01/26 PHP
smarty模板引擎中变量及变量修饰器用法实例
2015/01/22 PHP
PHP关联数组实现根据元素值删除元素的方法
2015/06/26 PHP
PHP实现在数据库百万条数据中随机获取20条记录的方法
2017/04/19 PHP
PHP实现的常规正则验证helper公共类完整实例
2017/04/27 PHP
今天是星期几的4种JS代码写法
2013/09/17 Javascript
javascript简单性能问题及学习笔记
2014/02/04 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
2014/12/15 Javascript
Ajax中解析Json的两种方法对比分析
2015/06/25 Javascript
JS实现上下左右对称的九九乘法表
2016/02/22 Javascript
D3.js实现散点图和气泡图的方法详解
2016/09/21 Javascript
JavaScript中String对象的方法介绍
2017/01/04 Javascript
js中删除数组中的某一元素实例(无下标时)
2017/02/28 Javascript
JS字符串false转boolean的方法(推荐)
2017/03/08 Javascript
js实现鼠标跟随运动效果
2020/08/02 Javascript
利用babel将es6语法转es5的简单示例
2017/12/01 Javascript
详解vue.js数据传递以及数据分发slot
2018/01/20 Javascript
vue和webpack安装命令详解
2018/06/15 Javascript
ES2020让代码更优美的运算符 (?.) (??)
2021/01/04 Javascript
20行python代码实现人脸识别
2019/05/05 Python
Python Collatz序列实现过程解析
2019/10/12 Python
Python pandas RFM模型应用实例详解
2019/11/20 Python
Python 简单计算要求形状面积的实例
2020/01/18 Python
详解python 降级到3.6终极解决方案
2020/02/06 Python
Python对Tornado请求与响应的数据处理
2020/02/12 Python
Python+Django+MySQL实现基于Web版的增删改查的示例代码
2020/05/13 Python
Pyinstaller加密打包应用的示例代码
2020/06/11 Python
python 统计list中各个元素出现的次数的几种方法
2021/02/20 Python
美国Randolph太阳镜官网：美国制造的飞行员太阳镜和射击眼镜
2018/06/15 全球购物
英国婚礼商城：Wedding Mall
2019/11/02 全球购物
请写一个C函数，若处理器是Big_endian的，则返回0；若是Little_endian的，则返回1
2015/07/16 面试题
财务助理岗位职责
2013/11/10 职场文书
检察机关个人对照检查材料
2014/09/15 职场文书
领导干部群众路线对照检查材料
2014/11/05 职场文书
2014年财务科工作总结
2014/11/11 职场文书
幼儿园庆六一主持词
2015/06/30 职场文书