knockoutjs模板实现树形结构列表
数据结构
1 /*数据*/ 2 var ko_vue_data=[ 3 { 4 name: "总能耗", 5 number:"0", 6 energyone: 14410, 7 energytwo: 1230, 8 energythree: 1230, 9 huanRatio: -36.8, 10 tongRatio: 148.5, 11 child: [ 12 { 13 name: "租户电耗", 14 number:"1", 15 energyone: 14410, 16 energytwo: 1230, 17 energythree: 1230, 18 huanRatio: -36.8, 19 tongRatio: 148.5, 20 child: [] 21 }, 22 { 23 name: "公共用电", 24 number:"2", 25 energyone: 14410, 26 energytwo: 1230, 27 energythree: 1230, 28 huanRatio: -36.8, 29 tongRatio: 148.5, 30 child: [ 31 { 32 name: "暖通空调", 33 number:"2.1", 34 energyone: 14410, 35 energytwo: 1230, 36 energythree: 1230, 37 huanRatio: -36.8, 38 tongRatio: 148.5, 39 child: [ 40 { 41 name: "冷站", 42 number:"2.1.1", 43 energyone: 14410, 44 energytwo: 1230, 45 energythree: 1230, 46 huanRatio: -36.8, 47 tongRatio: 148.5, 48 child: [ 49 { 50 name: "冷水机组", 51 number:"2.1.1.1", 52 energyone: 14410, 53 energytwo: 1230, 54 energythree: 1230, 55 huanRatio: -36.8, 56 tongRatio: 148.5, 57 child: [] 58 } 59 ] 60 }, 61 { 62 name: "热力站", 63 number: "2.1.2", 64 energyone: 14410, 65 energytwo: 1230, 66 energythree: 1230, 67 huanRatio: -36.8, 68 tongRatio: 148.5, 69 child: [] 70 } 71 ] 72 } 73 ] 74 } 75 ] 76 } 77 ];
效果图
之前已经写过用Vue实现图上效果的方法，此篇为用knockout.js实现上图效果的方法，同样通过模板将数据绑定到页面。
模板代码
1 <script type="text/html" id="ko-temp"> 2 <div class="tem"> 3 <div class="tem-p" > 4 <div data-bind="event:{click:$root.toggleClick}"><i data-bind="style:{'visibility':number!=0?'visible':'hidden'},text:number"></i><span data-bind="text:name"></span></div> 5 <!--绑定数据--> 6 <div><span data-bind="text:energyone"></span></div> 7 <div><span data-bind="text:energytwo"></span></div> 8 <div><span data-bind="text:energythree"></span></div> 9 <!--绑定class，使数值显示出区分--> 10 <div><span data-bind="css:{isgreen:huanRatio<0,isred:huanRatio>100},text:huanRatio+'%'"></span></div> 11 <div><span data-bind="css:{isgreen:tongRatio<0,isred:tongRatio>100},text:tongRatio+'%'"></span></div> 12 </div> 13 <!--ko if:isFolder--> 14 <div class="tem-c" data-bind="template:{name:'ko-temp',foreach: child}" ></div> 15 <!--/ko--> 16 </div> 17 </script>
请对比之前一篇Vue的方法，了解两种方式模板绑定方式的不同。
模板写完，在页面上使用模板。
html代码
1 <div class="component-div" data-bind="template:{name:'ko-temp',foreach: ko_vue_data()}"></div>
JavaScript代码
1 /*数据*/ 2 var ko_vue_data=[ 3 { 4 name: "总能耗", 5 number:"0", 6 energyone: 14410, 7 energytwo: 1230, 8 energythree: 1230, 9 huanRatio: -36.8, 10 tongRatio: 148.5, 11 child: [ 12 { 13 name: "租户电耗", 14 number:"1", 15 energyone: 14410, 16 energytwo: 1230, 17 energythree: 1230, 18 huanRatio: -36.8, 19 tongRatio: 148.5, 20 child: [] 21 }, 22 { 23 name: "公共用电", 24 number:"2", 25 energyone: 14410, 26 energytwo: 1230, 27 energythree: 1230, 28 huanRatio: -36.8, 29 tongRatio: 148.5, 30 child: [ 31 { 32 name: "暖通空调", 33 number:"2.1", 34 energyone: 14410, 35 energytwo: 1230, 36 energythree: 1230, 37 huanRatio: -36.8, 38 tongRatio: 148.5, 39 child: [ 40 { 41 name: "冷站", 42 number:"2.1.1", 43 energyone: 14410, 44 energytwo: 1230, 45 energythree: 1230, 46 huanRatio: -36.8, 47 tongRatio: 148.5, 48 child: [ 49 { 50 name: "冷水机组", 51 number:"2.1.1.1", 52 energyone: 14410, 53 energytwo: 1230, 54 energythree: 1230, 55 huanRatio: -36.8, 56 tongRatio: 148.5, 57 child: [] 58 } 59 ] 60 }, 61 { 62 name: "热力站", 63 number: "2.1.2", 64 energyone: 14410, 65 energytwo: 1230, 66 energythree: 1230, 67 huanRatio: -36.8, 68 tongRatio: 148.5, 69 child: [] 70 } 71 ] 72 } 73 ] 74 } 75 ] 76 } 77 ]; 78 79 function addAttribute(dst){ 80 for(var i=0;i<dst.length;i++){ 81 var temp=dst[i]; 82 temp.isFolder=ko.observable(true);//默认展开 83 for(var j=0;j<temp.child.length;j++){ 84 addAttribute(temp.child); 85 } 86 } 87 } 88 addAttribute(ko_vue_data); 89 /*视图模型*/ 90 function viewModel() { 91 var self=this; 92 self.ko_vue_data=ko.observableArray(ko_vue_data); 93 self.toggleClick=function (event) {//展开折叠效果 94 window.event? window.event.cancelBubble = true : event.stopPropagation(); 95 var isFolder=event.isFolder(); 96 if(isFolder){ 97 event.isFolder(false); 98 }else { 99 event.isFolder(true); 100 } 101 } 102 } 103 ko.applyBindings(new viewModel());
css样式同之前一篇Vue的一致，在这里就不在赘述，如有需要可查看之前一篇。到此两种方式算是全部写完，在报表多的页面，对于以上代码，稍加修改即可复用，绑定数据非常方便。
希望对你有所帮助，欢迎更好建议，谢谢。
