From 2c3e11318f44341970ce7efc6c75c26fd4324d06 Mon Sep 17 00:00:00 2001 From: gildson Date: Fri, 21 Aug 2015 16:48:48 -0300 Subject: [PATCH 1/2] adjusting events related to select branch, click branch, expand branch and collapse branch. --- README.md | 21 ++-- src/tree-grid-directive.js | 199 ++++++++++++++++++++----------------- 2 files changed, 124 insertions(+), 96 deletions(-) diff --git a/README.md b/README.md index 2c5ebc3..e83d6d2 100644 --- a/README.md +++ b/README.md @@ -53,8 +53,9 @@ If you want more customization, you can use the following options: icon-leaf = "icon-file" icon-expand = "icon-plus-sign" icon-collapse = "icon-minus-sign" - on-select = "my_tree_handler(branch)" on-click = "my_tree_handler(branch)" + on-expand = "my_tree_handler(branch)" + on-collapse = "my_tree_handler(branch)" template-url = "path/to/treegrid/template.html" expand-level = "2"> @@ -119,17 +120,25 @@ This accepts an array of the same format as col_defs, allowing for sorting & fil **expand-level:** depth of the tree, you want to expand while loading. -**on-select:** a click handler while you are clicking on +/- icons. +**on-click:** a click handler while you are clicking on the expanding property, useful when you +need to redirect if a branch is selected. $scope.my_tree_handler = function(branch){ - console.log('you clicked on', branch) + console.log('you clicked on', branch) } -**on-click:** a click handler while you are clicking on the expanding property, useful when you -need to redirect if a branch is selected. +**on-expand:** a click handler while you are clicking on the icon expand, useful when you +need populate the branch when the user expand it. $scope.my_tree_handler = function(branch){ - console.log('you clicked on', branch) + console.log('you expand', branch) + } + +**on-collapse:** a click handler while you are clicking on the collapse icon, useful when you +need call one action related to parent item. + + $scope.my_tree_handler = function(branch){ + console.log('you collapse', branch) } ### Specifying the template diff --git a/src/tree-grid-directive.js b/src/tree-grid-directive.js index 6db9916..f725961 100644 --- a/src/tree-grid-directive.js +++ b/src/tree-grid-directive.js @@ -16,8 +16,7 @@ " \n" + " \n" + - " \n" + " \n" + " {{row.branch[expandingProperty.field] || row.branch[expandingProperty]}}\n" + @@ -74,7 +73,7 @@ treegridTemplate) { return { - restrict : 'E', + restrict : 'EA', templateUrl: function (tElement, tAttrs) { return tAttrs.templateUrl || treegridTemplate.getPath(); }, @@ -83,8 +82,9 @@ treeData : '=', colDefs : '=', expandOn : '=', - onSelect : '&', onClick : '&', + onExpand : '&', + onCollapse : '&', initialSelection: '@', treeControl : '=' }, @@ -205,30 +205,49 @@ } }; scope.on_user_click = function (branch) { + if (branch !== selected_branch) { + select_branch(branch); + } if (scope.onClick) { scope.onClick({ branch: branch }); } }; - scope.user_clicks_branch = function (branch) { - if (branch !== selected_branch) { - return select_branch(branch); + scope.on_user_expandcollapse = function (branch) { + if (branch['children'].length > 0) { + if (branch !== selected_branch) { + select_branch(branch); + } + branch.expanded = !branch.expanded; + if (branch.expanded) { + if (scope.onExpand) { + scope.onExpand({ + branch: branch + }); + } + } else { + if (scope.onCollapse) { + scope.onCollapse({ + branch: branch + }); + } + } } }; /* sorting methods */ scope.sortBy = function (col) { - if (col.sortDirection === "asc") { - scope.treeData.sort(sort_by(col.field, true, col.sortingType)); - col.sortDirection = "desc"; - col.sortingIcon = attrs.sortedDesc; - } else { - scope.treeData.sort(sort_by(col.field, false, col.sortingType)); - col.sortDirection = "asc"; - col.sortingIcon = attrs.sortedAsc; - } - col.sorted = true; + if (col.sortDirection === "asc") { + scope.treeData.sort(sort_by(col.field, true, col.sortingType)); + col.sortDirection = "desc"; + col.sortingIcon = attrs.sortedDesc; + } else { + scope.treeData.sort(sort_by(col.field, false, col.sortingType)); + col.sortDirection = "asc"; + col.sortingIcon = attrs.sortedAsc; + } + col.sorted = true; resetSorting(col); }; @@ -241,14 +260,14 @@ } var resetSorting = function(sortedCol) { - var arraySize = scope.colDefinitions.length; - for (var i= 0;i= item.level) { - throwAway = ancestorStack.pop(); - currentLevel--; + throwAway = ancestorStack.pop(); + currentLevel--; } ancestorStack.push(item); currentLevel = item.level; if (include(item, filterString, expandingProperty, colDefinitions)) { - for(var ancestorIndex = 0; ancestorIndex < ancestorStack.length; ancestorIndex++) { - ancestor = ancestorStack[ancestorIndex]; - if(ancestor.visible){ - filtered.push(ancestor); - } - } + for(var ancestorIndex = 0; ancestorIndex < ancestorStack.length; ancestorIndex++) { + ancestor = ancestorStack[ancestorIndex]; + if(ancestor.visible){ + filtered.push(ancestor); + } + } ancestorStack = []; } } - } + } return filtered; - }; - - function include(item, filterString, expandingProperty, colDefinitions){ - var includeItem = false; - var filterApplied = false; - //first check the expandingProperty - if (expandingProperty.filterable) { - filterApplied = true; - if(checkItem(item, filterString, expandingProperty)) { - includeItem = true; - } - } - //then check each of the other columns - var arraySize = colDefinitions.length; - for (var i= 0;i Date: Fri, 21 Aug 2015 17:14:33 -0300 Subject: [PATCH 2/2] adjusting test page. --- test/treeGrid.html | 10 +++++----- test/treeGridTest.js | 8 +++++++- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/test/treeGrid.html b/test/treeGrid.html index cdec455..c3d5d2b 100644 --- a/test/treeGrid.html +++ b/test/treeGrid.html @@ -3,7 +3,7 @@ - + @@ -18,22 +18,22 @@

trap tree in a grid



- standard directive: <tree-grid tree-data="tree_data" tree-control="my_tree" col-defs="col_defs" expand-on="expanding_property" on-select="my_tree_handler(branch)" expand-level="2" icon-leaf= "glyphicon glyphicon-globe"></tree-grid> + standard directive:
<tree-grid tree-data="tree_data" tree-control="my_tree" col-defs="col_defs" expand-on="expanding_property" on-click="my_tree_handler_click(branch)"
on-expand="my_tree_handler_expand(branch)" on-collapse="my_tree_handler_collapse(branch)" expand-level="2" icon-leaf= "glyphicon glyphicon-globe"></tree-grid>

- +
- bare minimum directive: <tree-grid tree-data="tree_data"></tree-grid> + bare minimum directive:
<tree-grid tree-data="tree_data"></tree-grid>

- +