knockoutjs模板实现树形结构列表

数据结构

/*数据*/var ko_vue_data=[ { name: '总能耗，number:'0 '，energyone: 14410，energytwo: 1230，energythree: 1230，Huan rate :-36.8，tongRatio: 148.5，child: [ { name: '租户电耗，number:'1 '，energyone: 14410，energytwo: 1230，energythree: 1230，Huan rate :-36.8，tongRatio: 148.5，child: [] }，{ name: '公共用电，number:'2 '，energyone: 14410，energytwo: 1230，energythree: 1230，Huan rate :-36.8，tongRatio: 148.5，child: [ { name: '暖通空调，number:'2.1 '，energyone: 14410，energytwo: 1230，energythree: 1230，Huan rati :-36.8，tongRatio: 148.5，child: [ { name: '冷站，number:'2.1.1 '，energyone: 14410，energytwo: 1230，energythree: 1230，Huan rati :-36.8，tongRatio: 148.5，child: [ { name: '冷水机组，number:'2.1.1.1 '，energyone: 14410，energytwo: 1230，energythree: 1230，huangrati :-36.8，tongRatio: 148.5，child :[]} }，{ name: '热力站，number: '2.1.2 '，energyone: 14410，energytwo: 1230，energythree: 1230，Huan rati :-36.8，tongRatio: 148.5，child :[]}]}]}]；效果图

之前已经写过用某视频剪辑软件实现图上效果的方法，此篇为用淘汰赛实现上图效果的方法，同样通过模板将数据绑定到页面。

模板代码

脚本类型=' text/html ' id=' ko-temp ' div class=' tem ' div class=' tem-p ' div data-bind=' event : { click : $ root。toggle click } ' I data-bind=' style : { ' visibility ' : number！=0?'visible':'hidden'}，text : number '/ispan data-bind=' text : name '/span/div！-绑定数据- divspan数据-绑定=' text : energy yone '/span/div span数据-绑定=' text : energy two '/span/div span数据-绑定=' text : energy three '/span/div！-绑定同学们，使数值显示出区分-div span data-bind=' CSS : { is green : Huan ratio 0，isred:huanRatio100 }，text : Huan ratio " % "/span/div span data-bind=' CSS : { is green : tong ratio 0，isred:tongRatio100 }，text : tong ratio " % "/span/div/div！-ko如果：是folder-div class=' tem-c ' data-bind=' template : { name : ' ko-temp '，foreach: child}' /div！-/ko-/div/脚本请对比之前一篇某视频剪辑软件的方法，了解两种方式模板绑定方式的不同。

模板写完，在页面上使用模板。

超文本标记语言代码

div class=' component-div ' data-bind=' template : { name : ' ko-temp '，foreach : ko _ vue _ data()} '/DivJavaScript代码

/*数据*/var ko_vue_data=[ { name: '总能耗，number:'0 '，energyone: 14410，energytwo: 1230，energythree: 1230，Huan rate :-36.8，tongRatio: 148.5，child: [ { name: '租户电耗，number:'1 '，energyone: 14410，energytwo: 1230，energythree: 1230，Huan rate :-36.8，tongRatio: 148.5，child: [] }，{ name: '公共用电，number:'2 '，energyone: 14410，energytwo: 1230，energythree: 1230，Huan rate :-36.8，tongRatio: 148.5，child: [ { name: '暖通空调，number:'2.1 '，energyone: 14410，energytwo: 1230，energythree: 1230，Huan rati :-36.8，tongRatio: 148.5，child: [ { name: '冷站，number:'2.1.1 '，energyone: 14410，energytwo: 1230，energythree: 1230，Huan rati :-36.8，tongRatio: 148.5，child: [ { name: '冷水机组，number:'2.1.1.1 '，energyone: 14410，energytwo: 1230，energythree: 1230，huangrati :-36.8，tongRatio: 148.5，child :[]} }，{ name: '热力站，number: '2.1.2 '，energyone: 14410，energytwo: 1230，energythree: 1230，Huan rati :-36.8，tongRatio: 148.5，child :[]}]}]}]；函数{ for(var I=0；idst . lengthi){ var temp=dst[I]；在…之时IsFold=ko。可观察的(真实的)；//默认展开for(var j=0；jtemp。孩子。长度；j){ AddAttribute(temp。儿童)；} } } AddAttribute(ko _ vue _ data)；/*视图模型*/function viewModel(){ var self=this；自我。ko _ vue _ data=ko。observablearray(ko _ vue _ data)；自我。toggleclick=function(event){//展开折叠效果窗口事件？窗户。事件。cancelubble=true :事件。stopperpagation()；var IsFolder=事件。IsFolder()；if(IsFolder){ event。IsFolder(false)；} else { event。IsFolder(真)；} } } ko。applybindings(new viewModel())；钢性铸铁样式同之前一篇某视频剪辑软件的一致，在这里就不在赘述，如有需要可查看之前一篇。到此两种方式算是全部写完，在报表多的页面，对于以上代码，稍加修改即可复用，绑定数据非常方便。

总结

以上所述是小编给大家介绍的击倒对手模板实现树形结构列表，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！