knockoutjs模板实现树形结构列表


Posted in Javascript onJuly 31, 2017

数据结构

/*数据*/
 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模板实现树形结构列表,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JQuery Study Notes 学习笔记(一)
Aug 04 Javascript
jquery 插件学习(五)
Aug 06 Javascript
js 获取radio按钮值的实例
Aug 17 Javascript
JS中如何设置readOnly的值
Dec 25 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
Jun 06 Javascript
jQuery实现给页面换肤的方法
May 30 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
Sep 27 Javascript
Angular的模块化(代码分享)
Dec 26 Javascript
JS实现仿百度文库评分功能
Jan 12 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
Jun 07 Javascript
JS实现json的序列化和反序列化功能示例
Jun 13 Javascript
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
本地存储localStorage用法详解
Jul 31 #Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
Jul 31 #Javascript
ES6新特性:使用export和import实现模块化详解
Jul 31 #Javascript
node koa2实现上传图片并且同步上传到七牛云存储
Jul 31 #Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
Jul 31 #Javascript
详解React中的组件通信问题
Jul 31 #Javascript
Angular.js前台传list数组由后台spring MVC接收数组示例代码
Jul 31 #Javascript
You might like
短波问题解答
2021/02/28 无线电
详解Laravel视图间共享数据与视图Composer
2016/08/04 PHP
浅谈php中的访问修饰符private、protected、public的作用范围
2016/11/20 PHP
Laravel框架执行原生SQL语句及使用paginate分页的方法
2018/08/17 PHP
php+js实现的无刷新下载文件功能示例
2019/08/23 PHP
jQuery 表单验证扩展(三)
2010/10/20 Javascript
基于jquery的时间段实现代码
2012/08/02 Javascript
SOSO地图JS画出标注和中心点以html形式运行
2013/08/09 Javascript
js实现俄罗斯方块小游戏分享
2014/01/31 Javascript
Node.js开源应用框架HapiJS介绍
2015/01/14 Javascript
JQuery实现样式设置、追加、移除与切换的方法
2015/06/11 Javascript
JavaScript实现页面跳转的几种常用方式
2015/11/28 Javascript
jQuery四种选择器使用及示例
2016/06/05 Javascript
最好用的Bootstrap fileinput.js文件上传组件
2016/12/12 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
2017/01/01 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
2017/02/09 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
2017/10/09 Javascript
Vue项目添加动态浏览器头部title的方法
2018/07/11 Javascript
微信小程序实现授权登录
2019/05/15 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
2020/06/05 Javascript
python制作最美应用的爬虫
2015/10/28 Python
深入浅出分析Python装饰器用法
2017/07/28 Python
Python删除Java源文件中全部注释的实现方法
2017/08/30 Python
Python实现决策树C4.5算法的示例
2018/05/30 Python
浅谈Pycharm调用同级目录下的py脚本bug
2018/12/03 Python
详解numpy1.19.4与python3.9版本冲突解决
2020/12/15 Python
深入理解Python变量的数据类型和存储
2021/02/01 Python
Python tkinter实现日期选择器
2021/02/22 Python
使用postMessage让 iframe自适应高度的方法示例
2019/10/08 HTML / CSS
木工主管岗位职责
2013/12/08 职场文书
法人授权委托书范本
2014/04/04 职场文书
党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
2015年普法依法治理工作总结
2015/05/26 职场文书
费城故事观后感
2015/06/10 职场文书
Python基础之操作MySQL数据库
2021/05/06 Python
PostgreSQL 插入INSERT、删除DELETE、更新UPDATE、事务transaction
2022/04/12 PostgreSQL