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 }