xtree树型控件的使用

最新推荐文章于 2017-08-18 11:21:00 发布

iteye_9926

最新推荐文章于 2017-08-18 11:21:00 发布

阅读量557

点赞数

分类专栏： JAVA 文章标签： JavaScript XML 数据结构活动 Web ViewUI

本文链接：https://blog.youkuaiyun.com/iteye_9926/article/details/81696598

版权

JAVA 专栏收录该内容

50 篇文章

订阅专栏

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 "tree1.xml"" 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的嵌套来表示。但好像不能构造诸如含有单选钮或是复选框的节点。