What is it TreeGrid? This plugin needs for rendering tree in table
Root node | Additional info |
Node 1-1 | Additional info |
Node 1-2 | Additional info |
Node 1-2-1 | Additional info |
Step 1. Initialize plugin
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.treegrid.js"></script>
<link rel="stylesheet" href="css/jquery.treegrid.css">
<script type="text/javascript">
$('.tree').treegrid();
</script>
Step 2. Make table
<table class="tree">
<tr class="treegrid-1">
<td>Root node</td><td>Additional info</td>
</tr>
<tr class="treegrid-2 treegrid-parent-1">
<td>Node 1-1</td><td>Additional info</td>
</tr>
<tr class="treegrid-3 treegrid-parent-1">
<td>Node 1-2</td><td>Additional info</td>
</tr>
<tr class="treegrid-4 treegrid-parent-3">
<td>Node 1-2-1</td><td>Additional info</td>
</tr>
</table>
Step 3. See result
Root node | Additional info |
Node 1-1 | Additional info |
Node 1-2 | Additional info |
Node 1-2-1 | Additional info |
Parametr | Type | Default value | Description |
---|---|---|---|
initialState | String | expanded | Initial state of tree 'expanded' - all nodes will be expanded 'collapsed' - all nodes will be collapsed |
expanderTemplate | String | <span class="treegrid-expander"></span> | HTML Element when you click on that will be collapse/expand branches |
indentTemplate | String | <span class="treegrid-indent"></span> | HTML Element that will be placed as padding, depending on the depth of nesting node |
Method name | Description | Example |
---|---|---|
getRootNodes | Returns the root branches |
|
getNodeId | Return the id of node |
|
getParentNodeId | Return the id of parent node or null if node is root |
|
getParentNode | Return the parent node or null if node is root |
|
getChildNodes | Return the child nodes or null if node is leaf |
|
getDepth | Returns the depth of nested branch |
|
isLeaf | Is there a node leaf |
|
isLast | Is node a last element of its parent |
|
isExpanded | Is node expanded |
|
isCollapsed | Is node collapsed |
|
isOneOfParentsCollapsed | Is at least one of the parent nodes is collapsed |
|
expand | Expand node |
|
collapse | Collapse node |
|
expandRecursive | Expand nodes recursively |
|
collapseRecursive | Collapse nodes recursively |
|
expandAll | Expand all nodes |
|
collapseAll | Collapse all nodes |
|
toggle | Collapse node if it expanded and expand when collapsed |
|
render | Redraw the node and all its children |
|