A grid to display data in tree structure by using angular, bootstrap.
Feel free to whatever you want to do with it.
Include src/treeGrid.css and src/tree-grid-directive.js in your html file after bootstrap and angular. Just add the following
<tree-grid tree-data="tree_data"></tree-grid>
tree_data: is an array of objects. If object has child put them in 'children' array of the object. an example of tree-data will look like.
$scope.tree_data = [
{Name:"USA",Area:9826675,Population:318212000,TimeZone:"UTC -5 to -10",
children:[
{Name:"California", Area:423970,Population:38340000,TimeZone:"Pacific Time",
children:[
{Name:"San Francisco", Area:231,Population:837442,TimeZone:"PST"},
{Name:"Los Angeles", Area:503,Population:3904657,TimeZone:"PST"}
]
},
{Name:"Illinois", Area:57914,Population:12882135,TimeZone:"Central Time Zone",
children:[
{Name:"Chicago", Area:234,Population:2695598,TimeZone:"CST"}
]
}
]
},
{Name:"Texas",Area:268581,Population:26448193,TimeZone:"Mountain"}
];
if you have an array sorted by primary key and parent Key, you can use getTree inside temp folder.
If you want more customization, you can use the following options
<tree-grid
tree-data = "tree_data"
col-Defs = "col_defs"
expand-on = "expanding_property"
tree-control = "my_tree"
icon-leaf = "icon-file"
icon-expand = "icon-plus-sign"
icon-collapse = "icon-minus-sign"
on-select = "my_tree_handler(branch)"
expand-level = "2">
</tree-grid>
col_defs: is an array of objects that allows you to customized column header. if displayName is not provided, field (object property) is used as display Name.
$scope.col_defs = [
{ field: "Description"},
{ field: "DemographicId", displayName: "Demographic Id"},
{ field: "ParentId", displayName: "Parent Id"},
{ field: "Area"},
{ field: "Population"},
{ field: "TimeZone", displayName: "Time Zone"}
];
expanding_property: this is the property of the objects in 'tree_data' where you want to put the ability to expand and collapse.
my_tree: you can use 'tree-control' to use expand all and collapse all. check it out in the link provided for demo
icons: define Font Awesome, bootstrap glyphicon for expand, collapse and leaf
expand-level: depth of the tree, you want to expand while loading
on-select: a click handler while you are clicking on +/-
$scope.my_tree_handler = function(branch){
console.log('you clicked on', branch)
}
###custom template If you want to use custom template, change the template in line 10 src/tree-grid-directive.js. if you want to use template in html file, replace template="" by templateUrl="mytemplate.html"
####Inspired by abn teee