首页
所有分类
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 相关文章推荐
利用jquery的获取JS文件中的字符串内容
Feb 14 Javascript
jQuery中Dom的基本操作小结
Jan 23 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
Mar 19 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
Sep 10 Javascript
详解Vue 非父子组件通信方法（非Vuex）
May 24 Javascript
面包屑导航详解
Dec 07 Javascript
详解js类型判断
May 22 Javascript
Taro集成Redux快速上手的方法示例
Jun 21 Javascript
微信小程序dom操作的替代思路实例分析
Dec 06 Javascript
JavaScript中this用法学习笔记
Mar 17 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
Apr 09 Javascript
vue+iview使用树形控件的具体使用
Nov 02 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
redo log(1) binlog(2) 优化(1) 写入策略(1) 存储过程(3) LOGO(1) 增删改查(2) MIME(1) 抖音(1) 爬虫(2)
You might like
如何实现给定日期的若干天以后的日期
2006/10/09 PHP
请php正则走开
2008/03/15 PHP
php set_time_limit(0) 设置程序执行时间的函数
2010/05/26 PHP
php中static静态变量的使用方法详解
2010/06/04 PHP
开启PHP的伪静态模式
2015/12/31 PHP
laravel5创建service provider和facade的方法详解
2016/07/26 PHP
PHP实现微信JS-SDK接口选择相册及拍照并上传的方法
2016/12/05 PHP
PHP实现基于回溯法求解迷宫问题的方法详解
2017/08/17 PHP
判断页面是关闭还是刷新的js代码
2007/01/28 Javascript
Flash对联广告的关闭按钮讨论
2007/01/30 Javascript
javaScript call 函数的用法说明
2010/04/09 Javascript
ajax处理php返回json数据的实例代码
2013/01/24 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
2014/06/23 Javascript
Vue原理剖析 实现双向绑定MVVM
2017/05/03 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
2017/08/24 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
2017/11/23 Javascript
jQuery实现的记住帐号密码功能完整示例
2019/08/03 jQuery
antd多选下拉框一行展示的实现方式
2020/10/31 Javascript
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS OG
2018/03/30 DOTA
web.py获取上传文件名的正确方法
2014/08/26 Python
Python中使用strip()方法删除字符串中空格的教程
2015/05/20 Python
Python3.6使用tesseract-ocr的正确方法
2018/10/17 Python
基于Python2、Python3中reload()的不同用法介绍
2019/08/12 Python
PyCharm 2020.2 安装详细教程
2020/09/25 Python
详解用python -m http.server搭一个简易的本地局域网
2020/09/24 Python
python实现跨年表白神器--你值得拥有
2021/01/04 Python
深入理解Python变量的数据类型和存储
2021/02/01 Python
Flask中jinja2的继承实现方法及实例
2021/03/03 Python
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
2016/02/27 HTML / CSS
英国Office鞋店德国网站：在线购买鞋子、靴子和运动鞋
2018/12/19 全球购物
真正的英国宝藏：Mappin & Webb
2019/05/05 全球购物
META-INF文件夹中的MANIFEST.MF的作用
2016/06/21 面试题
超市业务员岗位职责
2013/12/05 职场文书
品质主管岗位职责
2014/03/16 职场文书
社区关爱留守儿童活动方案
2014/08/22 职场文书
毕业生评语大全
2015/01/04 职场文书