xtree树型控件的使用

  xtree.js是web开发中运用较多的一个树型控件。其入门简单，功能强大，很多人在它的基础上开发出了自己的树型控件。目前xtree好像是2.0版本，与1.0版本比较该版本的改动还是很大的。一般来讲xtree有两种使用模式，显示构造树和运用xml数据源。

   第一种方式指定数据源和构造树的过程是同时的。这也是大家经常采用的方式，过程如下：

   var tree = new WebFXTree('-test-');///树的根节点显示文字为：test
    tree.setBehavior('classic');/////设置树的活动模式

   var child1 = new WebFXTreeItem('child1','',null,null,null,'Y',null,'value_of_this_node');/////创建一个节点项

  xtree.js源码中节点项的构造函数如下：

function WebFXTreeItem(sText, sAction, eParent, sIcon, sOpenIcon,sRadio,sCheckBox,sValue,sChecked)/////其中sText指定节点显示的值；sAction指定节点点击时所触发的js函数，如：sAction="javascript:alert('0')"或sAction="javascript:function_A('param')"(你可以自定以function_A函数)；eParent指定该节点的父节点，通常为空，实际中经常用tree.add(child1)的方式来指定父子关系；sIcon和sOpenIcon用以指定节点关闭和展开时的图标；sRadio,sCheckBox分别指定节点前是否有radio按钮或是一个复选框；sValue指定该节点所代表的值，如当radio钮选中，树形控件返回的值，这个功能经常用在标注上；sChecked指定该节点的选中状态。

该方式下，我们边构建树边指定数据源，使用简单，但效率很低。特别是数据源很多时，树的显示很慢。

  第二种方式运功用xml数据源，动态加载树，显示的效率较高。实际中xml数据源的片段如下：

 <?xml version="1.0"?>

<!DOCTYPE tree SYSTEM "tree.dtd">
<tree>/////根节点对应WebFXLoadTree中指定的树状结构根节点，该根有三个直接子结点
 <tree text="Loaded Item 1" action="href://webfx.eae.net" />
 <tree text="Loaded Item 2">
  <tree text="Loaded Item 2.1" action="javascript:alert(2.1)" />
 </tree>
 <tree text="Load &quot;tree1.xml&quot;" src="tree1.xml" />
</tree>

xtree的xml数据源需遵循的dtd如下：<!ELEMENT tree (tree*)>
<!ATTLIST tree
   text  CDATA #REQUIRED  ////节点显示名称，必选
   src   CDATA #IMPLIED  /////节点对应的数据源，可递归构造
   action  CDATA #IMPLIED/////节点点击时所触发的js动作
   icon  CDATA #IMPLIED////节点图标
   openIcon CDATA #IMPLIED////展开时对应的图标
   target  CDATA #IMPLIED>

页面中使用该树的代码如下：var tree = new WebFXLoadTree("root", “<%=filename%>.xml");
                                                        tree.write();

此种方式使用xtree效率较高，具有动态加载节点的功能，节点之间的父子关系通过tree的嵌套来表示。但好像不能构造诸如含有单选钮或是复选框的节点。