Ext.tree.TreePanel

来源：互联网发布：常用办公软件图片编辑：程序博客网时间：2024/05/06 12:08

转载：http://blog.csdn.net/tinyyys/archive/2009/03/2**027142.aspx

个人只是进行了测试，理解而已。原文中使用的数据库是SQL 2000的，而本人使用的是mysql，故做了一点点的更改。

【注意】：以下所有引用资源的路径都是根据自己的资源位置来配置的。

第一步：创建treePanel.html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>测试Ext.tree.TreePanel</title>
<link rel="stylesheet" type="text/css" href="../static/lib/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="../static/lib/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../static/lib/ext/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="../style/comment.css" />
<script type="text/javascript" src="../js/treePanel.js" charset="utf-8"></script>
<link rel="shortcut icon" href="x.ico" />
</head>
<body>
<div id="tree-panel" style="overflow:auto; height:600px;width:200px;border:2px solid #c3daf9;"></div>
</body>
</html>

第二步：创建含Ext.onRready函数的treePanel.js文件

Code:

Ext.onReady(function(){
Ext.QuickTips.init();// 浮动信息提示
Ext.BLANK_IMAGE_URL = '../static/lib/ext/resources/images/default/s.gif';// 替换图片文件地址为本地
// 创建一个简写
var _Tree = Ext.tree;
// 定义根节点的Loader
var _treeloader = new _Tree.TreeLoader({
// dataUrl : 'tree.jsp'//这里可以不需要指定URL，在加载前事件响应里面设置
});
// 添加一个树形面板
var _treepanel = new _Tree.TreePanel({
// renderTo:"tree_div",//如果使用renderTo，则不能使用setRootNode()方法，需要在TreePanel中设置root属性。
el : 'tree-panel',// 将树形添加到一个指定的div中,非常重要！
region : 'west',
title : '功能菜单',
width : 200,//面板宽度
minSize : 180,
maxSize : 250,
split : true,
autoHeight : false,
frame : true,// 美化界面
// title : '可编辑和拖动的异步树',//标题
// autoScroll : true, // 自动滚动
enableDD : true,// 是否支持拖拽效果
containerScroll : true,// 是否支持滚动条
rootVisible : true, // 是否隐藏根节点,很多情况下，我们选择隐藏根节点增加美观性
border : true, // 边框
animate : true, // 动画效果
loader : _treeloader // 树加载
});
// 异步加载根节点
var _rootnode = new _Tree.AsyncTreeNode({
id : '0',
text : '家电品牌总类',
draggable : false,// 根节点不容许拖动
expanded : true
});
// 为tree设置根节点
_treepanel.setRootNode(_rootnode);
// 响应加载前事件，传递node参数
_treepanel.on('beforeload', function(node) {
_treepanel.loader.dataUrl = 'tree.jsp?parentId=' + node.id; // 定义子节点的Loader
});
// 渲染树形
_treepanel.render();
// 展开节点,第一个参数表示是否级联展开子节点
_rootnode.expand(false);
// 设置树的点击事件【测试点击事件不影响树的其他效果】
var _treeClick=function (node, e) { //contentPanel 为定义的TabPanel
if (node.isLeaf()) {
e.stopEvent();
var n = contentPanel.getComponent(node.id); //通过node的id 获取组件
if (!n) { //如果不存在则new 一个出来
var n = contentPanel.add({
'id' : node.id,
'title' : node.text,
closable : true,
autoLoad : {
url : 'tabFrame.jsp?url=grid.html',
scripts : true
} // 通过autoLoad属性载入目标页,如果要用到脚本,必须加上scripts属性
});
}
contentPanel.setActiveTab(n);
}
}
// 增加鼠标单击事件
_treepanel.on('click', _treeClick);
// 定义右键菜单
var rightClick = new Ext.menu.Menu({
id : 'rightClickCont',
items : [{
id : 'rMenu1',
text : '添加节点',
// 增加菜单点击事件
handler : function() {
alert('添加节点的实现！');
}
}, {
id : 'rMenu2',
text : '编辑节点'
}, {
id : 'rMenu3',
text : '删除节点'
}]
});
// 增加右键点击事件
_treepanel.on('contextmenu', function(node, event) {// 声明菜单类型
event.preventDefault();// 阻止浏览器默认右键菜单显示
rightClick.showAt(event.getXY());// 取得鼠标点击坐标，展示菜单
});
/*
* 设置tree的节点放置函数此函数有一个很重要的参数对象e e对象有三个重要的属性，分别为dropNode,target,point
* 1.dropNode为在拖动时鼠标抓住的节点 2.target为将要放置在某处的节点
* 3.point为被放置的状态，分别有append表示添加，above节点的上方，below节点的下方。
*
*/
_treepanel.on('nodedrop', function(e) {
if (e.point == 'append') {
alert('当前"' + e.dropNode.text + '"划到"' + e.target.text+ '"里面！');
} else if (e.point == 'above') {
alert('当前"' + e.dropNode.text + '"放在了"' + e.target.text + '"上面！');
} else if (e.point == 'below') {
alert('当前"' + e.dropNode.text + '"放在了"' + e.target.text + '"下面！');
}
});
// 在原有的树形添加一个TreeEditor
var _treeEditer = new _Tree.TreeEditor(_treepanel, {
allowBlank : false
});
/*
* 为创建的treeEditer添加事件有两个事件最为常用，一个为beforestartedit另一个为complete
* 从名字就可以看出，beforestartedit事件是在编辑前的事件，因此可以通过它来判断那些节点可以编辑那些不可以。
* complete为编辑之后的事件，在这里面可以添加很多事件，比如添加一个Ext.Ajax向后台传送修改的值等等。
*/
_treeEditer.on("beforestartedit", function(_treeEditer) {
var _tempNode = _treeEditer.editNode;// 将要编辑的节点
if (_tempNode.isLeaf()) {// 这里设定叶子节点才容许编辑
return true;
} else {
return false;
}
});
_treeEditer.on("complete", function(_treeEditer) {
Ext.Msg.alert("被修改为" + _treeEditer.editNode.text);
});
// （1）通过TabPanel控件的html属性配合<iframe>实现。该方法是利用
// html属性中包含<iframe>的语法来调用另一个页面，具体见代码。
// （2）通过TabPanel控件的autoLoad属性实现。该方法是利用autoLoad属性，它有很多参数，
// 其中有两个比较重要，url表示要载入的文件，scripts表示载入的文件是否含有脚本，该属性相当重要，
// 如果在新的页面中要创建Ext控件，必须指定该参数。该方法实现较前一个复杂，因为引入的文件不是一个完整的html文件，
// 有可能只是内容的一部分，但是资源占用较少，而且载入速度较快（它有一个载入指示）
// 添加第一个节点(html)
_treepanel.root.appendChild(new Ext.tree.TreeNode({
id : 'htmlPanel',
text : '通过html打开',
listeners : {
'click' : function(node, event) {
event.stopEvent();
var n = contentPanel.getComponent(node.id);
if (!n) { // 判断是否已经打开该面板
n = contentPanel.add({
'id' : node.id,
'title' : node.text,
closable : true, // 通过html载入目标页
html : '<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="grid.html"></iframe>'
});
}
contentPanel.setActiveTab(n);
}
}
}));
// 添加第二个节点(autoLoad)
_treepanel.root.appendChild(new Ext.tree.TreeNode({
id : 'autoLoadPanel',
text : '通过autoLoad打开',
listeners : {
'click' : function(node, event) {
event.stopEvent();
var n = contentPanel.getComponent(node.id);
if (!n) { // //判断是否已经打开该面板
n = contentPanel.add({
'id' : node.id,
'title' : node.text,
closable : true,
autoLoad : {
url : 'tabFrame.jsp?url=grid.html',
scripts : true
} // 通过autoLoad属性载入目标页,如果要用到脚本,必须加上scripts属性
});
}
contentPanel.setActiveTab(n);
}
}
}));
// 右边具体功能面板区
var contentPanel = new Ext.TabPanel({
region : 'center',
enableTabScroll : true,
activeTab : 0,
items : [{
id : 'homePage',
title : '首页',
autoScroll : true,
// closable : true,
html : '<div class="tabPanel-treePanel">Tree控件和TabPanel控件结合功能演示</div>'
}]
});
new Ext.Viewport({
layout : 'border', // 使用border布局
defaults : {
activeItem : 0
},
items : [_treepanel, contentPanel]
});
});

其实这样子就可以运行了，只是动态加载的数据无法加载进去而已。以下是从后台数据库获取json格式数据的操作。

1)建立一个树节点的bean，封装一个树节点。

2)连接数据库，做相关操作之后，以json格式数据传回_treepanel.loader.dataUrl = 'tree.jsp?parentId=' + node.id; // 定义子节点的Loader。【实际上，就是一个字符串】

3)tree.jsp

Code:

<%@ page language="java" pageEncoding="utf-8"%>
<jsp:useBean class="com.xxx.javabean.JSONTree" id="JSONTree"></jsp:useBean>
<%
String parentId = "";
if (request.getParameter("parentId") != null) {
parentId = request.getParameter("parentId").toString();
}
JSONTree.setparentId(parentId);
%>
<%=JSONTree.getJSONString()%>

Code:

package com.xxx.javabean;
/**
* @author nothing2012
*定义树节点的属性，包括节点ID、Text、图标、是否为叶子节点、是否展开等。
*/
public class JSONTreeNode {
private String id; //ID
private String text; //节点显示
private String cls; //图标
private boolean leaf; //是否叶子
private String href; //链接
private String hrefTarget; //链接指向
private boolean expandable; //是否展开
private String description; //描述信息
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public String getCls() {
return cls;
}
public void setCls(String cls) {
this.cls = cls;
}
public boolean isLeaf() {
return leaf;
}
public void setLeaf(boolean leaf) {
this.leaf = leaf;
}
public String getHref() {
return href;
}
public void setHref(String href) {
this.href = href;
}
public String getHrefTarget() {
return hrefTarget;
}
public void setHrefTarget(String hrefTarget) {
this.hrefTarget = hrefTarget;
}
public boolean isExpandable() {
return expandable;
}
public void setExpandable(boolean expandable) {
this.expandable = expandable;
}
public String getDescription() {
return description;
}
public void setDescription(String description) {
this.description = description;
}
}

Code:

package com.xxx.javabean;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;
import net.sf.json.JSONArray;
/*
* @create by nothing2012
*/
public class JSONTree {
private String parentId;
public String getJSONString() {
Connection con = null;
Statement st = null;
ResultSet rs = null;
List<JSONTreeNode> treeNodeArray = null;
//传一个父节点的ID过来
String SQLString = "SELECT * FROM Categories WHERE parentId="
+ this.parentId + " ORDER BY categoryId";
try {
Class.forName("com.mysql.jdbc.Driver");
DriverManager.registerDriver(new com.mysql.jdbc.Driver());
String DbConn = "jdbc:mysql://localhost:3306/extjs";
String DbPass = "root";
con = DriverManager.getConnection(DbConn, "root", DbPass);
st = con.createStatement();
// 查找所有拥有下级类别的类别ID //不同的记录属于同一个parentID，故使用group by
rs = st
.executeQuery("SELECT parentId FROM Categories WHERE parentId>0 Group By parentId Order By parentId");
StringBuffer parentIDBuffer = new StringBuffer();
parentIDBuffer.append("|");
while (rs.next()) {
parentIDBuffer.append(rs.getString("parentId"));
parentIDBuffer.append("|");
}
// 得到所有的parentcategoryId列表
String parentIDString = parentIDBuffer.toString();
System.out.println(parentIDString);//测试 |1|2|3|4|5|6|7|8|
rs = st.executeQuery(SQLString); //第一次传进来的parentID是0
treeNodeArray = new ArrayList<JSONTreeNode>();
while (rs.next()) {
JSONTreeNode treeNode = new JSONTreeNode();
String categoryId = rs.getString("categoryId");
treeNode.setId(categoryId);
treeNode.setText(rs.getString("categoryName"));
treeNode.setDescription(rs.getString("description"));
// treeNode.setHref("rightframe.jsp?categoryId="
// + rs.getString("categoryId").toString());
// treeNode.setHrefTarget("rightFrame");
System.out.println(parentIDString.indexOf("|" + categoryId + "|"));//测试
if (parentIDString.indexOf("|" + categoryId + "|") >= 0) // 父节点如果大于0说它在父节点中存在
{
treeNode.setCls("folder");
treeNode.setLeaf(false);
treeNode.setExpandable(false);
} else // 子节点
{
treeNode.setCls("file");
treeNode.setLeaf(true);
treeNode.setExpandable(false);
}
treeNodeArray.add(treeNode);
}
JSONArray JsonArray = JSONArray.fromObject(treeNodeArray); // 得到JSON数组
System.out.println("返回的数据是："+JsonArray.toString());
return JsonArray.toString();// 返回JSON数据
} catch (Exception e) {
System.out.println("getJSONString() of JSONTree.java throws : "
+ e.toString());
return "";
} finally {
try {
if (con != null && !con.isClosed()) {
con.close();
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
public String getparentId() {
return parentId;
}
public void setparentId(String parentId) {
this.parentId = parentId;
}
}

效果图：

//需要导入的json-lib 包及其他包自行下载。测试完毕。