Ext動態樹
jsp頁面代碼:
<script type="text/javascript">
//生成標籤頁tab 我的index.jsp使用了viewport視圖佈局 此tab 要加載center中
var tab = new Ext.TabPanel({
region:'center',
deferredRender:false,
activeTab:0,
resizeTabs:true, // turn on tab resizing
minTabWidth: 115,
tabWidth:135,
enableTabScroll:true
});
Ext.onReady(function(){
var Tree = Ext.tree;
//定義根節點的Loader
var treeloader=new Tree.TreeLoader({dataUrl:'tree.jsp?DID=1'});
//異步加載根節點
var rootnode=new Tree.AsyncTreeNode({
id:'1',
text:'規劃系統' ,
leaf:false //若爲true 則樹節點的圖標將改變,顯示默認的圖片
});
var treepanel = new Tree.TreePanel({
//renderTo:"tree_div",//如果使用renderTo,則不能使用setRootNode()方法,需要在TreePanel中設置root屬性。
//el:'tree_div', //填充區域
rootVisible:true, //隱藏根節點
useArrows:false, //文件夾前顯示的圖標改變了不在是+號了
border:true, //邊框
animate:true, //動畫效果
autoScroll:true, //自動滾動
enableDD:false, //拖拽節點
containerScroll:true,
loader:treeloader
});
//設置根節點
treepanel.setRootNode(rootnode);
//響應事件,傳遞node參數 也就是說每一次加載樹之前都要通過'beforeload'事件加載子節點
treepanel.on('beforeload',
function(node,event){
//alert(node.id);
treepanel.loader.dataUrl='tree.jsp?DID='+node.id; //定義子節點的Loader
}
);
//點擊節點時的click事件,當點擊子節點時,就會動態的打開一個tabpanel 這裏使用了iframe
treepanel.on('click',
function(node,event){
var n = tab.getComponent(node.id);
if (node.isLeaf()){
if (!n) {
var n = tab.add({
'id' : node.id,
'title' : node.text,
closable:true,
html : '<iframe name="main'+node.id+'" scrolling="auto" frameborder="0" width="100%" height="100%" src="+node.url+"></iframe>'+node.text
});
}
tab.setActiveTab(n);
}
}
);
//layout
var viewport = new Ext.Viewport({
layout:'border',
items:[
new Ext.BoxComponent({
region:'north',
el: 'north',
height:80
}),new Ext.BoxComponent({
region:'south',
el: 'south',
height:25
}),
{
region:'west',
el:'west',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
margins:'0 0 0 0',
layout:'accordion',
title:'系統菜單',
collapsible :false, //右上角收縮按鈕
layoutConfig:{
animate:true
},
items: [
{
title:'EXT控件使用',
border:false,
html:'<div id="tree-div" style="overflow:auto;width:100%;height:100%"></div>'
//iconCls:'nav'
}]
},
tab //初始標籤頁
]
});
//end loding
setTimeout(
function() {
Ext.get('loading').remove();
Ext.get('loading-mask').fadeOut({remove:true});
}, 250
);
treepanel.render('tree-div');
rootnode.expand(false,false);
});
</script>
-----------------------------------------------------------------------------------------------------------
tree.jsp代碼,此頁面接收index.jsp的請求
<%@ page language="java" pageEncoding="UTF-8"%>
<jsp:useBean class="com.nbw.pub.JSONTree" id="JSONTree"></jsp:useBean>
<%
String uplevel = "";
if (request.getParameter("DID") != null) {
uplevel = request.getParameter("DID").toString();
}
JSONTree.setUplevel(uplevel);
%>
<%=JSONTree.getJSONString()%>
數據庫表結構:
create table SYS_MODULE (
ID NUMBER(12) primary key, 、//ID主鍵
NAME VARCHAR2(50), //節點名稱
UPLEVEL VARCHAR2(5), //父節點ID
SERIALNO NUMBER(2), //子節點排序號
MEN1 VARCHAR2(40),
MEN2 VARCHAR2(40),
TITLEPIC VARCHAR2(40), //圖片
URL VARCHAR2(200), //URL 只有子節點纔有URL
LEAF NUMBER(1), //是否是葉子節點
);
JsonTreeModule.java代碼
package com.nbw.sysadmin.domain;
public class JsonTreeModule {
/*
* 此bean用於構建樹向其中注入有關的信息,將SysModule中的信息拷貝到JsonTreeModule中
*/
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 JsonTreeModule() {
super();
}
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;
}
}
JSONTree.java代碼 最核心的
package com.nbw.pub;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import net.sf.json.JSONArray;
import org.hibernate.HibernateException;
import org.springframework.orm.hibernate3.support.HibernateDaoSupport;
import com.nbw.common.HibernateSessionFactory;
import com.nbw.sysadmin.domain.JsonTreeModule;
public class JSONTree extends HibernateDaoSupport {
//通過set方法注入父節點值
private String uplevel;
/*
* 返回構建tree的JSON格式的字符串
*/
public String getJSONString() {
Connection conn = null;
Statement st = null;
ResultSet rs = null;
ArrayList<JsonTreeModule> TreeNodeArray = null;
String SQLString = "select * from sys_module s where s.uplevel='" + this.uplevel+"' order by s.uplevel";
try {
conn = HibernateSessionFactory.getSession().connection();
st = conn.createStatement();
rs = st.executeQuery(SQLString);
TreeNodeArray = new ArrayList<JsonTreeModule>();
while (rs.next()) {
JsonTreeModule TreeNode = new JsonTreeModule();
TreeNode.setId(rs.getString("moduleid"));
TreeNode.setText(rs.getString("modulename"));
TreeNode.setDescription(rs.getString("modulename"));
TreeNode.setHref(rs.getString("url"));
TreeNode.setHrefTarget("main"+rs.getString("moduleid"));
//父節點
if (Integer.parseInt(rs.getString("isleaf"))== 0)
{
TreeNode.setCls("folder");
TreeNode.setLeaf(false);
TreeNode.setExpandable(true);
} else // 子節點
{
TreeNode.setCls("file");
TreeNode.setLeaf(true);
TreeNode.setExpandable(false);
}
TreeNodeArray.add(TreeNode);
}
// 得到JSON數組
JSONArray JsonArray = JSONArray.fromObject(TreeNodeArray);
// 返回JSON字符串
return JsonArray.toString();
} catch (Exception e) {
System.out.println("getJSONString() of JSONTree.java throws : "+ e.toString());
return "";
} finally {
try {
HibernateSessionFactory.getSession().connection().close();
} catch (HibernateException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
public String getUplevel() {
return uplevel;
}
public void setUplevel(String uplevel) {
this.uplevel = uplevel;
}
}
<script type="text/javascript">
//生成標籤頁tab 我的index.jsp使用了viewport視圖佈局 此tab 要加載center中
var tab = new Ext.TabPanel({
region:'center',
deferredRender:false,
activeTab:0,
resizeTabs:true, // turn on tab resizing
minTabWidth: 115,
tabWidth:135,
enableTabScroll:true
});
Ext.onReady(function(){
var Tree = Ext.tree;
//定義根節點的Loader
var treeloader=new Tree.TreeLoader({dataUrl:'tree.jsp?DID=1'});
//異步加載根節點
var rootnode=new Tree.AsyncTreeNode({
id:'1',
text:'規劃系統' ,
leaf:false //若爲true 則樹節點的圖標將改變,顯示默認的圖片
});
var treepanel = new Tree.TreePanel({
//renderTo:"tree_div",//如果使用renderTo,則不能使用setRootNode()方法,需要在TreePanel中設置root屬性。
//el:'tree_div', //填充區域
rootVisible:true, //隱藏根節點
useArrows:false, //文件夾前顯示的圖標改變了不在是+號了
border:true, //邊框
animate:true, //動畫效果
autoScroll:true, //自動滾動
enableDD:false, //拖拽節點
containerScroll:true,
loader:treeloader
});
//設置根節點
treepanel.setRootNode(rootnode);
//響應事件,傳遞node參數 也就是說每一次加載樹之前都要通過'beforeload'事件加載子節點
treepanel.on('beforeload',
function(node,event){
//alert(node.id);
treepanel.loader.dataUrl='tree.jsp?DID='+node.id; //定義子節點的Loader
}
);
//點擊節點時的click事件,當點擊子節點時,就會動態的打開一個tabpanel 這裏使用了iframe
treepanel.on('click',
function(node,event){
var n = tab.getComponent(node.id);
if (node.isLeaf()){
if (!n) {
var n = tab.add({
'id' : node.id,
'title' : node.text,
closable:true,
html : '<iframe name="main'+node.id+'" scrolling="auto" frameborder="0" width="100%" height="100%" src="+node.url+"></iframe>'+node.text
});
}
tab.setActiveTab(n);
}
}
);
//layout
var viewport = new Ext.Viewport({
layout:'border',
items:[
new Ext.BoxComponent({
region:'north',
el: 'north',
height:80
}),new Ext.BoxComponent({
region:'south',
el: 'south',
height:25
}),
{
region:'west',
el:'west',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
margins:'0 0 0 0',
layout:'accordion',
title:'系統菜單',
collapsible :false, //右上角收縮按鈕
layoutConfig:{
animate:true
},
items: [
{
title:'EXT控件使用',
border:false,
html:'<div id="tree-div" style="overflow:auto;width:100%;height:100%"></div>'
//iconCls:'nav'
}]
},
tab //初始標籤頁
]
});
//end loding
setTimeout(
function() {
Ext.get('loading').remove();
Ext.get('loading-mask').fadeOut({remove:true});
}, 250
);
treepanel.render('tree-div');
rootnode.expand(false,false);
});
</script>
-----------------------------------------------------------------------------------------------------------
tree.jsp代碼,此頁面接收index.jsp的請求
<%@ page language="java" pageEncoding="UTF-8"%>
<jsp:useBean class="com.nbw.pub.JSONTree" id="JSONTree"></jsp:useBean>
<%
String uplevel = "";
if (request.getParameter("DID") != null) {
uplevel = request.getParameter("DID").toString();
}
JSONTree.setUplevel(uplevel);
%>
<%=JSONTree.getJSONString()%>
數據庫表結構:
create table SYS_MODULE (
ID NUMBER(12) primary key, 、//ID主鍵
NAME VARCHAR2(50), //節點名稱
UPLEVEL VARCHAR2(5), //父節點ID
SERIALNO NUMBER(2), //子節點排序號
MEN1 VARCHAR2(40),
MEN2 VARCHAR2(40),
TITLEPIC VARCHAR2(40), //圖片
URL VARCHAR2(200), //URL 只有子節點纔有URL
LEAF NUMBER(1), //是否是葉子節點
);
JsonTreeModule.java代碼
package com.nbw.sysadmin.domain;
public class JsonTreeModule {
/*
* 此bean用於構建樹向其中注入有關的信息,將SysModule中的信息拷貝到JsonTreeModule中
*/
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 JsonTreeModule() {
super();
}
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;
}
}
JSONTree.java代碼 最核心的
package com.nbw.pub;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import net.sf.json.JSONArray;
import org.hibernate.HibernateException;
import org.springframework.orm.hibernate3.support.HibernateDaoSupport;
import com.nbw.common.HibernateSessionFactory;
import com.nbw.sysadmin.domain.JsonTreeModule;
public class JSONTree extends HibernateDaoSupport {
//通過set方法注入父節點值
private String uplevel;
/*
* 返回構建tree的JSON格式的字符串
*/
public String getJSONString() {
Connection conn = null;
Statement st = null;
ResultSet rs = null;
ArrayList<JsonTreeModule> TreeNodeArray = null;
String SQLString = "select * from sys_module s where s.uplevel='" + this.uplevel+"' order by s.uplevel";
try {
conn = HibernateSessionFactory.getSession().connection();
st = conn.createStatement();
rs = st.executeQuery(SQLString);
TreeNodeArray = new ArrayList<JsonTreeModule>();
while (rs.next()) {
JsonTreeModule TreeNode = new JsonTreeModule();
TreeNode.setId(rs.getString("moduleid"));
TreeNode.setText(rs.getString("modulename"));
TreeNode.setDescription(rs.getString("modulename"));
TreeNode.setHref(rs.getString("url"));
TreeNode.setHrefTarget("main"+rs.getString("moduleid"));
//父節點
if (Integer.parseInt(rs.getString("isleaf"))== 0)
{
TreeNode.setCls("folder");
TreeNode.setLeaf(false);
TreeNode.setExpandable(true);
} else // 子節點
{
TreeNode.setCls("file");
TreeNode.setLeaf(true);
TreeNode.setExpandable(false);
}
TreeNodeArray.add(TreeNode);
}
// 得到JSON數組
JSONArray JsonArray = JSONArray.fromObject(TreeNodeArray);
// 返回JSON字符串
return JsonArray.toString();
} catch (Exception e) {
System.out.println("getJSONString() of JSONTree.java throws : "+ e.toString());
return "";
} finally {
try {
HibernateSessionFactory.getSession().connection().close();
} catch (HibernateException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
public String getUplevel() {
return uplevel;
}
public void setUplevel(String uplevel) {
this.uplevel = uplevel;
}
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.