");
109 | var $tbody = $("");
110 |
111 | // Construct the node container(s)
112 | var $nodeRow = $("
").addClass("node-cells");
113 | var $nodeCell = $("
").addClass("node-cell").attr("colspan", 2);
114 | var $childNodes = $node.children("ul:first").children("li");
115 | var $nodeDiv;
116 |
117 | if($childNodes.length > 1) {
118 | $nodeCell.attr("colspan", $childNodes.length * 2);
119 | }
120 | // Draw the node
121 | // Get the contents - any markup except li and ul allowed
122 | var $nodeContent = $node.clone()
123 | .children("ul,li")
124 | .remove()
125 | .end()
126 | .html();
127 |
128 | //Increaments the node count which is used to link the source list and the org chart
129 | nodeCount++;
130 | $node.data("tree-node", nodeCount);
131 | $nodeDiv = $("
");
109 | var $tbody = $("");
110 |
111 | // Construct the node container(s)
112 | var $nodeRow = $("
").addClass("node-cells");
113 | var $nodeCell = $("
").addClass("node-cell").attr("colspan", 2);
114 | var $childNodes = $node.children("ul:first").children("li");
115 | var $nodeDiv;
116 |
117 | if($childNodes.length > 1) {
118 | $nodeCell.attr("colspan", $childNodes.length * 2);
119 | }
120 | // Draw the node
121 | // Get the contents - any markup except li and ul allowed
122 | var $nodeContent = $node.clone()
123 | .children("ul,li")
124 | .remove()
125 | .end()
126 | .html();
127 |
128 | //Increaments the node count which is used to link the source list and the org chart
129 | nodeCount++;
130 | $node.data("tree-node", nodeCount);
131 | $nodeDiv = $("
");
197 | $td.attr("colspan", 2);
198 | // recurse through children lists and items
199 | buildNode($(this), $td, level+1, opts);
200 | $childNodesRow.append($td);
201 | });
202 |
203 | }
204 | $tbody.append($childNodesRow);
205 | }
206 |
207 | // any classes on the LI element get copied to the relevant node in the tree
208 | // apart from the special 'collapsed' class, which collapses the sub-tree at this point
209 | if ($node.attr('class') != undefined) {
210 | var classList = $node.attr('class').split(/\s+/);
211 | $.each(classList, function(index,item) {
212 | if (item == 'collapsed') {
213 | console.log($node);
214 | $nodeRow.nextAll('tr').css('visibility', 'hidden');
215 | $nodeRow.removeClass('expanded');
216 | $nodeRow.addClass('contracted');
217 | $nodeDiv.css('cursor','s-resize');
218 | } else {
219 | $nodeDiv.addClass(item);
220 | }
221 | });
222 | }
223 |
224 | $table.append($tbody);
225 | $appendTo.append($table);
226 |
227 | /* Prevent trees collapsing if a link inside a node is clicked */
228 | $nodeDiv.children('a').click(function(e){
229 | console.log(e);
230 | e.stopPropagation();
231 | });
232 | };
233 |
234 | })(jQuery);
235 |
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | # Readme
2 |
3 |
4 | ## Overview
5 |
6 | Follow me [@wesnolte](http://twitter.com/wesnolte)
7 |
8 | jQuery OrgChart is a plugin that allows you to render structures with nested elements in a easy-to-read tree structure. To build the tree all you need is to make a single line call to the plugin and supply the HTML element Id for a nested unordered list element that is representative of the data you'd like to display. If drag-and-drop is enabled you'll be able to reorder the tree which will also change the underlying list structure.
9 |
10 | Features include:
11 |
12 | * Very easy to use given a nested unordered list element.
13 | * Drag-and-drop functionality allows reordering of the tree and underlying `
` structure.
14 | * Showing/hiding a particular branch of the tree by clicking on the respective node.
15 | * Nodes can contain any amount of HTML except `
` and `
`.
16 | * Easy to style.
17 | * You can specify that sub-trees should start collapsed, which is useful for very large trees
18 |
19 | 
20 |
21 | ----
22 |
23 | ## Expected Markup & Example Usage
24 |
25 | To get up and running you'll need a few things.
26 |
27 | -----
28 |
29 | ### The JavaScript Libraries & CSS
30 |
31 | You need to include the jQuery as well as the jOrgChart libraries. For example:
32 |
33 |
34 |
35 |
36 | If you want to use the drag-and-drop functionality you'll need to include jQuery UI too:
37 |
38 |
39 |
40 | The core CSS is necessary to perform some of the basic styling i.e.
41 |
42 |
43 |
44 | ----
45 |
46 | ### The HTML
47 |
48 | You'll need to construct a nest unordered list that represents your node nesting. For example:
49 |
50 |
71 |
72 | If you want a sub-tree to start off hidden, just add `class="collapsed"` to a list item (`
`). That list item will appear, but everything below it won't. For example:
73 |
74 |
75 |
Food:
76 |
77 |
Beer
78 |
Vegetables
79 |
80 |
Carrot
81 |
Pea
82 |
83 |
84 |
Chocolate
85 |
86 |
87 |
88 |
89 | This plugin works by generating the tree as a series of nested tables. Each node in the tree is represented with `
`. You can include any amount of HTML markup in your `
` **except** for other `
` or `
` elements. Your markup will be used within the node's `
` element. Any classes you attach to the `
` elements will be copied to the associated node, allowing you to highlight particular parts of the tree. The special `collapsed` class described above doesn't get copied to the node.
90 |
91 |
92 | -----
93 |
94 | ### The jQuery Call
95 |
96 | And the cherry on the top is the usual call, often but not always on document load. You'll need to specify the Id of the list in this call. For example:
97 |
98 | jQuery(document).ready(function() {
99 | $("#org").jOrgChart();
100 | });
101 |
102 | This call will append the markup for the OrgChart to the `` element by default, but you can specify this as part of the options.
103 |
104 | ----
105 |
106 | ## Demo
107 |
108 | You can view a demo of this [here](https://wesnolte.github.io/jOrgChart/).
109 |
110 | ------
111 |
112 | ## Source Code
113 |
114 | Source code with an example is available [here](https://github.com/wesnolte/jOrgChart/tree/master/example "Example & Source").
115 |
116 | -----
117 |
118 | ## Configuration
119 |
120 | There are only 3 configuration options:
121 |
122 | 1. **chartElement** - used to specify which HTML element you'd like to append the OrgChart markup to. *[default='body']*
123 | 2. **depth** - tells the code what depth to parse to. The default value of "-1" instructs it to parse like it's 1999. *[default=-1]*
124 | 3. **chartClass** - the name of the style class that is assigned to the generated markup. *[default='jOrgChart']*
125 | 4. **dragAndDrop** - determines whether the drag-and-drop feature of tree node elements is enabled. *[default=false]*
126 |
--------------------------------------------------------------------------------
72 |