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>

Add function to tree-dnd by:

* 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>

Display ListTree (UL, OL)

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>

Add attributes

__tree_icon__ : changed to __icon__ (-1: leaf, 0: collect, 1: expaned) - (in Tree_Data)
__icon_class__ (avoid conflict when create tree-dnd use one tree-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.
'onSelect': Select and callback function on-select (created in directive)
'onClick': callback function on-click. (created in directive)
'column-defs': null will auto get colDefinitions (sample with empty).
'enable-move': true: To move node, false: to copy node (default true)
'enable-hotkey': true: press 'shift' to move node, unpress 'shift' to copy node. (default false)
'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>

dragStop:

    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' }
 		]
 	]
 ]

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

DOCUMENTS.md

DOCUMENTS.md

Add function to tree-dnd by:

Display ListTree (UL, OL)

Add attributes

dragStop:

Files

DOCUMENTS.md

Latest commit

History

DOCUMENTS.md

File metadata and controls

Add function to tree-dnd by:

Display ListTree (UL, OL)

Add attributes

dragStop: