web中的树形结构【小结】
web中的树形结构【小结】
最近在做一个项目，是一个b/s架构的，在项目中，用到了树形结构，即如图1所示的结构。
在实现的过程中，因为我们的整个项目是基于Ext js实现的，所以首先考虑的是用Ext js的Tree来实现，但是在后来做的过程中发现，由于IE在处理异步并发方面有点问题，导致显示出来的树形结构要么就是完全显示不出来，要么就是当树有多级的时候只能显示第一级，下面的子节点显示不完全。基于上面的错误，测试了好多种方法，最后的结果还是无功而返！所以就在考虑用别的树形结构去实现，这自然而然的就想到了jquery的zTree。相比ext js，jquery的特点表现的很明显，至于详细的是那些，本文不做详细说明。具体的下面来详细介绍一下ext tree和jquery下树形结构的实现。
一、Ext js tree
1、Ext js简介
ExtJS是一个很不错的 Ajax框架，可以用来开发带有华丽外观的富客户端应用，使得我们的 b/s应用更加具有活力及生命力。ExtJS是一个用 javascript编写，与后台技术无关的前端 ajax框架。因此，可以把 ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。
ExtJs最开始基于 YUI技术，由开发人员 Jack Slocum开发，通过参考 Java Swing
等机制来组织可视化组件，无论从 UI界面上 CSS样式的应用，到数据解析上的异常处理，
都可算是一款不可多得的 JavaScript客户端技术的精品。
2、 获得与引用Ext js
要使用 ExtJS，那么首先要得到 ExtJS库文件，该框架是一个开源的，可以直接从官方
网站下载，网址http://extjs.com/download。下载下来后，可以看到如图2所示的文件。
说明：
1、adapter：负责将里面提供第三方底层库（包括 Ext 自带的底层库）映射为 Ext所支持的底层库。
2、build：压缩后的 ext全部源码(里面分类存放)。
3、docs： API帮助文档。
4、exmaples：提供使用 ExtJs技术做出的小实例。
5、resources：Ext UI资源文件目录，如 CSS、图片文件都存放在这里面。
6、source：无压缩 Ext全部的源码(里面分类存放)遵从 Lesser GNU（LGPL）开源的协议。
7、Ext-all.js：压缩后的 Ext全部源码。
8、ext-all-debug.js：无压缩的 Ext全部的源码(用于调试)。
9、ext-core.js：压缩后的 Ext的核心组件，包括 sources/core下的所有类。
10、ext-core-debug.js：无压缩 Ext的核心组件，包括 sources/core下的所有类。
应用 extjs需要在页面中引入 extjs的样式及 extjs库文件，样式文件为resources/css/ext-all.css，extjs的 js库文件主要包含两个，adapter/ext/ext-base.js及ext-all.js，其中 ext-base.js表示框架基础库，ext-all.js是 extjs的核心库。adapter表示适配器，也就是说可以有多种适配器，因此，可以把 adapter/ext/ext-base.js换成 dapter/jquery/ext-jquery-adapter.js，或adapter/prototype/ext-prototype-adapter.js等。因此，要使用 ExtJS框架的页面中一般包括下面几句：
<linkhref="../ext/resources/css/ext-all.css"rel="stylesheet" type="text/css" />
<scriptsrc="../ext/adapter/ext/ext-base.js"type="text/javascript"></script>
<scriptsrc="../ext/ext-all.js"type="text/javascript"></script>
此外，如果想使用汉语的话还得加入以下代码：
<scriptsrc="../ext/src/locale/ext-lang-zh_CN.js"type="text/javascript"></script>
在 ExtJS库文件及页面内容加载完后，ExtJS会执行 Ext.onReady中指定的函数，因此一般情况下每一个用户的ExtJS应用都是从 Ext.onReady开始的，使用 ExtJS应用程序的代码大致如下：
Ext.onReady(function () {
Ext.MessageBox.alert("Message","Hello World!");
})
执行的结果如图3（左）所示。
当加入汉语言包之后的结果如图3（右）所示。
3、简单的Ext js树形结构
树控件由 Ext.tree.TreePanel类定义，控件的名称为 treepanel，TreePanel类继承自 Panel面板。在 ExtJS中使用树控件其实非常简单，我们先来看下面的代码：
<scripttype="text/javascript">
Ext.onReady(function () {
var root = new Ext.tree.TreeNode({
id:"root",
text:"树的根"
});
root.appendChild(new Ext.tree.TreeNode({
id:"c1",
text:"子节点1"
}));
var tree =new Ext.tree.TreePanel({
renderTo:"tree",
root: root,
width: 100
});
});
</script>
代码的第一句使用 new Ext.tree.TreeNode类来创建一个树节点，第二句使用树节点的
root的appendChild方法来往该节点中加入一个子节点，最后直接使用new Ext.tree.TreePanel
来创建一个树面板，要树面板的初始化参数中指定树的 root属性值为前面创建的 root节点，也就是树根节点。接下来在<html></html>标签中引用<div id=”tree”></div>将上面的树形结构显示出来！上面的程序执行效果如下图所示：
4、异步树
Ext JS的树控件提供了对这种功能的支持，你只需要在创建树控件的时候，通过给树指定一个节点加载器，可以用来从服务器端动态加载树的节点信息。我们来看下面的代码：
Ext.onReady(function () {
var Tree = Ext.tree;
var tree = new Ext.tree.TreePanel({
el:'treepanel',
autoScroll:true,
rootVisible:false,
loader:new Tree.TreeLoader({
dataUrl:'extTree.ashx'/// <reference path="extTree.ashx" />
}),
root:new Ext.tree.AsyncTreeNode({})
});
tree.render();
})
extTree.ashx这个 url返回的内容如下：
[
{"cls":"folder","id":101,"leaf":false,expanded:true,"text":"12336报处理流程","children":[
{"cls":"users","id":10101,"leaf":true,"children":null,"text":"12336电话接听"},
{"cls":"file","id":10102,"leaf":true,"children":null,"text":"审核"},
{"cls":"users","id":10103,"leaf":true,"children":null,"text":"案件登记"},
{"cls":"file","id":10104,"leaf":true,"children":null,"text":"领导签字办理意见"},
{"cls":"file","id":10105,"leaf":true,"children":null,"text":"转盟市办理"},
{"cls":"file","id":10106,"leaf":true,"children":null,"text":"反馈办理情况"},
{"cls":"file","id":10107,"leaf":true,"children":null,"text":"盟市调查"},
{"cls":"file","id":10108,"leaf":true,"children":null,"text":"反馈办理结果"},
{"cls":"file","id":10109,"leaf":true,"children":null,"text":"归档"}
]},
{"cls":"folder","id":102,"leaf":false,expanded:true,"text":"信访处理流程","children":[
{"cls":"users","id":10201,"leaf":true,"children":null,"text":"来访登记"},
{"cls":"users","id":10202,"leaf":true,"children":null,"text":"信访案件登记"},
{"cls":"file","id":10203,"leaf":true,"children":null,"text":"领导签署办理意见"},
{"cls":"file","id":10204,"leaf":true,"children":null,"text":"转盟市办理"},
{"cls":"file","id":10205,"leaf":true,"children":null,"text":"反馈办理结果"},
{"cls":"file","id":10206,"leaf":true,"children":null,"text":"归档"}
]}
]
运行的结构如下图所示。
只是上面的结果在IE中无法显示出来，这里就涉及到了异步并发以及浏览器的处理能力。为了能够在IE中正常的显示，做了如下的改动：
Ext.onReady(function () {
var Tree = Ext.tree;
var tree = new Ext.tree.TreePanel({
el:'treepanel',
//autoScroll: true,
rootVisible:false,
root:new Ext.tree.AsyncTreeNode({})
});
tree.render();
//加载提示
var loading = null;
function showLoading() {
loading =new Ext.LoadMask(Ext.get(tree.getEl()), { msg: "请等待" });
loading.show();
}
function hideLoading() {
loading.hide();
}
showLoading();
Ext.Ajax.request({
url:'extTree.ashx', /// <reference path="extTree.ashx" />
success:function (request) {
var data = Ext.util.JSON.decode(request.responseText);
tree.getRootNode().appendChild(data);
tree.getRootNode().expandChildNodes(true);
hideLoading();
},
FAILURE:function () {
hideLoading();
Ext.MessageBox.show({
title:'版块管理',
msg:'对不起，数据加载异常!',
buttons: Ext.MessageBox.OK,
icon: Ext.MessageBox.ERROR
});
}
});
})
这是异步树的生成，至于extTree.ashx的内容，里面可以根据需要从数据库中提取并组成类似与extTree.ashx这个url返回的内容的json格式。此外，调用的url可以是任何后台语言返回的json。
二、jquery zTree
1、jquery zTree简介
zTree是利用JQuery的核心代码，实现一套能完成大部分常用功能的Tree插件，它具有以下特点：
1) 兼容 IE、FireFox、Chrome等浏览器；
2) 在一个页面内可同时生成多个Tree实例；
3) 支持 JSON数据；
4) 支持一次性静态生成和Ajax异步加载两种方式；
5) 支持多种事件响应及反馈；
6) 支持Tree的节点移动、编辑、删除；
7) 支持任意更换皮肤/个性化图标（依靠css）；
8) 支持极其灵活的 checkbox或 radio选择功能；
9) 简单的参数配置实现灵活多变的功能。
2、获取和使用jquery zTree
要使用jquery zTree，首先应从网站上获取jquery zTree库文件。下载地址：http://www.ztree.me/v3/main.php，现在的最高版本是3.5.12，下载zTree -- jQuery 树插件。下载下来解压后的文件如下图：
要使用jquery zTree，首先应在你的web页面中加入以下代码：
<linkhref="css/zTreeStyle.css"rel="stylesheet" type="text/css" />
<scriptsrc="js/jquery-1.4.2.js"type="text/javascript"></script>
<scriptsrc="js/jquery.ztree-2.6.min.js"type="text/javascript"></script>
zTreeStyle.css为jquery zTree为样式文件库，jquery-1.4.2.js为jquery库，jquery.ztree-2.6.min.js则定义了ztree库。
3、简单的zTree
首先，看看下面的代码。
<SCRIPT type="text/javascript">
<!--
var setting = {
data: {
simpleData: {
enable: true
}
}
};
var zNodes =[
{ id:1, pId:0, name:"父节点1 -展开", open:true},
{ id:11, pId:1, name:"父节点11 -折叠"},
{ id:111, pId:11, name:"叶子节点111"},
{ id:112, pId:11, name:"叶子节点112"},
{ id:113, pId:11, name:"叶子节点113"},
{ id:114, pId:11, name:"叶子节点114"},
{ id:12, pId:1, name:"父节点12 -折叠"},
{ id:121, pId:12, name:"叶子节点121"},
{ id:122, pId:12, name:"叶子节点122"},
{ id:123, pId:12, name:"叶子节点123"},
{ id:124, pId:12, name:"叶子节点124"},
{ id:13, pId:1, name:"父节点13 -没有子节点", isParent:true},
{ id:2, pId:0, name:"父节点2 -折叠"},
{ id:21, pId:2, name:"父节点21 -展开", open:true},
{ id:211, pId:21, name:"叶子节点211"},
{ id:212, pId:21, name:"叶子节点212"},
{ id:213, pId:21, name:"叶子节点213"},
{ id:214, pId:21, name:"叶子节点214"},
{ id:22, pId:2, name:"父节点22 -折叠"},
{ id:221, pId:22, name:"叶子节点221"},
{ id:222, pId:22, name:"叶子节点222"},
{ id:223, pId:22, name:"叶子节点223"},
{ id:224, pId:22, name:"叶子节点224"},
{ id:23, pId:2, name:"父节点23 -折叠"},
{ id:231, pId:23, name:"叶子节点231"},
{ id:232, pId:23, name:"叶子节点232"},
{ id:233, pId:23, name:"叶子节点233"},
{ id:234, pId:23, name:"叶子节点234"},
{ id:3, pId:0, name:"父节点3 -没有子节点", isParent:true}
];
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
//-->
</SCRIPT>
上面的代码定义了一颗简单的树形结构，在body标记中加入<ul id="treeDemo" class="ztree"></ul>将上面的树显示出来，显示的结果如下：
说明：
1、setting配置信息说明
1) 普通使用，无必须设置的参数
2) 与显示相关的内容请参考 API文档中 setting.view内的配置信息
3) name、children、title等属性定义更改请参考 API文档中 setting.data.key内的配置信息
2、treeNode节点数据说明
1) 标准的 JSON数据需要嵌套表示节点的父子包含关系
例如：
var nodes = [
{name: "父节点1", children: [
{name: "子节点1"},
{name: "子节点2"}
]}
];
2) 默认展开的节点，请设置 treeNode.open属性
3) 无子节点的父节点，请设置 treeNode.isParent属性
4、异步树
在实际应用中，这种简单的树形结构是无法满足我们开发需求的，因此，我们需要从数据库中提取数据组成树形结构，这是我们就涉及到了异步树。zTree的异步树实现起来也是相对比较简单的。先看下面的代码：
var zTree;
var setting = {
checkable:true,
async:true,
asyncUrl:"../data/zTree.ashx",
asyncParam: ["id","name"],
isSimpleData:true,
treeNodeKey:"id",
treeNodeParentKey:"pId",
expandSpeed:"fast",
callback: {
click: zTreeOnClick
}
};
$(document).ready(function () {
zTree = $("#tree").zTree(setting,null);
});
asyncUrl返回的内容如下：
[
{id:101,pId:0,name:'12336电话举报处理流程,101',isParent:true,checked:true,open:true},
{id:10101,pId:101,name:'12336电话接听,10101',isParent:false,checked:true},
{id:10102,pId:101,name:'审核,10102',isParent:false,checked:false},
{id:10103,pId:101,name:'案件登记,10103',isParent:false,checked:true},
{id:10104,pId:101,name:'领导签字办理意见,10104',isParent:false,checked:false},
{id:10105,pId:101,name:'转盟市办理,10105',isParent:false,checked:false},
{id:10106,pId:101,name:'反馈办理情况,10106',isParent:false,checked:false},
{id:10107,pId:101,name:'盟市调查,10107',isParent:false,checked:false},
{id:10108,pId:101,name:'反馈办理结果,10108',isParent:false,checked:false},
{id:10109,pId:101,name:'归档,10109',isParent:false,checked:false},
{id:102,pId:0,name:'信访事件处理流程,102',isParent:true,checked:true,open:true},
{id:10201,pId:102,name:'来访登记,10201',isParent:false,checked:true},
{id:10202,pId:102,name:'信访案件登记,10202',isParent:false,checked:true},
{id:10203,pId:102,name:'领导签署办理意见,10203',isParent:false,checked:false},
{id:10204,pId:102,name:'转盟市办理,10204',isParent:false,checked:false},
{id:10205,pId:102,name:'反馈办理结果,10205',isParent:false,checked:false},
{id:10206,pId:102,name:'归档,10206',isParent:false,checked:false}
]
上面树形结构显示出来如下图所示：
