道非道 非常道

勤思、谨言、慎行、厚积、薄发

统计

web

天圆

经济 政治 军事

键康

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 }


读一篇好代码，有如读一本好小说


posted on 2009-07-10 11:39 星期五 阅读(834) 评论(0)  编辑  收藏 所属分类: WEB FX


只有注册用户登录后才能发表评论。
网站导航: