AngularJS module for working with treetables using jquery-treetable under the covers.
<script src="jquery.treetable.js"></script> <!-- See http://plugins.jquery.com/treetable/ -->
<link rel="stylesheet" type="text/css" href="jquery.treetable.css" />
<link rel="stylesheet" type="text/css" href="jquery.treetable.theme.default.css" /> <!-- You'll probably want to modify this -->
<script src="angular.min.js"></script>
<script src="angular-treetable.min.js"></script>
Create an ngTreetableParams
object containing your configuration. Applicable keys are:
getNodes(parent)
- afunction
which takes a parent (ornull
for the root) and returns an array of the children of that parent. May also return apromise
resolving to the children.getTemplate(node)
- afunction
which returns the path to a template to use for rendering a single node.options
- options for the underlying treetable, see jQuery Treetable Configuration
app.controller('MyController', function($scope, ngTreetableParams) {
$scope.params = new ngTreetableParams({
getNodes: function(parent) {
return [{name: 'foo', value: 'bar'}];
},
getTemplate: function(node) {
return 'TreeNode.html';
},
options: {
onNodeExpand: function() {
console.log('A node was expanded!');
}
}
});
}
Note that you can also call refresh()
on the ngTreetableParams
instance to rebuild the entire table.
Use the tt-node
directive in your templates to define your table row. The optional is-branch
attribute indicates whether
the branch can be expanded.
You can define your template on the same page as the table:
<script type="text/ng-template" id="TreeNode.html">
<tr tt-node is-branch="node.name == 'foo'">
<td><span ng-bind="node.name"></span></td>
<td ng-bind="node.type"></td>
</tr>
</script>
or in a separate file to be loaded over an HTTP call:
<!-- TreeNode.html -->
<tr tt-node is-branch="node.name == 'foo'">
<td><span ng-bind="node.name"></span></td>
<td ng-bind="node.type"></td>
</tr>
Note: Be wary of doing an ng-bind
to the first td
in your template, as this causes issues with jquery-treetable's indentation.
Add a tt-table
directive to your table element and pass in the parameters via tt-params
.
<table tt-table tt-params="params">
<thead>
<tr>
<th>Name</th>
<th>Value</th>
</tr>
</thead>
<tbody></tbody>
</table>
Here's a really simple example for the getNodes
function, which returns data directly from the scope.
var tableData = [
{
name: 'Some Folder',
type: 'folder',
size: '',
children: [
{
name: 'some file.pdf',
type: 'file',
size: '500KB'
},
{
name: 'another_file.doc',
type: 'file',
size: '344KB'
}
]
}
];
$scope.params = new ngTreetableParams({
getNodes: function(parent) {
return parent ? parent.children : data;
},
// ...
});
You can also return a promise from getNodes
. This is useful when you need to fetch data externally, like from $http
. For example:
$scope.params = new ngTreetableParams({
getNodes: function(parent) {
var deferred = $q.defer();
$http.get('/get-nodes').success(function(data) {
deferred.resolve(data);
});
return deferred.promise;
},
// ...
});
See the example
folder to learn more.