Skip to content

Commit 9c21115

Browse files
thienhung1989thienhung1989
committed
## v3.0.3
 * Fix error dragDrop for Tree * Optimal getElementChilds * Add new Demo *(filter, multi tree)* * Problems: * Error when drag node to thead *(table)* * Next feature: * Split angular-tree-dnd: * Only Directive control: next, prev,... * Only DragNDrop * .... * And Full-All * OrderBy
1 parent c562ee7 commit 9c21115

31 files changed

+4228
-3697
lines changed

‎CHANGELOG.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,18 @@
1+
## v3.0.3
2+
* Fix error dragDrop for Tree
3+
* Optimal getElementChilds
4+
* Add new Demo *(filter, multi tree)*
5+
* Problems:
6+
* Error when drag node to thead *(table)*
7+
* Next feature:
8+
* Split angular-tree-dnd:
9+
* Only Directive control: next, prev,...
10+
* Only DragNDrop
11+
* ....
12+
* And Full-All
13+
* OrderBy
14+
15+
116
## v3.0.2
217
* Add function `Scope.$safeApply()`.
318
* Fix Watch

‎DOCUMENTS.md‎

Lines changed: 325 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,325 @@
1+
2+
### Orther:
3+
* Function 'filter' & 'group by' not add in ng-repeate (it's slow & incompatible with $id($$hash) )
4+
* Able add function to tree-dnd by:
5+
* Example: *(See on Demo 2)*
6+
```js
7+
$scope.my_tree.addFunction = function(b){
8+
console.log(b);
9+
alert('Function added in Controller "App.js"');
10+
}
11+
```
12+
* Call function: *(tree.remove_node extended see below with function other)*
13+
```js
14+
$scope.col_defs = [
15+
{
16+
field: "Description"
17+
}, {
18+
displayName: 'Function',
19+
cellTemplate: '<button ng-click="tree.addFunction(node)" class="btn btn-default btn-sm">Added Controller!</button>'
20+
}, {
21+
displayName: 'Remove',
22+
cellTemplate: '<button ng-click="tree.remove_node(node)" class="btn btn-default btn-sm">Remove</button>'
23+
}];
24+
```
25+
26+
* Functions extended in callback (able change by attribute):
27+
```js
28+
$scope.$callbacks = {
29+
// function accept called when item Drapping move-over target
30+
accept: function (scopeDrag, scopeTarget, align) {
31+
return true;
32+
},
33+
34+
beforeDrag: function (scopeDrag) {
35+
return true;
36+
},
37+
dropped: function (info, accepted) {
38+
return false;
39+
},
40+
dragStart: function (event) {},
41+
dragMove: function (event) {},
42+
dragStop: function (event, skiped) {},
43+
beforeDrop: function (event) {
44+
return true;
45+
},
46+
calsIndent: function (level) {
47+
if (level - 1 < 1) {
48+
return $scope.indent_plus + ($scope.indent_unit ? $scope.indent_unit : 'px');
49+
} else {
50+
return ($scope.indent * (level - 1)) + $scope.indent_plus + ($scope.indent_unit ? $scope.indent_unit : 'px');
51+
}
52+
},
53+
dragEnabled: function () {
54+
return $scope.dragEnabled;
55+
}
56+
};
57+
```
58+
* Functions extended in control (attribute 'tree-control'):
59+
60+
```html
61+
tree.expand_all();
62+
tree.collapse_all();
63+
tree.select_first_node();
64+
tree.select_node(node);
65+
tree.add_node(parent, new_node, index);
66+
tree.add_root_node(new_node);
67+
tree.remove_node(node);
68+
tree.expand_node(node);
69+
tree.collapse_node(node);
70+
tree.get_selected_node();
71+
tree.get_first_child(node);
72+
tree.get_children(node);
73+
tree.get_first_node();
74+
tree.get_next_node(node);
75+
tree.get_prev_node(node);
76+
tree.get_parent_node(node);
77+
tree.get_siblings(node);
78+
tree.get_next_sibling(node);
79+
tree.get_prev_sibling(node);
80+
tree.get_closest_ancestor_next_sibling(node);
81+
tree.select_next_node(node);
82+
tree.select_next_sibling(node);
83+
tree.select_prev_sibling(node);
84+
tree.select_parent_node(node);
85+
tree.last_descendant(node);
86+
tree.select_prev_node(node);
87+
```
88+
89+
* Example
90+
**init:
91+
```html
92+
<tree-dnd
93+
tree-class="dnd"
94+
tree-data="tree_data"
95+
tree-control="my_tree"
96+
callbacks="callbacks"
97+
drag-enabled="true"
98+
icon-leaf="none"
99+
icon-expand="fa fa-fw fa-angle-right"
100+
icon-collapse="fa fa-fw fa-angle-down"
101+
template-url="tree-dnd-template.html"
102+
column-defs="col_defs"
103+
expand-on="expanding_property"
104+
on-select="my_tree_handler(node)"
105+
on-click="my_tree_handler(node)"
106+
data-indent="30"
107+
data-indent-unit="px"
108+
data-indent-plus="15"
109+
>
110+
</tree-dnd>
111+
```
112+
** Template Extened:
113+
```html
114+
<script type="text/ng-template" id="tree-dnd-template.html">
115+
<div class="tree-dnd">
116+
<dnd class="dnd">
117+
<thead>
118+
<tr>
119+
<th ng-class="expandingProperty.titleClass" ng-style="expandingProperty.titleStyle">
120+
{{expandingProperty.displayName || expandingProperty.field || expandingProperty}}
121+
</th>
122+
<th ng-repeat="col in colDefinitions" ng-class="col.titleClass"
123+
ng-style="col.titleStyle">
124+
{{col.displayName || col.field}}
125+
</th>
126+
</tr>
127+
</thead>
128+
<tbody>
129+
<tr tree-dnd-node ng-repeat="node in tree_rows track by hashedTree(node)"
130+
ng-show="node.__visible__" ng-class="(node.__selected__ ? ' active':'')"
131+
class="ng-animate ">
132+
<td ng-if="!expandingProperty.template"
133+
ng-style="expandingProperty.cellStyle ? expandingProperty.cellStyle : {'padding-left': $callbacks.calsIndent(node.__level__)}"
134+
ng-click="user_clicks_node(node)" ng-class="expandingProperty.cellClass"
135+
compile="expandingProperty.cellTemplate">
136+
<span tree-dnd-node-handle>
137+
<i class="fa fa-sort text-muted m-r-sm"></i>
138+
</span> {{node[expandingProperty.field] || node[expandingProperty]}} <a> <i
139+
ng-class="node.__tree_icon__" ng-click="node.__expanded__ = !node.__expanded__"
140+
class="tree-icon"></i> </a>
141+
</td>
142+
<td ng-if="expandingProperty.template" compile="expandingProperty.template"></td>
143+
<td ng-repeat="col in colDefinitions" ng-class="col.cellClass" ng-style="col.cellStyle"
144+
compile="col.cellTemplate">
145+
{{node[col.field]}}
146+
</td>
147+
</tr>
148+
</tbody>
149+
</dnd>
150+
</div>
151+
</script>
152+
```
153+
## dragStop:
154+
```js
155+
scope.$callbacks.dragStop(dragInfo, _status);
156+
```
157+
* _status: Status changed pos of node, Drag succeed!
158+
* dragInfo:
159+
* node: scope.node(), // Data node dragged
160+
* scope: scope, // Scope node
161+
* level: scope.node().__level__, // Level indent
162+
* target: scope.prev(), // Node prev
163+
* move:
164+
* parent: -1, // -1: Dragged failed, null: node root, > 0: node normal
165+
* pos: -1 // Position new Note moveTo
166+
* 'dropped': re-Add function ` * re-Add function `dropped` in `$callbaks` *(used to copying or remove node old)*:
167+
*
168+
```html
169+
dropped: function (info, pass, isMove);
170+
```
171+
* With param:
172+
* info:
173+
* drag: Scope of Node dragging.
174+
* tree: Scope of Node Target.
175+
* node: Node dragging.
176+
* parent: Parent containd Node Dragging.
177+
* move:
178+
* parent: Node parent to move node dragging to.
179+
* pos: Position insert.
180+
* target: Data node Target *(able skip, not important)*
181+
* pass: bypass resutl in `$callback.beforeDrop:`.
182+
* isMove: status Moving or Copying.` in `$callbaks` *(used to copying or remove node old)*:
183+
*
184+
```html
185+
dropped: function (info, pass, isMove);
186+
```
187+
* With param:
188+
* info:
189+
* drag: Scope of Node dragging.
190+
* tree: Scope of Node Target.
191+
* node: Node dragging.
192+
* parent: Parent containd Node Dragging.
193+
* move:
194+
* parent: Node parent to move node dragging to.
195+
* pos: Position insert.
196+
* target: Data node Target *(able skip, not important)*
197+
* pass: bypass resutl in `$callback.beforeDrop:`.
198+
* isMove: status Moving or Copying.
199+
200+
* Add 'data' to TreeDnDNode `tree-dnd-node=data` in template;
201+
```html
202+
<tr tree-dnd-node="node"
203+
ng-repeat="node in tree_rows track by hashedTree(node)"
204+
ng-show="node.__visible__"
205+
ng-class="(node.__selected__ ? ' active':'')"
206+
>
207+
....
208+
</tr>
209+
```
210+
211+
## Display ListTree (UL, OL)
212+
* Combinding with list-tree.
213+
```html
214+
<script type="text/ng-template" id="tree-dnd-template-render.html">
215+
<ul tree-dnd-nodes="tree_data">
216+
<li tree-dnd-node="node" ng-repeat="node in nodes track by node.__hashKey__"
217+
ng-show="node.__visible__" compile="expandingProperty.cellTemplate"
218+
ng-include="'tree-dnd-template-fetch.html'"></li>
219+
</ul>
220+
</script>
221+
222+
<script type="text/ng-template" id="tree-dnd-template-fetch.html">
223+
<div class="list-group-item"
224+
ng-class="(node.__selected__ ? 'list-group-item-success':'')"
225+
ng-click="onClick(node)"
226+
ng-style="expandingProperty.cellStyle ? expandingProperty.cellStyle : {}">
227+
228+
<a class="btn btn-default" aria-label="Justify" type="button" tree-dnd-node-handle>
229+
<span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span>
230+
</a>
231+
232+
{{node[expandingProperty.field] || node[expandingProperty]}}
233+
234+
<span ng-class="$iconClass" ng-click="toggleExpand(node)"></span>
235+
<div class="pull-right">
236+
<span ng-repeat="col in colDefinitions" ng-class="col.cellClass" ng-style="col.cellStyle"
237+
compile="col.cellTemplate">
238+
{{node[col.field]}}
239+
</span>
240+
</div>
241+
</div>
242+
<ul tree-dnd-nodes="node.__children__">
243+
<li tree-dnd-node="node" ng-repeat="node in nodes track by node.__hashKey__"
244+
ng-show="node.__visible__" compile="expandingProperty.cellTemplate"
245+
ng-include="'tree-dnd-template-fetch.html'"></li>
246+
</ul>
247+
</script>
248+
249+
<tree-dnd tree-data="tree_data"
250+
tree-control="my_tree"
251+
column-defs="col_defs_min"
252+
expand-on="expanding_property"
253+
on-select="select_handler(node)"
254+
on-click="click_handler(node)"
255+
template-url="tree-dnd-template-render.html"
256+
icon-leaf="none"
257+
icon-expand="glyphicon glyphicon-chevron-down"
258+
icon-collapse="glyphicon glyphicon-chevron-right"
259+
></tree-dnd>
260+
```
261+
262+
263+
## Add attributes
264+
265+
* `__tree_icon__` : changed to `__icon__` *(-1: leaf, 0: collect, 1: expaned)* - *(in Tree_Data)*
266+
* Added `$iconClass` replace for `__tree_icon__` *(avoid conflict when create tree-dnd use one `tree-data`)*
267+
* Add function:
268+
* re-Add function `dropped` in `$callbaks` *(used to copying or remove node old)*:
269+
*
270+
```html
271+
dropped: function (info, pass, isMove);
272+
```
273+
* With param:
274+
* info:
275+
* drag: Scope of Node dragging.
276+
* tree: Scope of Node Target.
277+
* node: Node dragging.
278+
* parent: Parent containd Node Dragging.
279+
* move:
280+
* parent: Node parent to move node dragging to.
281+
* pos: Position insert.
282+
* target: Data node Target *(able skip, not important)*
283+
* pass: bypass resutl in `$callback.beforeDrop:`.
284+
* isMove: status Moving or Copying.
285+
* 'onSelect': Select and callback function `on-select` *(created in `directive`)*
286+
* 'onClick': callback function `on-click`. *(created in `directive`)*
287+
* 'column-defs': `null` will auto get colDefinitions *(sample with `empty`)*.
288+
* 'enable-move': `true`: To move node, `false`: to copy node *(default `true`)*
289+
* 'enable-hotkey': `true`: press 'shift' to move node, unpress 'shift' to copy node. *(default `false`)*
290+
* 'enable-drag': to Enable-drag *(default `true`)*
291+
* 'enable-status': to show status moving, copying *(default `false`)*
292+
* '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)*;
293+
* '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)*;
294+
* Example:
295+
296+
```html
297+
<tree-dnd class="tree-dnd dnd dnd-hover b-b b-light" tree-data="tree_data" tree-control="my_tree"
298+
primary-key="primaryKey"
299+
callbacks="callbacks"
300+
301+
enable-drag="true"
302+
enable-status="true"
303+
enable-move="true"
304+
icon-leaf="none"
305+
icon-expand="fa fa-fw fa-angle-right"
306+
icon-collapse="fa fa-fw fa-angle-down"
307+
308+
column-defs="col_defs"
309+
expand-on="expanding_property"
310+
311+
312+
on-select="select_handler()"
313+
on-click="click_handler()"
314+
315+
template-url="tree-dnd-template.html"
316+
template-move="'tree-dnd-template.html'"
317+
template-copy="tree-dnd-template.html"
318+
319+
data-indent="30"
320+
data-indent-unit="px"
321+
data-indent-plus="15"
322+
323+
></tree-dnd>
324+
325+
```

0 commit comments

Comments
 (0)