欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

knockoutjs模板实现树形结构列表

程序员文章站 2022-05-14 19:17:08
数据结构 /*数据*/ var ko_vue_data=[ { name: "总能耗", number:"0", energyo...

数据结构

/*数据*/
 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: []
        }
       ]
      }
     ]
    }
   ]
  }
 ];

效果图

knockoutjs模板实现树形结构列表

之前已经写过用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模板实现树形结构列表,希望对大家有所帮助