首页
所有分类
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 相关文章推荐
JS动画效果代码3
Apr 03 Javascript
利用Ext Js生成动态树实例代码
Sep 08 Javascript
用Javascript 获取页面元素的位置的代码
Sep 25 Javascript
精通Javascript系列之数据类型 字符串
Jun 08 Javascript
JavaScript插入动态样式实现代码
Feb 22 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
Nov 10 Javascript
jQuery实现列表的全选功能
Mar 18 Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
Aug 06 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
Jun 29 Javascript
layui多iframe页面控制定时器运行的方法
Sep 05 Javascript
vue实现公告栏文字上下滚动效果的示例代码
Jun 16 Javascript
js实现页面导航层级指示效果
Aug 25 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
Telnet(1) 防盗链(1) 负载均衡(6) 动静分离(1) 生成缩略图(1) https(7) reload(1) 反向代理(2) http(6) Windows server 2016(6)
You might like
解析用PHP实现var_export的详细介绍
2013/06/20 PHP
使用php语句将数据库*.sql文件导入数据库
2014/05/05 PHP
php实现求相对时间函数
2015/06/15 PHP
简单的自定义php模板引擎
2016/08/26 PHP
表头固定(利用jquery实现原理介绍)
2012/11/08 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
2013/04/26 Javascript
jQuery实现放大镜效果实例代码
2016/03/17 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
2016/05/16 Javascript
jQuery Mobile动态刷新页面样式的实现方法
2016/05/28 Javascript
Javascript实现跑马灯效果的简单实例
2016/05/31 Javascript
深入理解javascript中的 “this”
2017/01/17 Javascript
setTimeout函数的神奇使用
2017/02/26 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
2017/03/25 Javascript
vue瀑布流组件实现上拉加载更多
2020/03/10 Javascript
[01:00:35]2018DOTA2亚洲邀请赛3月30日B组 EffcetVSMineski
2018/03/31 DOTA
Python查找相似单词的方法
2015/03/05 Python
5个很好的Python面试题问题答案及分析
2018/01/19 Python
Python操作MySQL模拟银行转账
2018/03/12 Python
Python中的二维数组实例(list与numpy.array)
2018/04/13 Python
简单了解python高阶函数map/reduce
2019/06/28 Python
详解Python图像处理库Pillow常用使用方法
2019/09/02 Python
python 动态迁移solr数据过程解析
2019/09/04 Python
Django多数据库联用实现方法解析
2020/11/12 Python
Python爬虫设置Cookie解决网站拦截并爬取蚂蚁短租的问题
2021/02/22 Python
HTML5实现简单图片上传所遇到的问题及解决办法
2016/01/20 HTML / CSS
俄罗斯优惠券网站：BIGLION
2017/05/21 全球购物
英国领先的在线高尔夫商店：Scottsdale Golf
2019/08/26 全球购物
Ray-Ban雷朋太阳眼镜英国官网：Ray-Ban UK
2019/11/23 全球购物
就业推荐自我鉴定
2013/10/06 职场文书
导游个人求职信范文
2014/03/23 职场文书
检举信的格式及范文
2014/04/04 职场文书
班级学习计划书
2014/04/27 职场文书
环保倡议书格式范文
2014/05/14 职场文书
班子四风对照检查材料
2014/08/21 职场文书
《半截蜡烛》教学反思
2016/02/19 职场文书
python神经网络学习 使用Keras进行简单分类
2022/05/04 Python