knockoutjs模板实现树形结构列表

前端之家收集整理的这篇文章主要介绍了knockoutjs模板实现树形结构列表前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

数据结构

效果

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

模板代码

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

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

HTML代码

JavaScript代码

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模板实现树形结构列表。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的JavaScript相关文章