1 | |
---|
2 | /* |
---|
3 | * jQuery treeTable Plugin 2.3.0 |
---|
4 | * http://ludo.cubicphuse.nl/jquery-plugins/treeTable/ |
---|
5 | * |
---|
6 | * Copyright 2010, Ludo van den Boom |
---|
7 | * Dual licensed under the MIT or GPL Version 2 licenses. |
---|
8 | */ |
---|
9 | (function($) { |
---|
10 | // Helps to make options available to all functions |
---|
11 | // TODO: This gives problems when there are both expandable and non-expandable |
---|
12 | // trees on a page. The options shouldn't be global to all these instances! |
---|
13 | var options; |
---|
14 | var defaultPaddingLeft; |
---|
15 | |
---|
16 | $.fn.treeTable = function(opts) { |
---|
17 | options = $.extend({}, $.fn.treeTable.defaults, opts); |
---|
18 | |
---|
19 | return this.each(function() { |
---|
20 | $(this).addClass("treeTable").find("tbody tr").each(function() { |
---|
21 | // Initialize root nodes only if possible |
---|
22 | if(!options.expandable || $(this)[0].className.search(options.childPrefix) == -1) { |
---|
23 | // To optimize performance of indentation, I retrieve the padding-left |
---|
24 | // value of the first root node. This way I only have to call +css+ |
---|
25 | // once. |
---|
26 | if (isNaN(defaultPaddingLeft)) { |
---|
27 | defaultPaddingLeft = parseInt($($(this).children("td")[options.treeColumn]).css('padding-left'), 10); |
---|
28 | } |
---|
29 | |
---|
30 | initialize($(this)); |
---|
31 | } else if(options.initialState == "collapsed") { |
---|
32 | this.style.display = "none"; // Performance! $(this).hide() is slow... |
---|
33 | } |
---|
34 | }); |
---|
35 | }); |
---|
36 | }; |
---|
37 | |
---|
38 | $.fn.treeTable.defaults = { |
---|
39 | childPrefix: "child-of-", |
---|
40 | clickableNodeNames: false, |
---|
41 | expandable: true, |
---|
42 | indent: 19, |
---|
43 | initialState: "collapsed", |
---|
44 | treeColumn: 0 |
---|
45 | }; |
---|
46 | |
---|
47 | // Recursively hide all node's children in a tree |
---|
48 | $.fn.collapse = function() { |
---|
49 | $(this).addClass("collapsed"); |
---|
50 | |
---|
51 | childrenOf($(this)).each(function() { |
---|
52 | if(!$(this).hasClass("collapsed")) { |
---|
53 | $(this).collapse(); |
---|
54 | } |
---|
55 | |
---|
56 | this.style.display = "none"; // Performance! $(this).hide() is slow... |
---|
57 | }); |
---|
58 | |
---|
59 | return this; |
---|
60 | }; |
---|
61 | |
---|
62 | // Recursively show all node's children in a tree |
---|
63 | $.fn.expand = function() { |
---|
64 | $(this).removeClass("collapsed").addClass("expanded"); |
---|
65 | |
---|
66 | childrenOf($(this)).each(function() { |
---|
67 | initialize($(this)); |
---|
68 | |
---|
69 | if($(this).is(".expanded.parent")) { |
---|
70 | $(this).expand(); |
---|
71 | } |
---|
72 | |
---|
73 | // this.style.display = "table-row"; // Unfortunately this is not possible with IE :-( |
---|
74 | $(this).show(); |
---|
75 | }); |
---|
76 | |
---|
77 | return this; |
---|
78 | }; |
---|
79 | |
---|
80 | // Reveal a node by expanding all ancestors |
---|
81 | $.fn.reveal = function() { |
---|
82 | $(ancestorsOf($(this)).reverse()).each(function() { |
---|
83 | initialize($(this)); |
---|
84 | $(this).expand().show(); |
---|
85 | }); |
---|
86 | |
---|
87 | return this; |
---|
88 | }; |
---|
89 | |
---|
90 | // Add an entire branch to +destination+ |
---|
91 | $.fn.appendBranchTo = function(destination) { |
---|
92 | var node = $(this); |
---|
93 | var parent = parentOf(node); |
---|
94 | |
---|
95 | var ancestorNames = $.map(ancestorsOf($(destination)), function(a) { return a.id; }); |
---|
96 | |
---|
97 | // Conditions: |
---|
98 | // 1: +node+ should not be inserted in a location in a branch if this would |
---|
99 | // result in +node+ being an ancestor of itself. |
---|
100 | // 2: +node+ should not have a parent OR the destination should not be the |
---|
101 | // same as +node+'s current parent (this last condition prevents +node+ |
---|
102 | // from being moved to the same location where it already is). |
---|
103 | // 3: +node+ should not be inserted as a child of +node+ itself. |
---|
104 | if($.inArray(node[0].id, ancestorNames) == -1 && (!parent || (destination.id != parent[0].id)) && destination.id != node[0].id) { |
---|
105 | indent(node, ancestorsOf(node).length * options.indent * -1); // Remove indentation |
---|
106 | |
---|
107 | if(parent) { node.removeClass(options.childPrefix + parent[0].id); } |
---|
108 | |
---|
109 | node.addClass(options.childPrefix + destination.id); |
---|
110 | move(node, destination); // Recursively move nodes to new location |
---|
111 | indent(node, ancestorsOf(node).length * options.indent); |
---|
112 | } |
---|
113 | |
---|
114 | return this; |
---|
115 | }; |
---|
116 | |
---|
117 | // Add reverse() function from JS Arrays |
---|
118 | $.fn.reverse = function() { |
---|
119 | return this.pushStack(this.get().reverse(), arguments); |
---|
120 | }; |
---|
121 | |
---|
122 | // Toggle an entire branch |
---|
123 | $.fn.toggleBranch = function() { |
---|
124 | if($(this).hasClass("collapsed")) { |
---|
125 | $(this).expand(); |
---|
126 | } else { |
---|
127 | $(this).removeClass("expanded").collapse(); |
---|
128 | } |
---|
129 | |
---|
130 | return this; |
---|
131 | }; |
---|
132 | |
---|
133 | // === Private functions |
---|
134 | |
---|
135 | function ancestorsOf(node) { |
---|
136 | var ancestors = []; |
---|
137 | while(node = parentOf(node)) { |
---|
138 | ancestors[ancestors.length] = node[0]; |
---|
139 | } |
---|
140 | return ancestors; |
---|
141 | }; |
---|
142 | |
---|
143 | function childrenOf(node) { |
---|
144 | return $("table.treeTable tbody tr." + options.childPrefix + node[0].id); |
---|
145 | }; |
---|
146 | |
---|
147 | function getPaddingLeft(node) { |
---|
148 | var paddingLeft = parseInt(node[0].style.paddingLeft, 10); |
---|
149 | return (isNaN(paddingLeft)) ? defaultPaddingLeft : paddingLeft; |
---|
150 | } |
---|
151 | |
---|
152 | function indent(node, value) { |
---|
153 | var cell = $(node.children("td")[options.treeColumn]); |
---|
154 | cell[0].style.paddingLeft = getPaddingLeft(cell) + value + "px"; |
---|
155 | |
---|
156 | childrenOf(node).each(function() { |
---|
157 | indent($(this), value); |
---|
158 | }); |
---|
159 | }; |
---|
160 | |
---|
161 | function initialize(node) { |
---|
162 | if(!node.hasClass("initialized")) { |
---|
163 | node.addClass("initialized"); |
---|
164 | |
---|
165 | var childNodes = childrenOf(node); |
---|
166 | |
---|
167 | if(!node.hasClass("parent") && childNodes.length > 0) { |
---|
168 | node.addClass("parent"); |
---|
169 | } |
---|
170 | |
---|
171 | if(node.hasClass("parent")) { |
---|
172 | var cell = $(node.children("td")[options.treeColumn]); |
---|
173 | var padding = getPaddingLeft(cell) + options.indent; |
---|
174 | |
---|
175 | childNodes.each(function() { |
---|
176 | $(this).children("td")[options.treeColumn].style.paddingLeft = padding + "px"; |
---|
177 | }); |
---|
178 | |
---|
179 | if(options.expandable) { |
---|
180 | cell.prepend('<span style="margin-left: -' + options.indent + 'px; padding-left: ' + options.indent + 'px" class="expander"></span>'); |
---|
181 | $(cell[0].firstChild).click(function() { node.toggleBranch(); }); |
---|
182 | |
---|
183 | if(options.clickableNodeNames) { |
---|
184 | cell[0].style.cursor = "pointer"; |
---|
185 | $(cell).click(function(e) { |
---|
186 | // Don't double-toggle if the click is on the existing expander icon |
---|
187 | if (e.target.className != 'expander') { |
---|
188 | node.toggleBranch(); |
---|
189 | } |
---|
190 | }); |
---|
191 | } |
---|
192 | |
---|
193 | // Check for a class set explicitly by the user, otherwise set the default class |
---|
194 | if(!(node.hasClass("expanded") || node.hasClass("collapsed"))) { |
---|
195 | node.addClass(options.initialState); |
---|
196 | } |
---|
197 | |
---|
198 | if(node.hasClass("expanded")) { |
---|
199 | node.expand(); |
---|
200 | } |
---|
201 | } |
---|
202 | } |
---|
203 | } |
---|
204 | }; |
---|
205 | |
---|
206 | function move(node, destination) { |
---|
207 | node.insertAfter(destination); |
---|
208 | childrenOf(node).reverse().each(function() { move($(this), node[0]); }); |
---|
209 | }; |
---|
210 | |
---|
211 | function parentOf(node) { |
---|
212 | var classNames = node[0].className.split(' '); |
---|
213 | |
---|
214 | for(key in classNames) { |
---|
215 | if(classNames[key].match(options.childPrefix)) { |
---|
216 | return $("#" + classNames[key].substring(9)); |
---|
217 | } |
---|
218 | } |
---|
219 | }; |
---|
220 | })(jQuery); |
---|