knockoutjs模板实现树形结构列表

数据结构

/*数据*/
 var ko_vue_data=[
  {
   name: "总能耗",
   number:"0",
   energyone: 14410,
   energytwo: 1230,
   energythree: 1230,
   huanratio: -36.8,
   tongratio: 148.5,
   child: [
    {
     name: "租户电耗",
     number:"1",
     energyone: 14410,
     energytwo: 1230,
     energythree: 1230,
     huanratio: -36.8,
     tongratio: 148.5,
     child: []
    },
    {
     name: "公共用电",
     number:"2",
     energyone: 14410,
     energytwo: 1230,
     energythree: 1230,
     huanratio: -36.8,
     tongratio: 148.5,
     child: [
      {
       name: "暖通空调",
       number:"2.1",
       energyone: 14410,
       energytwo: 1230,
       energythree: 1230,
       huanratio: -36.8,
       tongratio: 148.5,
       child: [
        {
         name: "冷站",
         number:"2.1.1",
         energyone: 14410,
         energytwo: 1230,
         energythree: 1230,
         huanratio: -36.8,
         tongratio: 148.5,
         child: [
          {
           name: "冷水机组",
           number:"2.1.1.1",
           energyone: 14410,
           energytwo: 1230,
           energythree: 1230,
           huanratio: -36.8,
           tongratio: 148.5,
           child: []
          }
         ]
        },
        {
         name: "热力站",
         number: "2.1.2",
         energyone: 14410,
         energytwo: 1230,
         energythree: 1230,
         huanratio: -36.8,
         tongratio: 148.5,
         child: []
        }
       ]
      }
     ]
    }
   ]
  }
 ];

效果图

之前已经写过用vue实现图上效果的方法，此篇为用knockout.js实现上图效果的方法，同样通过模板将数据绑定到页面。

模板代码

<script type="text/html" id="ko-temp">
 <div class="tem">
  <div class="tem-p" >
   <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>
   <!--绑定数据-->
   <div><span data-bind="text:energyone"></span></div>
   <div><span data-bind="text:energytwo"></span></div>
   <div><span data-bind="text:energythree"></span></div>
   <!--绑定class，使数值显示出区分-->
   <div><span data-bind="css:{isgreen:huanratio<0,isred:huanratio>100},text:huanratio+'%'"></span></div>
   <div><span data-bind="css:{isgreen:tongratio<0,isred:tongratio>100},text:tongratio+'%'"></span></div>
  </div>
  <!--ko if:isfolder-->
  <div class="tem-c" data-bind="template:{name:'ko-temp',foreach: child}" ></div>
  <!--/ko-->
 </div>
</script>

请对比之前一篇vue的方法，了解两种方式模板绑定方式的不同。

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

html代码

<div class="component-div" data-bind="template:{name:'ko-temp',foreach: ko_vue_data()}"></div>

javascript代码

/*数据*/
 var ko_vue_data=[
  {
   name: "总能耗",
   number:"0",
   energyone: 14410,
   energytwo: 1230,
   energythree: 1230,
   huanratio: -36.8,
   tongratio: 148.5,
   child: [
    {
     name: "租户电耗",
     number:"1",
     energyone: 14410,
     energytwo: 1230,
     energythree: 1230,
     huanratio: -36.8,
     tongratio: 148.5,
     child: []
    },
    {
     name: "公共用电",
     number:"2",
     energyone: 14410,
     energytwo: 1230,
     energythree: 1230,
     huanratio: -36.8,
     tongratio: 148.5,
     child: [
      {
       name: "暖通空调",
       number:"2.1",
       energyone: 14410,
       energytwo: 1230,
       energythree: 1230,
       huanratio: -36.8,
       tongratio: 148.5,
       child: [
        {
         name: "冷站",
         number:"2.1.1",
         energyone: 14410,
         energytwo: 1230,
         energythree: 1230,
         huanratio: -36.8,
         tongratio: 148.5,
         child: [
          {
           name: "冷水机组",
           number:"2.1.1.1",
           energyone: 14410,
           energytwo: 1230,
           energythree: 1230,
           huanratio: -36.8,
           tongratio: 148.5,
           child: []
          }
         ]
        },
        {
         name: "热力站",
         number: "2.1.2",
         energyone: 14410,
         energytwo: 1230,
         energythree: 1230,
         huanratio: -36.8,
         tongratio: 148.5,
         child: []
        }
       ]
      }
     ]
    }
   ]
  }
 ];
 function addattribute(dst){
  for(var i=0;i<dst.length;i++){
   var temp=dst[i];
   temp.isfolder=ko.observable(true);//默认展开
   for(var j=0;j<temp.child.length;j++){
    addattribute(temp.child);
   }
  }
 }
 addattribute(ko_vue_data);
 /*视图模型*/
 function viewmodel() {
  var self=this;
  self.ko_vue_data=ko.observablearray(ko_vue_data);
  self.toggleclick=function (event) {//展开折叠效果
   window.event? window.event.cancelbubble = true : event.stoppropagation();
   var isfolder=event.isfolder();
   if(isfolder){
    event.isfolder(false);
   }else {
    event.isfolder(true);
   }
  }
 }
 ko.applybindings(new viewmodel());

css样式同之前一篇vue的一致，在这里就不在赘述，如有需要可查看之前一篇。到此两种方式算是全部写完，在报表多的页面，对于以上代码，稍加修改即可复用，绑定数据非常方便。

总结

以上所述是小编给大家介绍的knockoutjs模板实现树形结构列表，希望对大家有所帮助