angular-ivh-treeview是一个可以呈现树形结构的Angularjs第三方插件,最近一个项目中需要呈现一个目录的树形结构,就发现了这个插件,使用下来感觉功能还是蛮齐备的,所以在此记录下使用的一些心得。
GitHub地址: https://github.com/ivantage/angular-ivh-treeview
插件主页: http://ivantage.github.io/angular-ivh-treeview
其实Github上的使用说明已经很详尽,我在这里也不会重复的每个功能的使用都讲一遍,只是以一个使用的实例来说明如何使用它。
安装
在网站上下载Release版本后,解压缩完毕后,添加到项目的js相关的目录
然后在页面内加入css和js的引用
在需要使用树形结构的页面中插入如下的标签
在需要使用树形结构的Controller中添加依赖
Ok,这样ivhtreeview基本就配置完毕了。
树形结构数据准备
前端的架子搭起来了,我们就需要在后端准备数据了。我们以生成一个Git的代码目录结构为例。我们需要遍历某个目录,最先想到的肯定是递归遍历,如下代码
这样我们就得到了一个FileInfo类型的对象,它影射的Json格式大概就这个样子:
最后,只要把后台生成的数据返回给前端显示就可以了。