4Fang财务软件、四方在线软件、SaaS

简单实用的就是最好的!
帮助中心 | 登录 | 注册 | 关于 |

 
   xTree的用法

jangogo @ 2010-5-15 12:34:00

js/xtree.js 所提供的树控件是一个可以和XML绑定的树图控件(默认是不绑定的, 通过Node的loadXMLDoc 等方法和XML绑定并载入XML内容。

依赖文件：
js文件：
<script language=javascript src="js/xtree.js"></script>

CSS文件
<link href="skins/default/tree.css" rel="stylesheet" type="text/css">

 
  1. //xTree(sRootLabel, sIconSrc, hideColumnHeadings, hideRootNode)   
  2. tree = new xTree('Test Tree', '',true,false);   
  3. tree.addColumn ( new xTreeColumn(0, '') ); //隐藏列   
  4. tree.addColumn ( new xTreeColumn(440, '') );   
  5. //tree.showColumnHeadings=false;   
  6. tree.nLabelColumn = 1; //第一列作为标签文字列   
  7.   
  8. tree.BodyHeight=320;   
  9.   
  10. tree.rootNode.setText('','科目'); //一定会有有一个跟节点，参数的数量就是节点文字按列的数量   
  11.   
  12. //可以自己定义一个节点，非绑定，一般而言，这个节点在我们动态和XML绑定时是必须的，因为动态载入时，要求有一个Loading节点，载入完成后会自动删除   
  13. var node = new xTreeNode(true);   
  14. node.setText('','Loading.');   
  15. tree.add(node);  

 
  1. //用XML内容载入子节点（动态绑定XML）   
  2.  tree.rootNode.loadXMLDoc(xDoc);  
XML的格式：节点的TagName是不重要的，任何TagName都是同样的结果，关键是节点和子节点的数量以及结构
节点值必须采用<![CDATA[ ]]>包裹
 
 
  1. <A>  
  2.     <C><![CDATA[子节点1的第一列]]></C>  
  3.     <C><![CDATA[子节点1的第二列]]></C>  
  4.     <C><![CDATA[子节点1的子子节点（必须的）]]></C>  
  5. </A>  
  6. <!---子子节点--->  
  7. <A>    
  8.     <C><![CDATA[子节点1的第一列]]></C>  
  9.     <C><![CDATA[子节点1的第二列]]></C>  
  10.     <C>   
  11.             <C><![CDATA[子节点1.1的第一列]]></C>  
  12.             <C><![CDATA[子节点1.1的第二列]]></C>  
  13.             <C><![CDATA[子节点1.1的子子节点（必须的）]]></C>  
  14.    </C>  
  15. </A>  
  16.   
树的定义：
 
  1. function xTree(sRootLabel, sIconSrc, hideColumnHeadings, hideRootNode) {   
  2.     this.ID                     = xTreeHandler.getUniqueID();   
  3.     xTreeHandler.allTrees[this.ID] = this;   
  4.     this.all                    = new Array(); //user indices   
  5.     this.allNodes               = new Array(); //system indices   
  6.     this.columns                = new Array();   
  7.     this.rootNode               = new xTreeNode(true, sIconSrc, null, 1);   
  8.     this.rootNode.columnText[0] = sRootLabel;   
  9.     this.rootNode.depth         = 0;   
  10.     this.rootNode.bShowHandle   = false;   
  11.     this.rootNode.oTree         = this;   
  12.     this.allNodes[this.rootNode.ID] = this.rootNode;   
  13.     this.rendered               = false;   
  14.     this.nLabelColumn           = 0; //this is the column in which the icons and branches are drawn   
  15.     this.iconPath               = 'images/';   
  16.     this.showColumnHeadings     = hideColumnHeadings ? false : true;   
  17.     this.showRootNode           = hideRootNode ? false : true;   
  18.     this.disableRecalc          = false;   
  19.     this.enableNodeDragdrop = false;   
  20.     this.dragDrop   =null;   
  21.     this.selectedNodeID=null; //新加的属性   
  22.     this.BodyHeight=400;//新加属性   
  23.     this.isfocus=false;// 新增加的属性   
  24. }   
节点定义
 
  1. function xTreeNode(bShowChildren, sIconSrc, sXMLSrc, refKey) {   
  2.     //refKey is an optional user-specified value which will be matched to this node for easy reference later   
  3.     this.columnText         = new Array();   
  4.     this.bShowChildren      = bShowChildren ? true : false;   
  5.     this.sIconSrc           = sIconSrc ? sIconSrc : null;   
  6.     this.sXMLSrc            = (typeof(sXMLSrc) == 'string') ? sXMLSrc : '';   
  7.     this.bDynamicNode       = this.sXMLSrc.length > 0 ? true : false; //set to false once children are loaded to prevent sXMLSrc being used to dynamically load the children   
  8.     this.bShowHandle        = true; //this is the + or - icon   
  9.     this.refKey             = (refKey || refKey == 0) ? refKey : null;   
  10.     this.ID                 = xTreeHandler.getUniqueID();   
  11.     this.sImages            = '';   
  12.     this.sHandle            = '';   
  13.     this.onmouseenter      = '';   
  14.     this.onmouseleave      = ''  
  15.     this.onclick            = '';   
  16.     this.ondblclick   = ''; //新增加的属性   
  17.     this.useIcon            = true;   
  18.   
  19.     this.nextSibling        = null;   
  20.     this.previousSibling    = null;   
  21.     this.firstChild         = null;   
  22.     this.lastChild          = null;   
  23.     this.parentNode         = null;   
  24.     this.oTree              = null;   
  25.     this.rendered           = false;   
  26.     this.xml = null; //新增加的属性   
  27.     //this.className            = 'tlc_node_row';   
  28.     //this.classNameHover       = 'tlc_node_row_hover';   
  29.     //this.classNameClick       = 'tlc_node_row_click';        
  30. }   

XML node 属性和treenode的对应关系
 
  1. <A       
  2.      ondblclick='sel();'    
  3.      onclick='rpt();'"    
  4.      showchildren="yes"  
  5.      iconsrc="images/folder.gif"  
  6.      xmlsrc="myfunCanReturnXML()"  
  7. ><![CDATA[ node text ]]></A>