Skip to content

Commit c562ee7

Browse files
thienhung1989thienhung1989
committed
## v3.0.2
 * Add function `Scope.$safeApply()`. * Fix Watch * Fix Bower.json * Fix any error angular 1.2.1. * New feature: * Filter. * Add `scope.targeting` *(boolean)*: `true` - when `dragMove` targeting *(tree-dnd over)*. * Add attribute `enableCollapse` to enable Mode `collapse node` when `dragStart`. * Next feature: * Multi select. * OrderBy data.
1 parent 00da6af commit c562ee7

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

75 files changed

+42428
-915
lines changed

‎.bowerrc‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
{
2-
"directory": "demo/bower_components"
2+
"directory": "demo/framework/vendor"
33
}

‎CHANGELOG.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,16 @@
1+
## v3.0.2
2+
* Add function `Scope.$safeApply()`.
3+
* Fix Watch
4+
* Fix Bower.json
5+
* Fix any error angular 1.2.1.
6+
* New feature:
7+
* Filter.
8+
* Add `scope.targeting` *(boolean)*: `true` - when `dragMove` targeting *(tree-dnd over)*.
9+
* Add attribute `enableCollapse` to enable Mode `collapse node` when `dragStart`.
10+
* Next feature:
11+
* Multi select.
12+
* OrderBy data.
13+
114
## v3.0.1
215
* Add `gulp`, `travis`,...
316
* `dragBorder`: allow `drag` indent if `position` of `drag` >= `border` drag.

‎README.md‎

Lines changed: 124 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,33 @@
11
# angular-tree-dnd
2+
[Angular 1.x] Display treeDnD & event DrapnDrop, field 'td' by tree.
3+
4+
##License:
5+
[![license](http://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat)](https://github.com/thienhung1989/angular-tree-dnd/blob/master/LICENSE)
26

3-
[![Join the chat at https://gitter.im/thienhung1989/angular-tree-dnd](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/thienhung1989/angular-tree-dnd?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
4-
[Angular 1.x] Display tree dnd & event DrapnDrop, field 'td' by tree (other normal) - without jQuery.
57
## Current Version
6-
[![GitHub version](https://badge.fury.io/gh/thienhung1989%2Fangular-tree-dnd.svg)](http://badge.fury.io/gh/thienhung1989%2Fangular-tree-dnd)
8+
[![GitHub version](https://badge.fury.io/gh/thienhung1989%2Fangular-tree-dnd.svg)](http://badge.fury.io/gh/thienhung1989%2Fangular-tree-dnd) [![Build Status](https://travis-ci.org/thienhung1989/angular-tree-dnd.svg?branch=master)](https://travis-ci.org/thienhung1989/angular-tree-dnd)
79

10+
## Support *(just when I'm online)*
811
[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/thienhung1989/ng-tree-dnd?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
12+
913
## Demo:
1014
- http://thienhung1989.github.io/angular-tree-dnd/demo
1115
- http://plnkr.co/edit/6zQNvW?p=preview
1216

13-
17+
##Requirement:
18+
```
19+
angular: >=1.2.1
20+
```
21+
1422
## Install bower:
23+
* Bower
24+
```js
25+
bower install angular-tree-dnd
26+
```
27+
28+
* NPM
1529
```js
16-
bower angular-tree-dnd install
30+
npm install angular-tree-dnd
1731
```
1832

1933
* Function 'filter' & 'group by' not add in ng-repeate (it's slow & incompatible with $id($$hash) )
@@ -105,67 +119,65 @@ $scope.$callbacks = {
105119
* Example
106120
**init:
107121
```html
108-
<tree-dnd
109-
class="dnd"
110-
tree-data="tree_data"
111-
tree-control="my_tree"
112-
callbacks="callbacks"
113-
drag-enabled="true"
114-
icon-leaf="none"
115-
icon-expand="fa fa-fw fa-angle-right"
116-
icon-collapse="fa fa-fw fa-angle-down"
117-
template-url="tree-dnd-template.html"
118-
column-defs="col_defs"
119-
expand-on="expanding_property"
120-
on-select="my_tree_handler(node)"
121-
on-click="my_tree_handler(node)"
122-
data-indent="30"
123-
data-indent-unit="px"
124-
data-indent-plus="15"
125-
>
122+
<tree-dnd
123+
tree-class="dnd"
124+
tree-data="tree_data"
125+
tree-control="my_tree"
126+
callbacks="callbacks"
127+
drag-enabled="true"
128+
icon-leaf="none"
129+
icon-expand="fa fa-fw fa-angle-right"
130+
icon-collapse="fa fa-fw fa-angle-down"
131+
template-url="tree-dnd-template.html"
132+
column-defs="col_defs"
133+
expand-on="expanding_property"
134+
on-select="my_tree_handler(node)"
135+
on-click="my_tree_handler(node)"
136+
data-indent="30"
137+
data-indent-unit="px"
138+
data-indent-plus="15"
139+
>
126140
</tree-dnd>
127141
```
128142
** Template Extened:
129143
```html
130144
<script type="text/ng-template" id="tree-dnd-template.html">
131145
<div class="tree-dnd">
132-
<dnd class="dnd">
133-
<thead>
134-
<tr>
135-
<th ng-class="expandingProperty.titleClass" ng-style="expandingProperty.titleStyle">
136-
{{expandingProperty.displayName || expandingProperty.field || expandingProperty}}
137-
</th>
138-
<th ng-repeat="col in colDefinitions" ng-class="col.titleClass"
139-
ng-style="col.titleStyle">
140-
{{col.displayName || col.field}}
141-
</th>
142-
</tr>
143-
</thead>
144-
<tbody>
145-
<tr tree-dnd-node ng-repeat="node in tree_rows track by hashedTree(node)"
146-
ng-show="node.__visible__" ng-class="(node.__selected__ ? ' active':'')"
147-
class="ng-animate ">
148-
<td ng-if="!expandingProperty.template"
149-
ng-style="expandingProperty.cellStyle ? expandingProperty.cellStyle : {'padding-left': $callbacks.calsIndent(node.__level__)}"
150-
ng-click="user_clicks_node(node)" ng-class="expandingProperty.cellClass"
151-
compile="expandingProperty.cellTemplate">
152-
<span tree-dnd-node-handle>
153-
<i class="fa fa-sort text-muted m-r-sm"></i>
154-
</span> {{node[expandingProperty.field] || node[expandingProperty]}} <a> <i
155-
ng-class="node.__tree_icon__" ng-click="node.__expanded__ = !node.__expanded__"
156-
class="tree-icon"></i> </a>
157-
</td>
158-
<td ng-if="expandingProperty.template" compile="expandingProperty.template"></td>
159-
<td ng-repeat="col in colDefinitions" ng-class="col.cellClass" ng-style="col.cellStyle"
160-
compile="col.cellTemplate">
161-
{{node[col.field]}}
162-
</td>
163-
</tr>
164-
</tbody>
165-
</dnd>
166-
</div>
167-
<pre>{{ treeData | json }}</pre>
168-
<pre>{{ tree_rows | json }}</pre>
146+
<dnd class="dnd">
147+
<thead>
148+
<tr>
149+
<th ng-class="expandingProperty.titleClass" ng-style="expandingProperty.titleStyle">
150+
{{expandingProperty.displayName || expandingProperty.field || expandingProperty}}
151+
</th>
152+
<th ng-repeat="col in colDefinitions" ng-class="col.titleClass"
153+
ng-style="col.titleStyle">
154+
{{col.displayName || col.field}}
155+
</th>
156+
</tr>
157+
</thead>
158+
<tbody>
159+
<tr tree-dnd-node ng-repeat="node in tree_rows track by hashedTree(node)"
160+
ng-show="node.__visible__" ng-class="(node.__selected__ ? ' active':'')"
161+
class="ng-animate ">
162+
<td ng-if="!expandingProperty.template"
163+
ng-style="expandingProperty.cellStyle ? expandingProperty.cellStyle : {'padding-left': $callbacks.calsIndent(node.__level__)}"
164+
ng-click="user_clicks_node(node)" ng-class="expandingProperty.cellClass"
165+
compile="expandingProperty.cellTemplate">
166+
<span tree-dnd-node-handle>
167+
<i class="fa fa-sort text-muted m-r-sm"></i>
168+
</span> {{node[expandingProperty.field] || node[expandingProperty]}} <a> <i
169+
ng-class="node.__tree_icon__" ng-click="node.__expanded__ = !node.__expanded__"
170+
class="tree-icon"></i> </a>
171+
</td>
172+
<td ng-if="expandingProperty.template" compile="expandingProperty.template"></td>
173+
<td ng-repeat="col in colDefinitions" ng-class="col.cellClass" ng-style="col.cellStyle"
174+
compile="col.cellTemplate">
175+
{{node[col.field]}}
176+
</td>
177+
</tr>
178+
</tbody>
179+
</dnd>
180+
</div>
169181
</script>
170182
```
171183
## dragStop:
@@ -217,63 +229,64 @@ $scope.$callbacks = {
217229

218230
* Add 'data' to TreeDnDNode `tree-dnd-node=data` in template;
219231
```html
220-
<tr tree-dnd-node="node" ng-repeat="node in tree_rows track by hashedTree(node)"
221-
ng-show="node.__visible__" ng-class="(node.__selected__ ? ' active':'')" class="ng-animate ">
232+
<tr tree-dnd-node="node"
233+
ng-repeat="node in tree_rows track by hashedTree(node)"
234+
ng-show="node.__visible__"
235+
ng-class="(node.__selected__ ? ' active':'')"
236+
>
222237
....
223238
</tr>
224239
```
225240

226-
# Display ListTree (UL, OL)
227-
241+
## Display ListTree (UL, OL)
228242
* Combinding with list-tree.
229-
230243
```html
231-
<script type="text/ng-template" id="tree-dnd-template-render.html">
232-
<ul tree-dnd-nodes="tree_data">
233-
<li tree-dnd-node="node" ng-repeat="node in nodes track by node.__hashKey__"
234-
ng-show="node.__visible__" compile="expandingProperty.cellTemplate"
235-
ng-include="'tree-dnd-template-fetch.html'"></li>
236-
</ul>
237-
</script>
238-
239-
<script type="text/ng-template" id="tree-dnd-template-fetch.html">
240-
<div class="list-group-item"
241-
ng-class="(node.__selected__ ? 'list-group-item-success':'')"
242-
ng-click="onClick(node)"
243-
ng-style="expandingProperty.cellStyle ? expandingProperty.cellStyle : {}">
244+
<script type="text/ng-template" id="tree-dnd-template-render.html">
245+
<ul tree-dnd-nodes="tree_data">
246+
<li tree-dnd-node="node" ng-repeat="node in nodes track by node.__hashKey__"
247+
ng-show="node.__visible__" compile="expandingProperty.cellTemplate"
248+
ng-include="'tree-dnd-template-fetch.html'"></li>
249+
</ul>
250+
</script>
251+
252+
<script type="text/ng-template" id="tree-dnd-template-fetch.html">
253+
<div class="list-group-item"
254+
ng-class="(node.__selected__ ? 'list-group-item-success':'')"
255+
ng-click="onClick(node)"
256+
ng-style="expandingProperty.cellStyle ? expandingProperty.cellStyle : {}">
257+
258+
<a class="btn btn-default" aria-label="Justify" type="button" tree-dnd-node-handle>
259+
<span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span>
260+
</a>
261+
262+
{{node[expandingProperty.field] || node[expandingProperty]}}
263+
264+
<span ng-class="$iconClass" ng-click="toggleExpand(node)"></span>
265+
<div class="pull-right">
266+
<span ng-repeat="col in colDefinitions" ng-class="col.cellClass" ng-style="col.cellStyle"
267+
compile="col.cellTemplate">
268+
{{node[col.field]}}
269+
</span>
270+
</div>
271+
</div>
272+
<ul tree-dnd-nodes="node.__children__">
273+
<li tree-dnd-node="node" ng-repeat="node in nodes track by node.__hashKey__"
274+
ng-show="node.__visible__" compile="expandingProperty.cellTemplate"
275+
ng-include="'tree-dnd-template-fetch.html'"></li>
276+
</ul>
277+
</script>
244278

245-
<a class="btn btn-default" aria-label="Justify" type="button" tree-dnd-node-handle>
246-
<span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span>
247-
</a>
248-
249-
{{node[expandingProperty.field] || node[expandingProperty]}}
250-
251-
<span ng-class="$iconClass" ng-click="toggleExpand(node)"></span>
252-
<div class="pull-right">
253-
<span ng-repeat="col in colDefinitions" ng-class="col.cellClass" ng-style="col.cellStyle"
254-
compile="col.cellTemplate">
255-
{{node[col.field]}}
256-
</span>
257-
</div>
258-
</div>
259-
<ul tree-dnd-nodes="node.__children__">
260-
<li tree-dnd-node="node" ng-repeat="node in nodes track by node.__hashKey__"
261-
ng-show="node.__visible__" compile="expandingProperty.cellTemplate"
262-
ng-include="'tree-dnd-template-fetch.html'"></li>
263-
</ul>
264-
</script>
265-
266-
<tree-dnd tree-data="tree_data"
267-
tree-control="my_tree"
268-
column-defs="col_defs_min"
269-
expand-on="expanding_property"
270-
on-select="select_handler(node)"
271-
on-click="click_handler(node)"
272-
template-url="tree-dnd-template-render.html"
273-
icon-leaf="none"
274-
icon-expand="glyphicon glyphicon-chevron-down"
275-
icon-collapse="glyphicon glyphicon-chevron-right"
276-
></tree-dnd>
279+
<tree-dnd tree-data="tree_data"
280+
tree-control="my_tree"
281+
column-defs="col_defs_min"
282+
expand-on="expanding_property"
283+
on-select="select_handler(node)"
284+
on-click="click_handler(node)"
285+
template-url="tree-dnd-template-render.html"
286+
icon-leaf="none"
287+
icon-expand="glyphicon glyphicon-chevron-down"
288+
icon-collapse="glyphicon glyphicon-chevron-right"
289+
></tree-dnd>
277290
```
278291

279292

@@ -309,6 +322,7 @@ $scope.$callbacks = {
309322
* 'template-copy': to add url template of `Status Copy` *(can bypass string or variable in controller, but just only get $templateCache, if not exist will get default)*;
310323
* 'template-move': to add url template of `Status Move` *(can bypass string or variable in controller, but just only get $templateCache, if not exist will get default)*;
311324
* Example:
325+
312326
```html
313327
<tree-dnd class="tree-dnd dnd dnd-hover b-b b-light" tree-data="tree_data" tree-control="my_tree"
314328
primary-key="primaryKey"
@@ -341,5 +355,4 @@ $scope.$callbacks = {
341355
```
342356

343357
## Thank To:
344-
345358
This product is the combination and optimization of 2: [![angular-ui-tree](https://github.com/angular-ui-tree/angular-ui-tree)](https://github.com/angular-ui-tree/angular-ui-tree) (Drag2Drop) và [![tree-grid-directive](https://github.com/khan4019/tree-grid-directive)](https://github.com/khan4019/tree-grid-directive) (Display Tree2Table).

‎bower.json‎

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
{
2-
"name": "ng-tree-dnd",
3-
"version": "3.0.1",
4-
"authors": ["Nguyen Thien Hung"],
5-
"homepage": "https://github.com/thienhung1989/ng-tree-dnd",
2+
"name": "angular-tree-dnd",
3+
"version": "3.0.2",
4+
"authors": ["Nguyễn Thiện Hùng"],
5+
"homepage": "https://github.com/thienhung1989/angular-tree-dnd",
66
"description": "Display tree table (or list) & event DrapnDrop (allow drag multi tree-dnd include all type: table, ol, ul) by AngularJS, using CSS animation and Bootstrap style",
77
"main": [
88
"dist/ng-tree-dnd.css",
99
"dist/ng-tree-dnd.js",
1010
"dist/ng-tree-dnd.min.css",
11-
"dist/ng-tree-dnd.min.js"
11+
"dist/ng-tree-dnd.min.js",
12+
"dist/ng-tree-dnd.min.js.map"
1213
],
1314
"licence": "MIT",
1415
"keywords": [
@@ -22,12 +23,16 @@
2223
],
2324
"repository": {
2425
"type": "git",
25-
"url": "git://github.com/thienhung1989/ng-tree-dnd"
26+
"url": "git://github.com/thienhung1989/angular-tree-dnd"
2627
},
2728
"ignore": [
2829
"temp",
2930
"test",
31+
".jshintrc",
32+
".travis.yml",
33+
".bowerrc",
3034
".gitignore",
35+
"bower_components",
3136
"examples",
3237
"demo",
3338
"build",
@@ -37,15 +42,15 @@
3742
"tasks",
3843
"tests",
3944
"gulpfile.js",
40-
"karma.conf.js"
45+
"karma.conf.js",
46+
"src"
4147
],
4248
"dependencies": {
43-
"angular": ">=1.2"
49+
"angular": ">=1.2.1"
4450
},
4551
"devDependencies": {
46-
"angular-mocks": ">= 1.2.0",
47-
"angular-route": ">= 1.2.0",
48-
"angularfire": "~0.8.2",
52+
"angular-mocks": ">= 1.2.1",
53+
"angular-route": ">= 1.2.1",
4954
"bootstrap-css": ">=3.2.0"
5055
}
5156
}

‎demo/basic/basic.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
<tree-dnd
2-
tree-class="table table-bordered table-hover table-striped"
32
tree-data="tree_data"
43
tree-control="my_tree"
54

0 commit comments

Comments
 (0)