Ext.tree.TreePanel

youshini

浏览: 218642 次
性别:
来自: 广州

最近访客更多访客>>

xiaguangme

chenglibang

jdzctais

horsehome

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

extjs

EXT json JSP MySQL CSS

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

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

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

第一步：创建treePanel.html

Code:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>测试Ext.tree.TreePanel</title>
<linkrel="stylesheet"type="text/css"href="../static/lib/ext/resources/css/ext-all.css"/>
<scripttype="text/javascript"src="../static/lib/ext/adapter/ext/ext-base.js"></script>
<scripttype="text/javascript"src="../static/lib/ext/ext-all.js"></script>
<linkrel="stylesheet"type="text/css"href="../style/comment.css"/>
<scripttype="text/javascript"src="../js/treePanel.js"charset="utf-8"></script>
<linkrel="shortcuticon"href="x.ico"/>
</head>
<body>
<divid="tree-panel"style="overflow:auto;height:600px;width:200px;border:2pxsolid#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();
varn=contentPanel.getComponent(node.id);//通过node的id获取组件
if(!n){//如果不存在则new一个出来
varn=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);
//定义右键菜单
varrightClick=newExt.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的节点放置函数此函数有一个很重要的参数对象ee对象有三个重要的属性，分别为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+'"里面！');
}elseif(e.point=='above'){
alert('当前"'+e.dropNode.text+'"放在了"'+e.target.text+'"上面！');
}elseif(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()){//这里设定叶子节点才容许编辑
returntrue;
}else{
returnfalse;
}
});
_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(newExt.tree.TreeNode({
id:'htmlPanel',
text:'通过html打开',
listeners:{
'click':function(node,event){
event.stopEvent();
varn=contentPanel.getComponent(node.id);
if(!n){//判断是否已经打开该面板
n=contentPanel.add({
'id':node.id,
'title':node.text,
closable:true,//通过html载入目标页
html:'<iframescrolling="auto"frameborder="0"width="100%"height="100%"src="grid.html"></iframe>'
});
}
contentPanel.setActiveTab(n);
}
}
}));
//添加第二个节点(autoLoad)
_treepanel.root.appendChild(newExt.tree.TreeNode({
id:'autoLoadPanel',
text:'通过autoLoad打开',
listeners:{
'click':function(node,event){
event.stopEvent();
varn=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);
}
}
}));
//右边具体功能面板区
varcontentPanel=newExt.TabPanel({
region:'center',
enableTabScroll:true,
activeTab:0,
items:[{
id:'homePage',
title:'首页',
autoScroll:true,
//closable:true,
html:'<divclass="tabPanel-treePanel">Tree控件和TabPanel控件结合功能演示</div>'
}]
});
newExt.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:

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

Code:

packagecom.xxx.javabean;
/**
*@authornothing2012
*定义树节点的属性，包括节点ID、Text、图标、是否为叶子节点、是否展开等。
*/
publicclassJSONTreeNode{
privateStringid;//ID
privateStringtext;//节点显示
privateStringcls;//图标
privatebooleanleaf;//是否叶子
privateStringhref;//链接
privateStringhrefTarget;//链接指向
privatebooleanexpandable;//是否展开
privateStringdescription;//描述信息
publicStringgetId(){
returnid;
}
publicvoidsetId(Stringid){
this.id=id;
}
publicStringgetText(){
returntext;
}
publicvoidsetText(Stringtext){
this.text=text;
}
publicStringgetCls(){
returncls;
}
publicvoidsetCls(Stringcls){
this.cls=cls;
}
publicbooleanisLeaf(){
returnleaf;
}
publicvoidsetLeaf(booleanleaf){
this.leaf=leaf;
}
publicStringgetHref(){
returnhref;
}
publicvoidsetHref(Stringhref){
this.href=href;
}
publicStringgetHrefTarget(){
returnhrefTarget;
}
publicvoidsetHrefTarget(StringhrefTarget){
this.hrefTarget=hrefTarget;
}
publicbooleanisExpandable(){
returnexpandable;
}
publicvoidsetExpandable(booleanexpandable){
this.expandable=expandable;
}
publicStringgetDescription(){
returndescription;
}
publicvoidsetDescription(Stringdescription){
this.description=description;
}
}

Code:

packagecom.xxx.javabean;
importjava.sql.Connection;
importjava.sql.DriverManager;
importjava.sql.ResultSet;
importjava.sql.SQLException;
importjava.sql.Statement;
importjava.util.ArrayList;
importjava.util.List;
importnet.sf.json.JSONArray;
/*
*@createbynothing2012
*/
publicclassJSONTree{
privateStringparentId;
publicStringgetJSONString(){
Connectioncon=null;
Statementst=null;
ResultSetrs=null;
List<JSONTreeNode>treeNodeArray=null;
//传一个父节点的ID过来
StringSQLString="SELECT*FROMCategoriesWHEREparentId="
+this.parentId+"ORDERBYcategoryId";
try{
Class.forName("com.mysql.jdbc.Driver");
DriverManager.registerDriver(newcom.mysql.jdbc.Driver());
StringDbConn="jdbc:mysql://localhost:3306/extjs";
StringDbPass="root";
con=DriverManager.getConnection(DbConn,"root",DbPass);
st=con.createStatement();
//查找所有拥有下级类别的类别ID//不同的记录属于同一个parentID，故使用groupby
rs=st
.executeQuery("SELECTparentIdFROMCategoriesWHEREparentId>0GroupByparentIdOrderByparentId");
StringBufferparentIDBuffer=newStringBuffer();
parentIDBuffer.append("|");
while(rs.next()){
parentIDBuffer.append(rs.getString("parentId"));
parentIDBuffer.append("|");
}
//得到所有的parentcategoryId列表
StringparentIDString=parentIDBuffer.toString();
System.out.println(parentIDString);//测试|1|2|3|4|5|6|7|8|
rs=st.executeQuery(SQLString);//第一次传进来的parentID是0
treeNodeArray=newArrayList<JSONTreeNode>();
while(rs.next()){
JSONTreeNodetreeNode=newJSONTreeNode();
StringcategoryId=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);
}
JSONArrayJsonArray=JSONArray.fromObject(treeNodeArray);//得到JSON数组
System.out.println("返回的数据是："+JsonArray.toString());
returnJsonArray.toString();//返回JSON数据
}catch(Exceptione){
System.out.println("getJSONString()ofJSONTree.javathrows:"
+e.toString());
return"";
}finally{
try{
if(con!=null&&!con.isClosed()){
con.close();
}
}catch(SQLExceptione){
//TODOAuto-generatedcatchblock
e.printStackTrace();
}
}
}
publicStringgetparentId(){
returnparentId;
}
publicvoidsetparentId(StringparentId){
this.parentId=parentId;
}
}

效果图：

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

分享到：

MVN 总结【转】 | create table xx.sql

2010-12-12 12:49
浏览 4185
评论(2)
查看更多

2 楼 zzhyq 2012-08-15

有没有后台是ASHX 的呀

1 楼 693593336 2012-06-25

谢谢作者分享，正好用上

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论