- Example **init:
<tree-dnd
tree-class="dnd"
tree-data="tree_data"
tree-control="my_tree"
callbacks="callbacks"
drag-enabled="true"
icon-leaf="none"
icon-expand="fa fa-fw fa-angle-right"
icon-collapse="fa fa-fw fa-angle-down"
template-url="tree-dnd-template.html"
column-defs="col_defs"
expand-on="expanding_property"
on-select="my_tree_handler(node)"
on-click="my_tree_handler(node)"
data-indent="30"
data-indent-unit="px"
data-indent-plus="15"
>
</tree-dnd>
** Template Extened:
<script type="text/ng-template" id="tree-dnd-template.html">
<div class="tree-dnd">
<dnd class="dnd">
<thead>
<tr>
<th ng-class="expandingProperty.titleClass" ng-style="expandingProperty.titleStyle">
{{expandingProperty.displayName || expandingProperty.field || expandingProperty}}
</th>
<th ng-repeat="col in colDefinitions" ng-class="col.titleClass"
ng-style="col.titleStyle">
{{col.displayName || col.field}}
</th>
</tr>
</thead>
<tbody tree-dnd-nodes>
<tr tree-dnd-node ng-repeat="node in tree_rows track by hashedTree(node)"
ng-show="node.__visible__" ng-class="(node.__selected__ ? ' active':'')"
class="ng-animate ">
<td
ng-style="expandingProperty.cellStyle ? expandingProperty.cellStyle : {'padding-left': $callbacks.calsIndent(node.__level__)}"
ng-click="user_clicks_node(node)" ng-class="expandingProperty.cellClass"
compile="expandingProperty.cellTemplate">
<span tree-dnd-node-handle>
<i class="fa fa-sort text-muted m-r-sm"></i>
</span> {{node[expandingProperty.field] || node[expandingProperty]}} <a> <i
ng-class="node.__tree_icon__" ng-click="node.__expanded__ = !node.__expanded__"
class="tree-icon"></i> </a>
</td>
<td ng-repeat="col in colDefinitions" ng-class="col.cellClass" ng-style="col.cellStyle"
compile="col.cellTemplate">
{{node[col.field]}}
</td>
</tr>
</tbody>
</dnd>
</div>
</script>
* Example: *(See on Demo 2)*
$scope.my_tree.addFunction = function(b){
console.log(b);
alert('Function added in Controller "App.js"');
}
* Call function: *(tree.remove_node extended see below with function other)*
$scope.col_defs = [
{
field: "Description"
}, {
displayName: 'Function',
cellTemplate: '<button ng-click="tree.addFunction(node)" class="btn btn-default btn-sm">Added Controller!</button>'
}, {
displayName: 'Remove',
cellTemplate: '<button ng-click="tree.remove_node(node)" class="btn btn-default btn-sm">Remove</button>'
}];
- Add 'data' to TreeDnDNode
tree-dnd-node
in template;
<tr tree-dnd-node
ng-repeat="node in tree_rows track by hashedTree(node)"
ng-show="node.__visible__"
ng-class="(node.__selected__ ? ' active':'')"
>
....
</tr>
- Combinding with list-tree.
<script type="text/ng-template" id="tree-dnd-template-render.html">
<ul tree-dnd-nodes>
<li tree-dnd-node
ng-repeat="node in tree_data track by node.__hashKey__"
ng-show="node.__visible__" compile="expandingProperty.cellTemplate"
ng-include="'tree-dnd-template-fetch.html'"></li>
</ul>
</script>
<script type="text/ng-template" id="tree-dnd-template-fetch.html">
<div class="list-group-item"
ng-class="(node.__selected__ ? 'list-group-item-success':'')"
ng-click="onClick(node)"
ng-style="expandingProperty.cellStyle ? expandingProperty.cellStyle : {}">
<a class="btn btn-default" aria-label="Justify" type="button" tree-dnd-node-handle>
<span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span>
</a>
{{node[expandingProperty.field] || node[expandingProperty]}}
<span ng-class="node.__icon_class__" ng-click="toggleExpand(node)"></span>
<div class="pull-right">
<span ng-repeat="col in colDefinitions" ng-class="col.cellClass" ng-style="col.cellStyle"
compile="col.cellTemplate">
{{node[col.field]}}
</span>
</div>
</div>
<ul tree-dnd-nodes>
<li tree-dnd-node
ng-repeat="node in node.__children__ track by node.__hashKey__"
ng-show="node.__visible__" compile="expandingProperty.cellTemplate"
ng-include="'tree-dnd-template-fetch.html'"></li>
</ul>
</script>
<tree-dnd tree-data="tree_data"
tree-control="my_tree"
column-defs="col_defs_min"
expand-on="expanding_property"
on-select="select_handler(node)"
on-click="click_handler(node)"
template-url="tree-dnd-template-render.html"
icon-leaf="none"
icon-expand="glyphicon glyphicon-chevron-down"
icon-collapse="glyphicon glyphicon-chevron-right"
></tree-dnd>
__tree_icon__
: changed to__icon__
(-1: leaf, 0: collect, 1: expaned) - (in Tree_Data)__icon_class__
(avoid conflict when create tree-dnd use onetree-data
)- Add function:
- re-Add function
dropped
in$callbaks
(used to copying or remove node old): *dropped: function (info, pass, isMove);
- With param:
- info:
- drag: Scope of Node dragging.
- tree: Scope of Node Target.
- node: Node dragging.
- parent: Parent containd Node Dragging.
- move:
- parent: Node parent to move node dragging to.
- pos: Position insert.
- target: Data node Target (able skip, not important)
- pass: bypass resutl in
$callback.beforeDrop:
. - isMove: status Moving or Copying.
- info:
- With param:
- 'onSelect': Select and callback function
on-select
(created indirective
) - 'onClick': callback function
on-click
. (created indirective
) - 'column-defs':
null
will auto get colDefinitions (sample withempty
). - 'enable-move':
true
: To move node,false
: to copy node (defaulttrue
) - 'enable-hotkey':
true
: press 'shift' to move node, unpress 'shift' to copy node. (defaultfalse
) - 'enable-drag': to Enable-drag (default
true
) - 'enable-status': to show status moving, copying (default
false
) - '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); - '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); - Example:
<tree-dnd class="tree-dnd dnd dnd-hover b-b b-light" tree-data="tree_data" tree-control="my_tree"
primary-key="primaryKey"
callbacks="callbacks"
enable-drag="true"
enable-status="true"
enable-move="true"
icon-leaf="none"
icon-expand="fa fa-fw fa-angle-right"
icon-collapse="fa fa-fw fa-angle-down"
column-defs="col_defs"
expand-on="expanding_property"
on-select="select_handler"
on-click="click_handler"
template-url="tree-dnd-template.html"
template-move="'tree-dnd-template.html'"
template-copy="tree-dnd-template.html"
data-indent="30"
data-indent-unit="px"
data-indent-plus="15"
></tree-dnd>
scope.$callbacks.dragStop(dragInfo, _status);
* _status: Status changed pos of node, Drag succeed!
* dragInfo:
* node: scope.node(), // Data node dragged
* scope: scope, // Scope node
* level: scope.node().__level__, // Level indent
* target: scope.prev(), // Node prev
* move:
* parent: -1, // -1: Dragged failed, null: node root, > 0: node normal
* pos: -1 // Position new Note moveTo
* 'dropped': re-Add function ` * re-Add function `dropped` in `$callbaks` *(used to copying or remove node old)*:
*
```html
dropped: function (info, pass, isMove);
```
* With param:
* info:
* drag: Scope of Node dragging.
* tree: Scope of Node Target.
* node: Node dragging.
* parent: Parent containd Node Dragging.
* move:
* parent: Node parent to move node dragging to.
* pos: Position insert.
* target: Data node Target *(able skip, not important)*
* pass: bypass resutl in `$callback.beforeDrop:`.
* isMove: status Moving or Copying.` in `$callbaks` *(used to copying or remove node old)*:
*
```html
dropped: function (info, pass, isMove);
```
* With param:
* info:
* drag: Scope of Node dragging.
* tree: Scope of Node Target.
* node: Node dragging.
* parent: Parent containd Node Dragging.
* move:
* parent: Node parent to move node dragging to.
* pos: Position insert.
* target: Data node Target *(able skip, not important)*
* pass: bypass resutl in `$callback.beforeDrop:`.
* isMove: status Moving or Copying.
- Functions extended in callback (able change by attribute):
$scope.$callbacks = {
// function accept called when item Drapping move-over target
accept: function (scopeDrag, scopeTarget, align) {
return true;
},
beforeDrag: function (scopeDrag) {
return true;
},
dropped: function (info, accepted) {
return false;
},
dragStart: function (event) {},
dragMove: function (event) {},
dragStop: function (event, skiped) {},
beforeDrop: function (event) {
return true;
},
calsIndent: function (level) {
if (level - 1 < 1) {
return $scope.indent_plus + ($scope.indent_unit ? $scope.indent_unit : 'px');
} else {
return ($scope.indent * (level - 1)) + $scope.indent_plus + ($scope.indent_unit ? $scope.indent_unit : 'px');
}
},
dragEnabled: function () {
return $scope.dragEnabled;
}
};
- Functions extended in control (attribute 'tree-control'):
tree.expand_all();
tree.collapse_all();
tree.select_first_node();
tree.select_node(node);
tree.add_node(parent, new_node, index);
tree.add_root_node(new_node);
tree.remove_node(node);
tree.expand_node(node);
tree.collapse_node(node);
tree.get_selected_node();
tree.get_first_child(node);
tree.get_children(node);
tree.get_first_node();
tree.get_next_node(node);
tree.get_prev_node(node);
tree.get_parent_node(node);
tree.get_siblings(node);
tree.get_next_sibling(node);
tree.get_prev_sibling(node);
tree.get_closest_ancestor_next_sibling(node);
tree.select_next_node(node);
tree.select_next_sibling(node);
tree.select_prev_sibling(node);
tree.select_parent_node(node);
tree.last_descendant(node);
tree.select_prev_node(node);
- Construct operation of the condition filter:
- Object:
{ Test: 'a', Test3: '3', __condition__: 'and' // or AND, true // __condition__: 'or' // sample: 'OR', false, null }
* All will convert to: * If field: `__condition__` not exist then __condition__ = null; * When condition `or`: ```js scope.filter = [ { field: 'Test', callbacks: 'a' }, { field: 'Test3', callbacks: '3' }, ] scope.filterOptions = { beginAnd: 'false' } ``` * When condition `and` *(all sample with `or`, just different in `scope.filterOptions`)*: ```js scope.filterOptions = { beginAnd: true } ```
- Array:
-
Construct of filter:
scope.filter = [ { field: 'Test', callbacks: 'a' }, { field: 'Test3', callbacks: '3' }, ]
-
Multi condition:
- Example: Test || Test3 || (Test4 && Test5)
scope.filter = [ { field: 'Test', callbacks: 'a' }, { field: 'Test3', callbacks: '3' }, [ { field: 'Test4', callbacks: 'a' }, { field: 'Test5', callbacks: 'a' } ] ] scope.filterOptions = { beginAnd: 'false' // null }
- Example: Test && Test3 && (Test4 || Test5)
scope.filter = [ { field: 'Test', callbacks: 'a' }, { field: 'Test3', callbacks: '3' }, [ { field: 'Test4', callbacks: 'a' }, { field: 'Test5', callbacks: 'a' } ] ] scope.filterOptions = { beginAnd: true // or `true` }
- Example: Test && Test3 && (Test4 || (Test5 && Test6))
scope.filter = [ { field: 'Test', callbacks: 'a' }, { field: 'Test3', callbacks: '3' }, [ { field: 'Test4', callbacks: 'a' }, [ { field: 'Test5', callbacks: 'a' }, { field: 'Test6', callbacks: 'a' } ] ] ]
-