├── README.md
├── treeDS.html
└── treeDS.js
/README.md:
--------------------------------------------------------------------------------
1 | # TreeGrid AngularJs-1 plugin
2 | This table will implement tree data structure in a properly indented way and also allows to take basic operation like create, edit and delete operations with sync functionality with server using ajax calls.
3 |
4 | ### Features
5 | 1. Show tree data structure in the form of a table.
6 | 2. Add new nodes on root level.
7 | 3. Add child nodes to any node.
8 | 4. Edit/delete any node.
9 | 5. Expand/collapse all nodes with just one click.
10 | 6. Update all data with server using ajax calls.
11 |
12 | ### Usage
13 | Use this plugin to show your tree data structure in a user friendly way using collapsible bootstrap table. Perform operations on your data and sync them on server using ajax calls.
14 |
15 | ### How it works?
16 | It uses simple concept of converting your tree data structure into 1-D array, just change your complex tree data structure to simple one dimentional array and use angular's ng-repeat to show this array. Each node in this array contains parent id and level/depth info, which is used to show each node at proper place and indent it.
17 | eg.
18 | ```
19 | var treeDS = [
20 | {
21 | name : aptitude,
22 | id : 123,
23 | childNodes : [
24 | {
25 | name : time and work,
26 | id : 125
27 | },
28 | {
29 | name : problem on trains,
30 | id : 127
31 | }
32 | ]
33 | }
34 | ]
35 | ```
36 |
37 | ###### Convert this tree data structure to the following one dimentional array
38 | ```
39 | var oneDArray = [
40 | {
41 | name : aptitude,
42 | id : 123,
43 | level : 0,
44 | indentClass : "indent-0",
45 | parentId : -1
46 | },
47 | {
48 | name : time and work,
49 | id : 125,
50 | level : 1,
51 | indentClass : "indent-1"
52 | parentId : 123
53 | },
54 | {
55 | name : problem on trains,
56 | id : 127,
57 | level : 1,
58 | indentClass : "indent-1",
59 | parentId : 123
60 | }
61 | ]
62 | ```
63 |
64 | This oneDArray contains all the info to show tree data structure in a table with proper parent child relationship and indentation.
65 |
66 | * level : it represents node depth.
67 | * indentClass : it will indent rows according to node depth.
68 | * parentId : it will help to show which node have to show under which node.
69 |
70 | ### Working example
71 | [Working example on js-fiddle](http://jsfiddle.net/Aditya199121/y0te91dm/1/)
72 | ### On github
73 | [See on github](https://github.com/chhikaradi21/tree-table)
--------------------------------------------------------------------------------
/treeDS.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Tree Data Structure Implementation Using Angularjs and Bootstrap
5 |
6 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 | Tree Data Structure Implementation Using Bootstrap Table
65 |
66 |