DDR爱好者之家 Design By 杰米
本文介绍了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="/UploadFiles/2021-04-02/hide.png">
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文件的数据，在实际的交互中可根据自己输入的名称去请求后台对应的数据即可）
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年11月27日
2024年11月27日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]