# Angular IVH Treeview
[ ![Build Status][travis-img] ][travis-link]
> A treeview for AngularJS with filtering, checkbox support, custom templates,
> and more.
## Contents
- [Getting Started](#getting-started)
- [Example Usage](#example-usage)
- [Options](#options)
- [Filtering](#filtering)
- [Expanded by Default](#expanded-by-default)
- [Default Selected State](#default-selected-state)
- [Validate on Startup](#validate-on-startup)
- [Twisties](#twisties)
- [Templates and Skins](#templates-and-skins)
- [Toggle Handlers](#toggle-handlers)
- [Select/Deselect Handlers](#selectdeselect-handlers)
- [All the Options](#all-the-options)
- [Treeview Manager Service](#treeview-manager-service)
- [`ivhTreeviewMgr.select(tree, node[, opts][, isSelected])`](#ivhtreeviewmgrselecttree-node-opts-isselected)
- [`ivhTreeviewMgr.selectAll(tree[, opts][, isSelected])`](#ivhtreeviewmgrselectalltree-opts-isselected)
- [`ivhTreeviewMgr.selectEach(tree, nodes[, opts][, isSelected])`](#ivhtreeviewmgrselecteachtree-nodes-opts-isselected)
- [`ivhTreeviewMgr.deselect(tree, node[, opts])`](#ivhtreeviewmgrdeselecttree-node-opts)
- [`ivhTreeviewMgr.deselectAll(tree[, opts])`](#ivhtreeviewmgrdeselectalltree-opts)
- [`ivhTreeviewMgr.deselectEach(tree, nodes[, opts])`](#ivhtreeviewmgrdeselecteachtree-nodes-opts)
- [`ivhTreeviewMgr.expand(tree, node[, opts][, isExpanded])`](#ivhtreeviewmgrexpandtree-node-opts-isexpanded)
- [`ivhTreeviewMgr.expandRecursive(tree[, node[, opts][,isExpanded]])`](#ivhtreeviewmgrexpandrecursivetree-node-opts-isexpanded)
- [`ivhTreeviewMgr.expandTo(tree, node[, opts][, isExpanded])`](#ivhtreeviewmgrexpandtotree-node-opts-isexpanded)
- [`ivhTreeviewMgr.collapse(tree, node[, opts])`](#ivhtreeviewmgrcollapsetree-node-opts)
- [`ivhTreeviewMgr.collapseRecursive(tree[, node[, opts]])`](#ivhtreeviewmgrcollapserecursivetree-node-opts)
- [`ivhTreeviewMgr.collapseParents(tree, node[, opts])`](#ivhtreeviewmgrcollapseparentstree-node-opts)
- [`ivhTreeviewMgr.validate(tree[, opts][, bias])`](#ivhtreeviewmgrvalidatetree-opts-bias)
- [Dynamic Changes](#dynamic-changes)
- [Tree Traversal](#tree-traversal)
- [`ivhTreeviewBfs(tree[, opts][, cb])`](#ivhtreeviewbfstree-opts-cb)
- [Optimizations and Known Limitations](#optimizations-and-known-limitations)
- [Reporting Issues](#reporting-issues)
- [Contributing](#contributing)
- [Release History](#release-history)
- [License](#license)
## Getting Started
IVH Treeview can be installed with bower and npm:
```
bower install angular-ivh-treeview
# or
npm install angular-ivh-treeview
```
Once installed, include the following files in your app:
- `dist/ivh-treeview.js`
- `dist/ivh-treeview.css`
- `dist/ivh-treeview-theme-basic.css` (optional minimalist theme)
And add the `ivh.treeview` module to your main Angular module:
```javascript
angular.module('myApp', [
'ivh.treeview'
// other module dependencies...
]);
```
You're now ready to use the `ivh-treeview` directive, `ivhTreeviewMgr` service,
and `ivhTreeviewBfs` service.
## Example Usage
In your controller...
```javascript
app.controller('MyCtrl', function() {
this.bag = [{
label: 'Glasses',
value: 'glasses',
children: [{
label: 'Top Hat',
value: 'top_hat'
},{
label: 'Curly Mustache',
value: 'mustachio'
}]
}];
this.awesomeCallback = function(node, tree) {
// Do something with node or tree
};
this.otherAwesomeCallback = function(node, isSelected, tree) {
// Do soemthing with node or tree based on isSelected
}
});
```
In your view...
```html
<div ng-controller="MyCtrl as fancy">
<input type="text" ng-model="bagSearch" />
<div
ivh-treeview="fancy.bag"
ivh-treeview-filter="bagSearch">
</div>
</div>
```
## Options
IVH Treeview is pretty configurable. By default it expects your elements to have
`label` and `children` properties for node display text and child nodes
respectively. It'll also make use of a `selected` attribute to manage selected
states. If you would like to pick out nodes by ID rather than reference it'll
also use an `id` attribute. Those attributes can all be changed, for example:
```html
<div ng-controller="MyCtrl as fancy">
<div ivh-treeview="fancy.bag"
ivh-treeview-id-attribute="'uuid'"
ivh-treeview-label-attribute="'text'"
ivh-treeview-children-attribute="'items'"
ivh-treeview-selected-attribute="'isSelected'">
</div>
```
IVH Treeview attaches checkboxes to each item in your tree for a hierarchical
selection model. If you'd rather not have these checkboxes use
`ivh-treeview-use-checkboxes="false"`:
```html
<div ng-controller="MyCtrl as fancy">
<div ivh-treeview="fancy.bag"
ivh-treeview-use-checkboxes="false">
</div>
```
There's also a provider if you'd like to change the global defaults:
```javascript
app.config(function(ivhTreeviewOptionsProvider) {
ivhTreeviewOptionsProvider.set({
idAttribute: 'id',
labelAttribute: 'label',
childrenAttribute: 'children',
selectedAttribute: 'selected',
useCheckboxes: true,
expandToDepth: 0,
indeterminateAttribute: '__ivhTreeviewIndeterminate',
expandedAttribute: '__ivhTreeviewExpanded',
defaultSelectedState: true,
validate: true,
twistieExpandedTpl: '(-)',
twistieCollapsedTpl: '(+)',
twistieLeafTpl: 'o',
nodeTpl: '...'
});
});
```
Note that you can also use the `ivhTreeviewOptions` service to inspect global
options at runtime. For an explanation of each option see the comments in the
[source for ivhTreeviewOptions][trvw-opts].
```javascript
app.controller('MyCtrl', function(ivhTreeviewOptions) {
var opts = ivhTreeviewOptions();
// opts.idAttribute === 'id'
// opts.labelAttribute === 'label'
// opts.childrenAttribute === 'children'
// opts.selectedAttribute === 'selected'
// opts.useCheckboxes === true
// opts.expandToDepth === 0
// opts.indeterminateAttribute === '__ivhTreeviewIndeterminate'
// opts.expandedAttribute === '__ivhTreeviewExpanded'
// opts.defaultSelectedState === true
// opts.validate === true
// opts.twistieExpandedTpl === '(-)'
// opts.twistieCollapsedTpl === '(+)'
// opts.twistieLeafTpl === 'o'
// opts.nodeTpl =(eh)= '...'
});
```
### Filtering
We support filtering through the `ivh-treeview-filter` attribute, this value is
supplied to Angular's `filterFilter` and applied to each node individually.
IVH Treeview uses `ngHide` to hide filtered out nodes. If you would like to
customize the hide/show behavior of nodes as they are filtered in and out of
view (e.g. with `ngAnimate`) you can target elements with elements with the
`.ivh-treeview-node` class:
```css
/* with e.g. keyframe animations */
.ivh-treeview-node.ng-enter {
animation: my-enter-animation 0.5s linear;
}
.ivh-treeview-node.ng-leave {
animation: my-leave-animation 0.5s linear;
}
/* or class based animations */
.ivh-treeview-node.ng-hide {
transition: 0.5s linear all;
opacity: 0;
}
/* alternatively, just strike-through filtered out nodes */
.ivh-treeview-node.ng-hide {
display: block !important;
}
.ivh-treeview-node.ng-hide .ivh-treeview-node-label {
color: red;
text-decoration: line-through;
}
```
***Demo***: [Filtering](http://jsbin.com/zitiri/edit?html,output)
### Expanded by Default
If you want the tree to start out expanded to a certain depth use the
`ivh-treeview-expand-to-depth` attribute:
```html
<div ng-controller="MyCtrl as fancy">
<div
ivh-treeview="fancy.bag"
ivh-treeview-expand-to-depth="2"
ivh-treeview-use-checkboxes="false">
</div>
```
You can also use the `ivhTreeviewOptionsProvider` to set a global default.
If you want the tree *entirely* expanded use a depth of `-1`. Providing a depth
greater than your tree's maximum depth will cause the entire tree to be
initially expanded.
***Demo***: [Expand to depth on
load](http://jsbin.com/ruxedo/edit?html,js,output)
### Default Selected State
Whe
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
基于springboot+springcloud在线考试系统源码+数据库文件+部署文档(毕业设计).zip 主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码、该项目可以直接作为毕设使用。项目都经过严格调试,下载即用确保可以运行! 基于springboot+springcloud在线考试系统源码+数据库文件+部署文档(毕业设计).zip 主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码、该项目可以直接作为毕设使用。项目都经过严格调试,下载即用确保可以运行!基于springboot+springcloud在线考试系统源码+数据库文件+部署文档(毕业设计).zip 主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码、该项目可以直接作为毕设使用。项目都经过严格调试,下载即用确保可以运行!基于springboot+springcloud在线考试系统源码+数据库文件+部署文档(毕业设计).zip 主要针
资源推荐
资源详情
资源评论
收起资源包目录
基于springboot+springcloud在线考试系统源码+数据库文件+部署文档(毕业设计).zip (2000个子文件)
style.css 201KB
bootstrap.css 143KB
bootstrap.css 134KB
bulma.css 124KB
bootstrap.min.css 118KB
bootstrap.min.css 111KB
AdminLTE.min.css 88KB
ionicons.min.css 58KB
ionicons.css 56KB
ionicons.min.css 50KB
lib.css 48KB
font-awesome.css 37KB
font-awesome.css 34KB
datepicker3.css 33KB
font-awesome.min.css 30KB
font-awesome.min.css 30KB
angular-motion.css 26KB
bootstrap-theme.css 26KB
bootstrap-datepicker3.standalone.css 23KB
bootstrap-theme.min.css 23KB
bootstrap-datepicker3.css 22KB
bootstrap-theme.css 22KB
bootstrap-datepicker3.standalone.min.css 21KB
_all.css 21KB
angular-motion.min.css 21KB
bootstrap-datepicker3.min.css 21KB
bootstrap-theme.min.css 19KB
bootstrap-datepicker.standalone.css 18KB
select2.css 17KB
bootstrap-datepicker.css 17KB
bootstrap-datepicker.standalone.min.css 16KB
bootstrap-datepicker.min.css 15KB
_all.css 15KB
jquery.dataTables.css 15KB
select2.min.css 15KB
jquery.dataTables_themeroller.css 14KB
_all.css 14KB
_all.css 13KB
chosen.css 13KB
github-markdown.css 13KB
fade-and-slide.css 9KB
slider.css 8KB
tether-theme-arrows.css 8KB
tether-theme-arrows-dark.css 8KB
welcome.css 7KB
slide.css 7KB
fade-and-slide.min.css 7KB
daterangepicker.css 7KB
tether-theme-arrows-dark.min.css 6KB
tether-theme-arrows.min.css 6KB
slide.min.css 6KB
demo.css 6KB
dataTables.colVis.css 6KB
intro.css 5KB
flip.css 5KB
qunit.css 5KB
bootstrap-colorpicker.css 4KB
dataTables.colVis.min.css 4KB
mocha.css 4KB
flip.min.css 4KB
app.css 4KB
angular-moment-picker.min.css 4KB
bootstrap-colorpicker.min.css 4KB
dataTables.responsive.css 3KB
tooltip.css 3KB
bootstrap-timepicker.css 3KB
bootstrap3-wysihtml5.css 2KB
browser-demo.css 2KB
bootstrap-timepicker.min.css 2KB
layout.css 2KB
fade-and-scale.css 2KB
purple.css 2KB
yellow.css 2KB
orange.css 2KB
green.css 2KB
bootstrap3-wysihtml5.min.css 2KB
pink.css 2KB
blue.css 2KB
grey.css 2KB
aero.css 2KB
pace.css 2KB
red.css 2KB
line.css 2KB
collapse.css 2KB
fade.css 2KB
colors.css 2KB
abn_tree.css 2KB
fade-and-scale.min.css 2KB
pace.min.css 2KB
collapse.min.css 2KB
fade.min.css 2KB
purple.css 2KB
orange.css 2KB
yellow.css 2KB
purple.css 2KB
orange.css 2KB
yellow.css 2KB
green.css 2KB
green.css 2KB
pink.css 2KB
共 2000 条
- 1
- 2
- 3
- 4
- 5
- 6
- 20
资源评论
程序员张小妍
- 粉丝: 1w+
- 资源: 3026
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功