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拖拽并简单保存的实现代码
Nov 28 Javascript
jQuery easyui datagrid动态查询数据实例讲解
Feb 26 Javascript
向当前style sheet中插入一个新的style实现方法
Apr 01 Javascript
基于js disabled=&quot;false&quot;不起作用的解决办法
Jun 26 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
Aug 25 Javascript
jQuery图片特效插件Revealing实现拉伸放大
Apr 22 Javascript
使用JavaScript的AngularJS库编写hello world的方法
Jun 23 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
Feb 22 Javascript
jQuery操作css样式
May 15 jQuery
react以create-react-app为基础创建项目
Mar 14 Javascript
微信小程序 wxParse插件显示视频问题
Sep 27 Javascript
详解Vscode中使用Eslint终极配置大全
Nov 08 Javascript
本地存储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
smarty模板引擎中自定义函数的方法
2015/01/22 PHP
PHP中判断文件存在使用is_file还是file_exists?
2015/04/03 PHP
PHP信号处理机制的操作代码讲解
2019/04/19 PHP
thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果详解
2019/07/15 PHP
JQuery 简便实现页面元素数据验证功能
2007/03/24 Javascript
详谈jQuery中的this和$(this)
2014/11/13 Javascript
ES6的新特性概览
2016/03/10 Javascript
javascript对象的相关操作小结
2016/05/16 Javascript
深入理解JavaScript中为什么string可以拥有方法
2016/05/24 Javascript
基于JavaScript定位当前的地理位置
2017/04/11 Javascript
Bootstrap输入框组件使用详解
2017/06/09 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
2017/06/27 Javascript
ES6学习教程之对象字面量详解
2017/10/09 Javascript
使用ef6创建oracle数据库的实体模型遇到的问题及解决方案
2017/11/09 Javascript
vue做移动端适配最佳解决方案(亲测有效)
2018/09/04 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
2019/07/19 Javascript
[01:03:31]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第二局
2016/02/26 DOTA
[02:41]辉夜杯现场一家三口 “我爸玩风行 我玩血魔”
2015/12/27 DOTA
python学习笔记:字典的使用示例详解
2014/06/13 Python
Python实现队列的方法
2015/05/26 Python
Python实现更改图片尺寸大小的方法(基于Pillow包)
2016/09/19 Python
Python实现的文本编辑器功能示例
2017/06/30 Python
Django 跨域请求处理的示例代码
2018/05/02 Python
pandas 快速处理 date_time 日期格式方法
2018/11/12 Python
详解使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件
2019/08/23 Python
python实现从尾到头打印单链表操作示例
2020/02/22 Python
Python安装OpenCV的示例代码
2020/03/05 Python
有趣的睡衣和礼物:LazyOne
2019/11/27 全球购物
Conforama西班牙:您的家具、装饰和电器商店
2020/02/21 全球购物
Huda Beauty官方商店:化妆和美容产品
2020/09/05 全球购物
怎样从/向数据文件读/写结构
2014/11/23 面试题
销售员自我评价怎么写
2013/09/19 职场文书
中专毕业生个人职业生涯规划
2014/02/19 职场文书
《狮子和兔子》教学反思
2014/03/02 职场文书
2014年驻村干部工作总结
2014/11/17 职场文书
解析MySQL binlog
2021/06/11 MySQL