首页
所有分类
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 模式设计之工厂模式学习心得
Apr 27 Javascript
10个基于Jquery的幻灯片插件教程
Oct 29 Javascript
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
Jul 31 Javascript
基于jquery自己写tab滑动门(通用版)
Oct 30 Javascript
基于jquery异步传输json数据格式实例代码
Nov 23 Javascript
Bootstrap每天必学之表单
Nov 23 Javascript
js 获取范围内的随机数实例代码
Aug 02 Javascript
ionic实现滑动的三种方式
Aug 27 Javascript
jQuery查找dom的几种方法效率详解
May 17 jQuery
node.js中fs文件系统目录操作与文件信息操作
Feb 24 Javascript
js核心基础之构造函数constructor用法实例分析
May 11 Javascript
layui监听工具栏的实例(操作列表按钮)
Sep 10 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
DBLink(1) IIS7(1) 复读(1) DNS服务器(2) 界面设计(1) .NET Framework(2) 事务并发(1) GZIP(2) FTP服务器(1) 磁盘分区(1)
You might like
re0第二季蕾姆被制作组打入冷宫！艾米莉亚女主扶正，原因唏嘘
2020/04/02 日漫
PHP 模拟$_PUT实现代码
2010/03/15 PHP
PHP获取网址的顶级域名函数代码
2012/09/24 PHP
php 截取utf-8格式的字符串实例代码
2016/10/30 PHP
JavaScript中number转换成string介绍
2014/12/31 Javascript
深入浅出分析javaScript中this用法
2015/05/09 Javascript
jQuery实现文本展开收缩特效
2015/06/03 Javascript
简单的js计算器实现
2016/10/26 Javascript
JavaScript仿微信打飞机游戏
2020/07/05 Javascript
Async Validator 异步验证使用说明
2017/07/03 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
2018/05/07 Javascript
vue系列之requireJs中引入vue-router的方法
2018/07/18 Javascript
js实现文件上传功能 后台使用MultipartFile
2018/09/08 Javascript
javascript中undefined的本质解析
2019/07/31 Javascript
vue使用微信JS-SDK实现分享功能
2019/08/23 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
2020/07/21 Javascript
[01:36:57]【09DOTA2第一视角】小骷髅
2014/04/16 DOTA
在Python中移动目录结构的方法
2016/01/31 Python
Python新手入门最容易犯的错误总结
2017/04/24 Python
Python中enumerate函数代码解析
2017/10/31 Python
利用Python批量提取Win10锁屏壁纸实战教程
2018/03/27 Python
pandas中去除指定字符的实例
2018/05/18 Python
python 用lambda函数替换for循环的方法
2018/06/09 Python
Python django使用多进程连接mysql错误的解决方法
2018/10/08 Python
[原创]Python入门教程2. 字符串基本操作【运算、格式化输出、常用函数】
2018/10/29 Python
Python3实现mysql连接和数据框的形成(实例代码)
2020/01/17 Python
python如何导出微信公众号文章方法详解
2020/08/31 Python
Pycharm添加虚拟解释器报错问题解决方案
2020/10/13 Python
python爬取”顶点小说网“《纯阳剑尊》的示例代码
2020/10/16 Python
超市实习总结自我鉴定
2013/09/19 职场文书
八年级美术教学反思
2014/02/02 职场文书
你的创业计划书怎样才能打动风投
2014/02/06 职场文书
办公室综合文员岗位职责范本
2014/02/13 职场文书
2014年关工委工作总结
2014/11/17 职场文书
感恩教师节主题班会
2015/08/12 职场文书
Win11怎么修改电源模式？Win11修改电源模式的方法
2022/04/05 数码科技