Xtree组件详解

在项目里头用到了xtree.js组件，分析了一下它的源码，发现还不是protoType框架，但是用起来相当的方便，在此给大家分享一下： 该组件是一个基于javascript封装的纯客户端组件，通过该组件API可以轻松的用很少的代码量完成一个树状导航菜单的构造工作，该组件完全按照OO思想封装，对于熟悉java的程序员来说很容易上手。 可在http://webfx.eae.net/dhtml/xtree/官方网站下载该组件，包括一个核心的xtree.js文件，在要使用该组件的页面直接包含即可使用： <script type="text/javascript" src="/js/xtree.js"></script> 该组件的主要类及属性如下： WebFXTreeAbstractNode： 抽象基类，后面提到的WebFXTree和WebFXTreeItem类都继承自该基类

属性
属性名	属性类型（js数据类型）	描述
id	Number	只读属性，节点的唯一ID
text	String	节点显示的标签名
action	String	该节点对应的url连接
open	Boolean	节点是否展开（如果没有子节点会一直返回false）
icon	String	节点图标.默认为xtree.js同级目录下images目录下的图象
openIcon	String	节点折叠时的图标，默认为xtree.js同级目录下images目录下的图象
parentNode	Reference	父节点的引用
childNodes	Array	子节点数组

 

方法
方法名	方法返回类型	描述
add(oNode, [bNoIdent])	Reference	添加一个树节点（子树）到当前节点，包含两个参数，前一个为 webfxtreeitem 对象实例，后一个为可选 boolean 参数，设为 true 将防止在增加树节点时树的折叠操作，返回被加入节点的引用
indent()	Void	折叠操作
toggle()	Void	折叠/展示切换
expand()	Void	展开
collapse()	Void	折叠
expandAll()	Void	展开该节点及所有下级子节点.
collapseAll()	Void	折叠该节点及所有子节点
expandChildren()	Void	折叠该节点的所有子节点
toString()	String	构造树节点的Html代码

 

 

WebFXTree：该类用于建立实际的树根，子树节点可通过WebFXTreeItem类实例的方式添加，继承WebFXTreeAbstractNode基类，拥有WebFXTreeAbstractNode的所有属性方法。

构造方法：new WebFXTree([text], [action])
参数名	参数类型（js数据类型）	描述
text	String	根节点显示标签
action	String	根节点的url(可选参数)

 

属性
属性名	属性类型（js数据类型）	描述
rendered	Boolean	表明树是否已创建并渲染

 

方法
方法名	方法返回类型	描述
getSelected()	Reference	返回用户选择的节点实例.
setBehavior(sBehavior)	Void	默认为classic,如果设置为explore时可以使树节点展示看起来更像windows Explore
getBehavior()	String	返回classic/explore

WebFXTreeItem：该类用于创建树节点，可以被添加到WebFxTree或者另一个WebFXTreeItem实例中，继承WebFXTreeAbstractNode类的所有属性和方法。  

构造方法：WebFXTreeItem([text], [action], [parent], [icon], [openIcon])
参数名	参数类型（js数据类型）	描述
text	String	根节点显示标签
action	String	根节点的url(可选参数)
parent	Reference	父节点（可选参数）
icon	String	节点图标（可选参数）
openIcon	String	节点展开时的图标（可选参数）

 

方法
方法名	方法返回类型	描述
getFirst()	Reference	返回一个子节点的引用
getLast()	Reference	返回最后一个子节点的引用

了解以上XTree组件后，我们可以通过如下的代码实例来轻松的创建一颗树：

var tree = new WebFXTree('Root');

tree.setBehavior('explorer');

tree.icon = ' /images/notepad.gif';

tree.add(new WebFXTreeItem('1'));

var folder = new WebFXTreeItem('2')

tree.add(folder);

var t21 = new WebFXTreeItem('2.1');

t21.action = “/jsp/treeAction.do?id=2.1”;

folder.add(t21);

var t22 = new WebFXTreeItem('2.2');

t21.action = “/jsp/treeAction.do?id=2.2”;

folder.add(t22);

var t23 = new WebFXTreeItem('2.3');

t21.action = “/jsp/treeAction.do?id=2.3”;

folder.add(t23);

tree.add(new WebFXTreeItem('3')); 

t21.action = “/jsp/treeAction.do?id=3”;

document.write(tree);

 





实例



代码：

 <script type="text/javascript">  
                       
   
// var tree_gen="<?php echo $arr[0]['ConstrProjName'];?>";    
// var tree_len="<?php echo count($arr);?>"                    
  
// var arr = <?php echo json_encode($arr) ?>;                  
  
  
if (document.getElementById) {  
                        var tree = new WebFXTree('工程建名');  
                        tree.setBehavior('classic');  
                        <?php   
                            if($arr){  
                                foreach ($arr as $value){  
                                    echo "var note".$value['ConstrProjID']." = new WebFXTreeItem('".$value['ConstrProjName']."');\r\n";  
                                    echo "note".$value['ConstrProjID'].".action=\"".$value['PLeft']."\";";  
                                    if ($value['KindLvl']=="1"){  
                                        //echo "action";  
                                        //echo "note".$value['ConstrProjID']".".action=\"aaa\";";  
                                        echo "tree.add(note".$value['ConstrProjID'].");\r\n";  
                                    }else{  
                                        //echo "note".$value['ParentID']".".action=."aaa";  
                                        echo "note".$value['ParentID'].".add(note".$value['ConstrProjID'].");\r\n";   
                                    }  
                                }  
                            }  
                        ?>  
                        document.write(tree);  
                        tree.expandAll();  
                    }  
  
  
//document.write("999");  
</script>  


360右键 查看源码效果
if (document.getElementById) {
						var tree = new WebFXTree('工程建名');
						tree.setBehavior('classic');
												var note2 = new WebFXTreeItem('横岭特大桥');
note2.action="http://www.tiejian.com:81/project_c/projectDesign_select/2";tree.add(note2);
var note4 = new WebFXTreeItem('津台');
note4.action="http://www.tiejian.com:81/project_c/projectDesign_select/4";note2.add(note4);
var note6 = new WebFXTreeItem('大桥刺填筑');
note6.action="http://www.tiejian.com:81/project_c/projectDesign_select/6";note4.add(note6);
var note7 = new WebFXTreeItem('摩擦板');
note7.action="http://www.tiejian.com:81/project_c/projectDesign_select/7";note4.add(note7);
var note10 = new WebFXTreeItem('梁面');
note10.action="http://www.tiejian.com:81/project_c/projectDesign_select/10";note2.add(note10);
var note11 = new WebFXTreeItem('吊杆孔');
note11.action="http://www.tiejian.com:81/project_c/projectDesign_select/11";note10.add(note11);
var note12 = new WebFXTreeItem('打磨修补');
note12.action="http://www.tiejian.com:81/project_c/projectDesign_select/12";note10.add(note12);
var note15 = new WebFXTreeItem('桥面供水');
note15.action="http://www.tiejian.com:81/project_c/projectDesign_select/15";note2.add(note15);
var note16 = new WebFXTreeItem('桥台防护墙');
note16.action="http://www.tiejian.com:81/project_c/projectDesign_select/16";note2.add(note16);
var note3 = new WebFXTreeItem('东新店子隧道');
note3.action="http://www.tiejian.com:81/project_c/projectDesign_select/3";tree.add(note3);
var note13 = new WebFXTreeItem('子项目一');
note13.action="http://www.tiejian.com:81/project_c/projectDesign_select/13";note3.add(note13);
var note14 = new WebFXTreeItem('子项目二');
note14.action="http://www.tiejian.com:81/project_c/projectDesign_select/14";note3.add(note14);
						document.write(tree);
						tree.expandAll();

					}