cyTree

Tree + AngularJS

Code licensed under MIT License.

This plugin allows you create tree(treeview) easily and you can focus on your data.

Compatibility

Work with modern browsers(Chrome/Firefox/Safari/IE9+).

The tree uses custom icons(pure css), and the icons depend on CSS3.
It's great if you use bootstap3. If not, set the box-sizing to border-box.

Note: You can custom the template or custom the icon style to avoid problems above.

Usage

install via bower

The package is registered to bower, so you can install via bower:

bower install cytree

install manually

Download and include correct files in your webpage.(include dist/cy-tree.js and dist/cy-tree.css).
Add dependency to your angular project.
Use cyTree and treeData directives to generate tree/treeview.

<div class="cy-tree with-line" cy-tree='true' tree-data="treeData" tree-label-flag="name" tree-child-flag="list" debug-mode='true'></div>

Demo

clone this project
run command below and you can see demo(http://0.0.0.0:9080/)

npm install && bower install
grunt serve

Tree images:

You may run into the watch ENOSPC error due to Inotify Watches Limit. If so, run command echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p.

More demos are coming.

Release History

2015-06-10 v0.2.0 add collapse and select event

2015-04-02 v0.1.0 v0.1.0