带CheckBox,RadioButton的网页树控件

EXTree（Extended XTree）基于XTree开发而成。我于2004年完成第一个版本，至今已
历时3年多，期间多次升级和完善，扩展出了很多的功能。最新版本是2.5，于08年3月推出。
这些年中在N个项目上使用验证表明，EXTree简单易用，功能强大，可以满足项目上需要的所有
复杂的功能要求。

EXTree使用Javascript和Ajax技术，面向对象设计思想，遵循DOM1标准，可以在支持DOM1的浏览器运行。
在我所做的测试中，EXTree能用在IE5.5+，Opera9，FireFox2上。其中在IE上得到多个项目使用。由于FireFox
上Ajax的同步处理时不响应onreadystatechange事件，所以在FireFox上只能用异步处理Ajax请求。

EXTree有普通树、CheckBox树、RadioButton树 3种类型的树，每种类型的树又分为静态和动态两种，所以
共有6种类型的树（静态树是指树节点在网页生成时，已经全部加载。动态树是指网页生成时只生成了部分
节点，当展开某节点时，才取它的子节点加载）。因为EXTree是面向对象的设计，不同类型的树节点类是
具有继承关系，所以同一棵树可以有不同类型的树节点。

EXTree除了一般我们见到的网页树控件有的功能外，还具有以下特色功能：
1、面向对象设计，易学易用；
2、独立的CSS控制外观；
3、可以在cookie保存树的展开状态；
4、树节点可以有不同的图标；
5、不用刷新页面而改变节点的名称和图标；
6、树节点名称文本可以设置不同的颜色；
7、树节点可以自定义属性。当你需要通过节点获取到更多的信息时，就可用自定义属性。比如组织机构树
有机构、用户节点，机构可能还分多种类型，这时就可以用节点自定义属性来区分树节点是哪种类型；
8、CheckBox树、Radio树节点可以禁用（disabled），禁用后树节点变灰，并不可用；
9、CheckBox树中，可以由开关控制是否级联选择（选中父节点时是否自动选中它的所有子节点）；
10、CheckBox树节点有notReturn属性，当该属性为true时，即使这个节点被选中，调用方法获取所有选中
的节点时，这个节点的值不会返回。比如当某个业务要选择用户，这时提供一棵机构和用户的CheckBox树，
机构节点的notReturn属性设为true。这样即使机构节点处于选中状态，也不会被返回；
11、CheckBox树、Radio树提供onchange事件。当单击树节点的CheckBox或RadioButton时，触发onchange事件；
12、动态树提供onloaded事件。当某动态节点展开并加载完它的子节点时，触发该事件；

生成树的简单示例代码：

//  import extree.js file.
< script language = " javascript " >
webFXTreeConfig.setImagePath( " js/images/ " );  //  设置节点图标所在路径.
var  tree  =   new  WebFXTree( " 树根节点 " ,  " alert('TreeRoot') " );   //  生成树根节点.
var  node1  =   new  WebFXTreeItem( " 树节点1 " , " alert('TreeNode1') " , tree);    //  树根的第一个子节点。
var  node2  =   new  WebFXTreeItem( " 树节点2_sina首页 " , " http://www.sina.com.cn " );    //  生成第二个节点。
tree.add(node2);   //  node2加为tree的子节点。
document.write(tree);  //  在页面显示树.
</ script >

 

上面这段代码简单演示了EXTree构造树的过程，非常简单，易懂，没有复杂的HTML代码拼接。

我的百度空间中有EXTree效果截图 http://hi.baidu.com/apollo47/album 。

我的联系方式：QQ: 22309797   EMail: apollo47@126.com

声明：本文可以转载，但必须注明原作者和出处。