.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文件的数据，在实际的交互中可根据自己输入的名称去请求后台对应的数据即可）
