一直觉得短信平台中群发短信时通讯簿的选择号码方式不太好用，因此想找一个好用的
tree
控件。用过
dtree
，简单但功能不够强大（节点不能带
checkbox
）。所以就试了下大名鼎鼎的
ext
库，其中的
treepanel
果然十分强大，完全满足我的需要：
1、
节点带
checkbox
，方便选择多个号码；
2、
当选择
/
反选父节点时，自动选择
/
反选其下的所有子节点；
3、
树的模型数据可以来自
json
，也可以来自
xml
；
4、
Ext
库对事件的支持十分全面，如特有的
checkchange
事件；
5、
跨浏览器支持，目前在
ie
和
firefox
下都调试通过。
一、准备工作
1
、首先需要下载
ext
库，我目前使用的版本是
ext-2.2.1.zip
，解压缩后，我们需要的只是以下几个目录和文件：
Adaper/ext
Resource
ext-all.js
ext-all-debug.js
ext-core.js
ext-core-debug.js
在应用程序发布目录下建一个
extjs
目录，然后把上述内容拷贝至其中。
2
、另外，要正确解析
json
，我们还需要
org.json.jar
这个包。把它拷贝到
web-inf/lib
目录下。
3
、示例程序。在应用程序发布目录下建一个
tree
目录，把
tree.jsp
和
treesample.jsp
放到其中。
二、在页面中引用
ext
库，并使用
treepanel
组件
打开
tree.jsp
页面，首先如果你不想看到菜单里的中文都变成一堆乱码的话，在
第一行加上：
<%@ page contentType="text/html;
charset=gbk" %>
然后是导入
ext
库，注意
href
中的脚本位置，如果你的
ext
库所在位置跟本文不一样，请修改它，其中
ext-all-debug.js
在发布时可以改为
ext-all.js
：
<link rel="stylesheet"
type="text/css"
href="../extjs/resources/css/ext-all.css">
<script type="text/javascript"
src="../extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript"
src="../extjs/ext-all-debug.js"></script>
接下来是在脚本中生成
ext
treepanel
组件：
Ext.BLANK_IMAGE_URL =
'../extjs/resources/images/vista/s.gif'; //
选择模板
:vista
var tree = null;
Ext.onReady(function(){
var Tree = Ext.tree;
tree = new Tree.TreePanel({
el:'tree-div',
//
树显示的位置
,dom
元素的
id
autoScroll:true,
animate:false,
enableDD:false,
//
是否支持拖拽
containerScroll:
true,
loader:
new Tree.TreeLoader({
dataUrl:'treesample.jsp'
})
,
rootVisible: false
});
注意其中红色字体部分，
TreeLoader
通过
ajax
方式请求一个
url
，以获得树的
model
。
Model
的数据类型可以是
json
，也可以是
xml
。本文采用
json
方式。
当然，为了达到更好的效果，还定义了一个
ext
事件，用于实现勾选
/
反选父节点时自动勾选
/
反选所有子节点：
tree.on('checkchange', function(node,
checked) {
node.expand();
node.attributes.checked =
checked;
node.eachChild(function(child) {
child.ui.toggleCheck(checked);
child.attributes.checked = checked;
child.fireEvent('checkchange', child, checked);
});
}, tree);
另外定义的两个
js
函数，一个实现打印选择的所有节点的
id
值，一个实现展开
/
折叠全部子节点，根据需要进行定义。
最后，需要在
body
中定义
tree
需要显示的位置：
<div id="tree-div"
style="overflow:auto; height:300px;width:300px;border:1px solid
c3daf9;"></div>
三、获取节点数据
Treepanel
需要的节点数据由
treesample.jsp
提供，大部分的代码集中在这里。其实也很简单，就是从数据库中
select
数据，然后通过
org.json.JSONArray
和
org.json.JSONObject
对象构造一个
json
树组，具体内容看源代码。
杨宏焱
2009-12-4
详细源代码、ext库、jar包等都已经上传到资源
里。