knockoutjs模板如何实现树形结构列表
小编给大家分享一下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实现上图效果的方法,同样通过模板将数据绑定到页面。
模板代码
100},text:huanRatio+'%'">
100},text:tongRatio+'%'">