XLoadTree.js

1 /*----------------------------------------------------------------------------\
2 | XLoadTree 1.11 |
3 |-----------------------------------------------------------------------------|
4 | Created by Erik Arvidsson |
5 | (http://webfx.eae.net/contact.html#erik) |
6 | For WebFX (http://webfx.eae.net/) |
7 |-----------------------------------------------------------------------------|
8 | An extension to xTree that allows sub trees to be loaded at runtime by |
9 | reading XML files from the server. Works with IE5+ and Mozilla 1.0+ |
10 |-----------------------------------------------------------------------------|
11 | Copyright (c) 2001, 2002, 2003, 2006 Erik Arvidsson |
12 |-----------------------------------------------------------------------------|
13 | Licensed under the Apache License, Version 2.0 (the "License"); you may not |
14 | use this file except in compliance with the License. You may obtain a copy |
15 | of the License at http://www.apache.org/licenses/LICENSE-2.0 |
16 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
17 | Unless required by applicable law or agreed to in writing, software |
18 | distributed under the License is distributed on an "AS IS" BASIS, WITHOUT |
19 | WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the |
20 | License for the specific language governing permissions and limitations |
21 | under the License. |
22 |-----------------------------------------------------------------------------|
23 | Dependencies: xtree.js - original xtree library |
24 | xtree.css - simple css styling of xtree |
25 | xmlextras.js - provides xml http objects and xml document |
26 | objects |
27 |-----------------------------------------------------------------------------|
28 | 2001-09-27 | Original Version Posted. |
29 | 2002-01-19 | Added some simple error handling and string templates for |
30 | | reporting the errors. |
31 | 2002-01-28 | Fixed loading issues in IE50 and IE55 that made the tree load |
32 | | twice. |
33 | 2002-10-10 | (1.1) Added reload method that reloads the XML file from the |
34 | | server. |
35 | 2003-05-06 | Added support for target attribute |
36 | 2006-05-28 | Changed license to Apache Software License 2.0. |
37 |-----------------------------------------------------------------------------|
38 | Created 2001-09-27 | All changes are in the log above. | Updated 2006-05-28 |
39 \----------------------------------------------------------------------------*/
40
41 // 正在加载显示内容
42 webFXTreeConfig.loadingText = "Loading";
43 // 加载错误模板
44 webFXTreeConfig.loadErrorTextTemplate = "Error loading \"%1%\"";
45 //加载空文件错误模板
46 webFXTreeConfig.emptyErrorTextTemplate = "Error \"%1%\" does not contain any tree items";
47
48 /*
49 * WebFXLoadTree class
50 */
51
52 function WebFXLoadTree(sText, sXmlSrc, sAction, sBehavior, sIcon, sOpenIcon) {
53 // call super
54 this.WebFXTree = WebFXTree;
55 this.WebFXTree(sText, sAction, sBehavior, sIcon, sOpenIcon);
56
57 // setup default property values
58 // xml 文件路径或 document 对象
59 this.src = sXmlSrc;
60 //表示是否正在加载状态
61 this.loading = false;
62 //表示是否已经加载完状态
63 this.loaded = false;
64 //错误信息
65 this.errorText = "";
66
67 // check start state and load if open
68 if (this.open){
69 _startLoadXmlTree(this.src, this);
70 } else {
71 // and create loading item if not
72 this._loadingItem = new WebFXTreeItem(webFXTreeConfig.loadingText);
73 this.add(this._loadingItem);
74 }
75 }
76
77 //WebFXLoadTree 类，继承 WebFXTree 类的所有属性和方法。
78 WebFXLoadTree.prototype = new WebFXTree;
79
80 //先将 webFXTree expand method copy to WebFXTloadTree _webfxtree_expand method
81 // override the expand method to load the xml file
82 WebFXLoadTree.prototype._webfxtree_expand = WebFXTree.prototype.expand;
83 WebFXLoadTree.prototype.expand = function() {
84 if (!this.loaded && !this.loading) {
85 // load
86 _startLoadXmlTree(this.src, this);
87 }
88 this._webfxtree_expand();
89 };
90
91 /*
92 * WebFXLoadTreeItem class
93 */
94
95 function WebFXLoadTreeItem(sText, sXmlSrc, sAction, eParent, sIcon, sOpenIcon) {
96 // call super
97 this.WebFXTreeItem = WebFXTreeItem;
98 this.WebFXTreeItem(sText, sAction, eParent, sIcon, sOpenIcon);
99
100 // setup default property values
101 this.src = sXmlSrc;
102 this.loading = false;
103 this.loaded = false;
104 this.errorText = "";
105
106 // check start state and load if open
107 if (this.open){
108 _startLoadXmlTree(this.src, this);
109 }else {
110 // and create loading item if not
111 this._loadingItem = new WebFXTreeItem(webFXTreeConfig.loadingText);
112 this.add(this._loadingItem);
113 }
114 }
115
116 // WebFXLoadTreeItem 继承 WebFXTreeItem 所有的属性和方法。
117 WebFXLoadTreeItem.prototype = new WebFXTreeItem;
118
119 // override the expand method to load the xml file
120 WebFXLoadTreeItem.prototype._webfxtreeitem_expand = WebFXTreeItem.prototype.expand;
121 WebFXLoadTreeItem.prototype.expand = function() {
122 if (!this.loaded && !this.loading) {
123 // load
124 _startLoadXmlTree(this.src, this);
125 }
126 this._webfxtreeitem_expand();
127 };
128
129 // reloads the src file if already loaded
130 WebFXLoadTree.prototype.reload = WebFXLoadTreeItem.prototype.reload = function () {
131 // if loading do nothing
132 if (this.loaded) {
133 var open = this.open;
134 // remove
135 while (this.childNodes.length > 0){
136 this.childNodes[this.childNodes.length - 1].remove();
137 }
138 this.loaded = false;
139
140 this._loadingItem = new WebFXTreeItem(webFXTreeConfig.loadingText);
141 this.add(this._loadingItem);
142
143 if (open)
144 this.expand();
145 } else if (this.open && !this.loading){
146 _startLoadXmlTree(this.src, this);
147 }
148 };
149
150
151
152 /*
153 * Helper functions
154 */
155
156 // creates the xmlhttp object and starts the load of the xml document
157 function _startLoadXmlTree(sSrc, jsNode) {
158 if (jsNode.loading || jsNode.loaded)
159 return;
160 jsNode.loading = true;
161 var xmlHttp = XmlHttp.create();
162 xmlHttp.open("GET", sSrc, true); // async
163 xmlHttp.onreadystatechange = function () {
164 if (xmlHttp.readyState == 4) {
165 _xmlFileLoaded(xmlHttp.responseXML, jsNode);
166 }
167 };
168 // call in new thread to allow ui to update
169 window.setTimeout(function () {
170 xmlHttp.send(null);
171 }, 10);
172 }
173
174 // Inserts an xml document as a subtree to the provided node
175 function _xmlFileLoaded(oXmlDoc, jsParentNode) {
176 if (jsParentNode.loaded)
177 return;
178
179 var bIndent = false;
180 //是否存在子节点的状态
181 var bAnyChildren = false;
182 jsParentNode.loaded = true;
183 jsParentNode.loading = false;
184
185 // check that the load of the xml file went well
186 // 检查加载的 xml 文件是否顺利 documentELement 返回文档的根节点。
187 if( oXmlDoc == null || oXmlDoc.documentElement == null) {
188 jsParentNode.errorText = parseTemplateString(webFXTreeConfig.loadErrorTextTemplate,
189 jsParentNode.src);
190 } else {
191 // there is one extra level of tree elements
192 //树型根元素
193 var root = oXmlDoc.documentElement;
194
195 // loop through all tree children
196 var cs = root.childNodes;
197 var l = cs.length;
198 for (var i = 0; i < l; i++) {
199 if (cs[i].tagName == "tree") {
200 bAnyChildren = true;
201 bIndent = true;
202 jsParentNode.add( _xmlTreeToJsTree(cs[i]), true);
203 }
204 }
205
206 // if no children we got an error
207 if (!bAnyChildren){
208 jsParentNode.errorText = parseTemplateString(webFXTreeConfig.emptyErrorTextTemplate,
209 jsParentNode.src);
210 }
211 }
212
213 // remove dummy
214 if (jsParentNode._loadingItem != null) {
215 jsParentNode._loadingItem.remove();
216 bIndent = true;
217 }
218
219 if (bIndent) {
220 // indent now that all items are added
221 jsParentNode.indent();
222 }
223
224 // show error in status bar
225 if (jsParentNode.errorText != "")
226 //status 属性可设置或返回窗口状态栏中的文本。
227 window.status = jsParentNode.errorText;
228 }
229
230 // parses a string and replaces %n% with argument nr n
231 function parseTemplateString(sTemplate) {
232 // arguments 属性，函数可以处理可变数量的参数。
233 // arguments 对象的 length 属性包含了传递给函数的参数的数目。
234 // 对于arguments 对象所包含的单个参数，其访问方法与数组中所包含的参数的访问方法相同。
235 var args = arguments;
236 var s = sTemplate;
237
238 //replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
239 s = s.replace(/\%\%/g, "%");
240
241 for (var i = 1; i < args.length; i++){
242 // RegExp 是正则表达式的缩写.
243 s = s.replace( new RegExp("\%" + i + "\%", "g"), args[i] )
244
245 }
246 return s;
247 }
248
249 // Converts an xml tree to a js tree. See article about xml tree format
250 function _xmlTreeToJsTree(oNode) {
251 // retreive attributes
252 var text = oNode.getAttribute("text");
253 var action = oNode.getAttribute("action");
254 var parent = null;
255 var icon = oNode.getAttribute("icon");
256 var openIcon = oNode.getAttribute("openIcon");
257 var src = oNode.getAttribute("src");1
258 var target = oNode.getAttribute("target");
259 // create jsNode
260 var jsNode;
261 if (src != null && src != ""){
262 jsNode = new WebFXLoadTreeItem(text, src, action, parent, icon, openIcon);
263 } else{
264 jsNode = new WebFXTreeItem(text, action, parent, icon, openIcon);
265 }
266 if (target != ""){
267 jsNode.target = target;
268 }
269
270 // go through childNOdes
271 var cs = oNode.childNodes;
272 var l = cs.length;
273 for (var i = 0; i < l; i++) {
274 if (cs[i].tagName == "tree")
275 jsNode.add( _xmlTreeToJsTree(cs[i]), true );
276 }
277 return jsNode;
278 }