Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adjusting the select logic #62

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Adjusting the select logic #62

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2c3e113
adjusting events related to select branch, click branch, expand branc…
bgildson Aug 21, 2015
6105651
adjusting test page.
bgildson Aug 21, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 15 additions & 6 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
</tree-grid>
Expand Down Expand Up @@ -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
Expand Down
199 changes: 109 additions & 90 deletions src/tree-grid-directive.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,7 @@
" <tbody>\n" +
" <tr ng-repeat=\"row in tree_rows | searchFor:$parent.filterString:expandingProperty:colDefinitions track by row.branch.uid\"\n" +
" ng-class=\"'level-' + {{ row.level }} + (row.branch.selected ? ' active':'')\" class=\"tree-grid-row\">\n" +
" <td><a ng-click=\"user_clicks_branch(row.branch)\"><i ng-class=\"row.tree_icon\"\n" +
" ng-click=\"row.branch.expanded = !row.branch.expanded\"\n" +
" <td><a ng-click=\"on_user_expandcollapse(row.branch)\"><i ng-class=\"row.tree_icon\"\n" +
" class=\"indented tree-icon\"></i>\n" +
" </a><span class=\"indented tree-label\" ng-click=\"on_user_click(row.branch)\">\n" +
" {{row.branch[expandingProperty.field] || row.branch[expandingProperty]}}</span>\n" +
Expand Down Expand Up @@ -74,7 +73,7 @@
treegridTemplate) {

return {
restrict : 'E',
restrict : 'EA',
templateUrl: function (tElement, tAttrs) {
return tAttrs.templateUrl || treegridTemplate.getPath();
},
Expand All @@ -83,8 +82,9 @@
treeData : '=',
colDefs : '=',
expandOn : '=',
onSelect : '&',
onClick : '&',
onExpand : '&',
onCollapse : '&',
initialSelection: '@',
treeControl : '='
},
Expand Down Expand Up @@ -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);
};

Expand All @@ -241,14 +260,14 @@
}

var resetSorting = function(sortedCol) {
var arraySize = scope.colDefinitions.length;
for (var i= 0;i<arraySize;i++) {
var col = scope.colDefinitions[i];
if (col.field != sortedCol.field) {
col.sorted = false;
col.sortDirection = "none";
}
}
var arraySize = scope.colDefinitions.length;
for (var i= 0;i<arraySize;i++) {
var col = scope.colDefinitions[i];
if (col.field != sortedCol.field) {
col.sorted = false;
col.sortDirection = "none";
}
}
}

/* end of sorting methods */
Expand Down Expand Up @@ -650,81 +669,81 @@
})

.filter('searchFor', function() {
return function(arr, filterString, expandingProperty, colDefinitions) {
var filtered = [];
//only apply filter for strings 3 characters long or more
if (!filterString || filterString.length < 3) {
for (var i = 0; i < arr.length; i++) {
var item = arr[i];
if (item.visible) {
filtered.push(item);
}
}
} else {
var ancestorStack = [];
var currentLevel = 0;
return function(arr, filterString, expandingProperty, colDefinitions) {
var filtered = [];
//only apply filter for strings 3 characters long or more
if (!filterString || filterString.length < 3) {
for (var i = 0; i < arr.length; i++) {
var item = arr[i];
if (item.visible) {
filtered.push(item);
}
}
} else {
var ancestorStack = [];
var currentLevel = 0;
for (var i = 0; i < arr.length; i++) {
var item = arr[i];
while (currentLevel >= 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<arraySize;i++) {
var col = colDefinitions[i];
if (col.filterable) {
filterApplied = true;
if(checkItem(item, filterString, col)) {
includeItem = true;
}
}
}
if (filterApplied) {
return includeItem;
} else {
return true;
}
}
function checkItem(item, filterString, col) {
if (col.sortingType === "number") {
if (item.branch[col.field] != null
&& parseFloat(item.branch[col.field]) === parseFloat(filterString)) {
return true;
}
} else {
if (item.branch[col.field] != null
&& item.branch[col.field].toLowerCase().indexOf(filterString.toLowerCase()) !== -1) {
return true;
}
}
}
};
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<arraySize;i++) {
var col = colDefinitions[i];
if (col.filterable) {
filterApplied = true;
if(checkItem(item, filterString, col)) {
includeItem = true;
}
}
}
if (filterApplied) {
return includeItem;
} else {
return true;
}
}
function checkItem(item, filterString, col) {
if (col.sortingType === "number") {
if (item.branch[col.field] != null
&& parseFloat(item.branch[col.field]) === parseFloat(filterString)) {
return true;
}
} else {
if (item.branch[col.field] != null
&& item.branch[col.field].toLowerCase().indexOf(filterString.toLowerCase()) !== -1) {
return true;
}
}
}
});
}).call(window);
10 changes: 5 additions & 5 deletions test/treeGrid.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<!-- for local development -->
<!-- <link rel="stylesheet" href="../lib/bootstrap/css/bootstrap.min.css"> -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="../src/treeGrid.css">
</head>
<body ng-controller="treeGridController" style="margin:20px">
Expand All @@ -18,22 +18,22 @@ <h4 class=" text-center text-info">trap tree in a grid</h4>
<button ng-click="showMinDir=true" class="btn btn-primary btn-sm">Use minimum directive</button>
<br/><br/>
<div ng-show="!showMinDir">
<strong>standard directive: </strong><code>&lt;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"&gt;&lt;/tree-grid&gt;</code>
<strong>standard directive: </strong><br><code>&lt;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)" <br> on-expand="my_tree_handler_expand(branch)" on-collapse="my_tree_handler_collapse(branch)" expand-level="2" icon-leaf= "glyphicon glyphicon-globe"&gt;&lt;/tree-grid&gt;</code>
<br/>
<br/>
<button ng-click="my_tree.expand_all()" class="btn btn-default btn-sm">Expand All</button>
<button ng-click="my_tree.collapse_all()" class="btn btn-default btn-sm">Collapse All</button>
<input class="input-sm pull-right" type="text" data-ng-model="filterString" placeholder="Filter" />
<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>
<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>
</div>
<div ng-show="showMinDir">
<strong>bare minimum directive:</strong> <code>&lt;tree-grid tree-data="tree_data"&gt;&lt;/tree-grid&gt;</code>
<strong>bare minimum directive:</strong><br><code>&lt;tree-grid tree-data="tree_data"&gt;&lt;/tree-grid&gt;</code>
<br/>
<br/>
<tree-grid tree-data="tree_data"></tree-grid>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.js"></script>
<!-- for local development -->
<!--
<script src="../lib/angular/angular.min.js"></script>
Expand Down
8 changes: 7 additions & 1 deletion test/treeGridTest.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,9 +188,15 @@
displayName: "Time Zone"
}
];
$scope.my_tree_handler = function (branch) {
$scope.my_tree_handler_click = function (branch) {
console.log('you clicked on', branch)
}
$scope.my_tree_handler_expand = function (branch) {
console.log('you expand', branch)
}
$scope.my_tree_handler_collapse = function (branch) {
console.log('you collapse', branch)
}

function getTree(data, primaryIdName, parentIdName) {
if (!data || data.length == 0 || !primaryIdName || !parentIdName)
Expand Down