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 抽象基类,后面提到的WebFXTreeWebFXTreeItem类都继承自该基类
属性
属性名
属性类型(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);
 





实例
Xtree组件详解_第1张图片


代码:

 <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();

					}

 

你可能感兴趣的:(Xtree组件详解)