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)=>{
    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"}
]

树组件运行后的结果:

搜索结果:(这里是请求了一个json文件的数据,在实际的交互中可根据自己输入的名称去请求后台对应的数据即可)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们

(0)

相关推荐

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

    本文介绍了ReactJs实现树形结构的数据显示的组件的示例,分享给大家,具体如下: 1.该组件树形显示数据 2.组件中数据的请求方式为fetch方式 3.点击对应的数据前面的小三角,fetch请求改数据下对应的子数据,并展开该节点. 4.将该组件的js.less文件放到kpiTree目录下,在kpiTree目录下创建images目录将组件需要的图片放入给目录,在kpiTree目录下创建json文件夹将该组件需要的json文件放入改文件夹中,组件便可正常运行. kpiTree.js文件 /** *

  • vue树形结构获取键值的方法示例

    本文介绍了vue树形结构获取键值的方法示例,分享给大家,具体如下: 把键值文件放入 引入控件 import { getTypeValue } from '@/api/dict/dictValue/index'; 点击搜索,打开弹窗 <el-form-item label="机构名称" placeholder="请选择机构" prop="orgName"> <el-input readonly type="text&qu

  • 树形结构的3中搜索方式示例分享

    复制代码 代码如下: /**树的3中常见搜索方式1.二叉树方式(每一层只有0和1)2.满m叉树(每一层都有0 到m - 1)3.子集树,也称为全排列树*/#include <iostream>#include <cstdio>#include <algorithm>#include <cstring>#include <string> using namespace std; const int M = 20; int n, m;int ans[

  • Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)

    数据结构为数组中包含对象--树形结构,用Vue组件的写法实现以下的效果: 树形列表,缩进显示层级,第5级数据加底色,数据样式显色,点击展开折叠数据.本文为用Vue实现方式,另有一篇为用knockout.js的实现方法. html代码 <div id="table-component-div"> <table-component v-for="item in data1" v-bind:list="item"></ta

  • vue开发树形结构组件(组件递归)

    本文实例为大家分享了vue开发树形结构组件的具体代码,供大家参考,具体内容如下 需求 一个页面,要显示商品分类,同时每个分类下面还拥有若干子类,子类也可以有子类. 要实现全选单选,子类被逐个全选父类也要标记选中. 第一反应就是树形结构,和递归调用.曾经在做WPF时记得有现成的组件,也学着写过对应的后台.这次我要自己写一个前端的组件了. 这只是我自己花了点时间写的一个vue组件,尚可优化及拓展.仅此与大家分享一下. 效果 实现 <template> <div id="TreeMe

  • vue开发树形结构组件(组件递归)

    本文实例为大家分享了vue开发树形结构组件的具体代码,供大家参考,具体内容如下 需求 一个页面,要显示商品分类,同时每个分类下面还拥有若干子类,子类也可以有子类. 要实现全选单选,子类被逐个全选父类也要标记选中. 第一反应就是树形结构,和递归调用.曾经在做WPF时记得有现成的组件,也学着写过对应的后台.这次我要自己写一个前端的组件了. 这只是我自己花了点时间写的一个vue组件,尚可优化及拓展.仅此与大家分享一下. 效果 实现 <template> <div id="TreeMe

  • JavaScript树形组件实现无限级树形结构

    目录 ​一.问题研究的背景和意义​ ​二.详细设计方案​ ​三.源代码实现(Java版)​ ​四.思考与总结​ (1)XML层次结构 (2)UL-LI层次结构 (3)TABLE层次结构 ​一.问题研究的背景和意义​ 在Web应用程序开发领域,基于Ajax技术的JavaScript树形组件已经被广泛使用,它用来在Html页面上展现具有层次结构的数据项.目前市场上常见的JavaScript框架及组件库中均包含自己的树形组件,例如jQuery.Ext JS等,还有一些独立的树形组件,例如dhtmlxT

  • vue递归组件实现树形结构

    本文实例为大家分享了vue递归组件实现树形结构,供大家参考,具体内容如下 一.递归组件 什么是递归组件?简单来说就是在组件中内使用组件本身.函数自己调用自己.很多情况下我们呢刷数据的时候,不知道到底这个数据结构是有多少层,那么这个时候我们就用到了递归来实现. 二.先用for来遍历: 父组件中: <template>   <div class="home">        <tree :title="list.name" :list=&q

  • Angular中实现树形结构视图实例代码

    近两年当中使用Angular开发过很多项目,其中也涉及到一些树形结构视图的显示,最近的在项目中封装了大量的组件,一些组件也有树形结构的展示,所以写出来总结一下. 相信大家都知道,树结构最典型的例子就是目录结构了吧,一个目录可以包含很多子目录,子目录又可以包含若干个子孙目录,那咱们今天就以目录结构为例来说明一下Angular中树结构的实现. 首先,我们希望封装一个组件,用于显示整个目录的树形机构,代码如下: <!DOCTYPE html> <html ng-app="treeDe

  • 开发Vue树形组件的示例代码

    本文介绍了Vue树形组件的示例代码,分享给大家,具体如下: 使用SemanticUI和vue做一个menubar组件,实现方法大概是这样的: <template> <div class="ui menu"> <template v-for="item in leftItems"> <a " v-if="!item.children" @click="item.click"&g

随机推荐