- 浏览: 200635 次
- 性别:
- 来自: 苏州
文章分类
最新评论
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;
}
}
发表评论
-
Ext grid分页
2009-07-14 09:32 2105Ext分页的时候 load(params:{start:0, ... -
Ext store中getTotalCount()与getCount()
2009-05-13 15:39 3318getTotalCount()返回的是所有的总数 getCou ... -
Ext window的大小与屏幕匹配
2009-05-08 10:44 10248网页可见区域宽:document.body.clientWid ... -
editorGrid点击图片删除一行
2009-05-06 15:11 1317捕捉单元格的单击事件,判断单元格是有图片的那一列的.是这一列的 ... -
Ext 组件的doLayout()方法
2009-05-05 19:25 6090当某个组件调用add( Ext.Component/Objec ... -
Ext grid autoExpandColumn
2009-05-05 12:44 6039今天在写grid的时候遇到了个问题 写出来的grid老不出效果 ... -
PropertyGrid不支持store动态绑定的折中解决办法
2009-05-03 19:22 2528官方说PropertyGrid的store属性应该隐去的 在s ... -
Ext.grid.PropertyGrid value 不可修改
2009-05-03 19:14 2373var grid = new Ext.grid.Propert ... -
Ext grid 若干问题
2009-05-03 19:03 15531.grid.getSelectionModel().getC ... -
Ext动态grid
2009-05-03 19:00 2918我们知道,实现extjs的Grid必须先定义一个ColumnM ... -
Ext树节点右键菜单
2009-04-24 10:48 13301./** 2. * 项目树 3. */ 4.Di ... -
Ext树节点右键菜单
2009-04-24 10:47 1994用ext做了一个树 // Add Tree Menu tre ... -
Ext 文件上传
2009-04-21 10:38 2403Ext.form.TextField 中设置 inputTyp ... -
Ext树
2009-04-20 17:50 1265Ext.onReady(function(){ var Tre ... -
扩展grid------RowExpander.js
2009-04-20 16:30 4033首先引入JS:RowExpander.js 这个文件可以在e ... -
Grid增删改
2009-04-20 13:29 1545var store=null; Ext.onReady(fun ... -
Ext遇到的问题--grid表头不能显示
2009-04-03 14:49 1670遇到一个问题,是就grid的表头不能显示,而我的代码写了 { ... -
Ext自动刷新代码
2009-04-03 08:58 2619var e = Ext.get('testRefresh'); ... -
ext总结
2009-03-23 12:56 1190最近也终于使用ext做了一个小的web项目。第一次使用ext做 ...
相关推荐
Ext动态树是基于Ext JS库的一个组件,用于创建交互式的、可动态更新的树形结构。这个组件在Web应用程序中非常有用,特别是在需要展示层级数据或者进行导航菜单设计时。Ext中文API为开发者提供了详细的使用指南和参考...
在"EXT动态树工程,例子学习"中,我们将关注EXT中的一个重要组件——动态树。 动态树是一种数据可视化工具,它允许用户以树状结构展示数据。在EXT中,动态树常用于展示层级关系的数据,如文件系统、组织结构或者...
下面我们将详细探讨Ext动态树的相关知识点。 首先,我们要理解Ext的树(TreePanel)是如何工作的。TreePanel是Ext提供的一种显示数据为树形结构的组件。它包含了节点(Node)、分支(Branch)和叶子节点(Leaf)等...
在本场景中,我们将探讨如何结合两者来生成动态的树形结构,即Ext动态树。 首先,我们需要理解ExtJS中的树组件(TreePanel)。树组件提供了一种直观的方式来展示层次化的数据,它能够通过异步加载节点来优化性能。...
在这个名为“Y梨Ext动态树的完整示例代码”的压缩包中,我们很可能会找到一个完整的EXTJS应用,展示了如何动态加载和操作树节点。 树形组件在很多场景下都非常实用,如文件系统导航、组织结构图、菜单系统等。EXTJS...
EXT是一个强大的JavaScript库,...通过实际代码示例,我们可以更深入地理解EXT动态树的操作方式。在实践中,结合EXT的API文档和示例代码,可以更好地掌握这些概念和技巧,从而创建出功能强大且用户友好的动态树组件。
在EXT中实现动态树的功能是一项常见的需求,特别是对于那些需要展示层次结构数据的应用。动态树允许用户在运行时进行编辑、添加、删除和批量操作节点,从而提供更加灵活的数据管理体验。 首先,我们要理解EXT中的树...
### 使用ExtJS实现动态树结构 #### 一、引言 在现代Web应用开发中,树形结构是一种非常常见的UI组件,它可以帮助用户更清晰地组织和浏览分层的数据结构。ExtJS是一款强大的JavaScript框架,提供了丰富的UI组件库,...
在“EXT2.0动态树,分页!”这个项目中,我们可以看到EXT2.0如何被用来创建一个后台管理系统的动态树结构,并结合了分页功能,以提高用户体验和系统性能。 动态树结构是EXT2.0中的一个重要特性,它允许用户交互地...
在描述中提到的“不错的下拉树,异步加载树节点”意味着这个组件具有高级功能,如动态、按需加载数据。在大型应用中,这种特性尤为重要,因为它可以提高页面的加载速度,只在用户需要时才加载相关的树节点数据,而...
`EXTJS动态树的实现举例+示例代码.rar`和`Y梨Ext动态树的完整示例代码.rar`等文件提供了实际的实现代码,帮助开发者理解如何配置和使用异步加载。 3. **API文档**: `Ext+中文文档-API.rar`和`Ext_Database.rar`...
Ext 3.3.1 动态加载树结构(Myeclipse 6.0.1) : 由于上传的文件不能大于15M ,和网速的限制,所以我把该资源分成了 3 部分 : 1.不包含jar包的java程序 1.66 MB ; 2.我把该java程序所包含的jar包分成了3部分保存...
其中,“Ext树”(Ext Tree)是ExtJS中的一个重要组件,用于展示层级结构的数据,如文件系统、组织架构等。本文将深入探讨如何在ExtJS中创建一个树形视图。 首先,理解Ext树的基本结构至关重要。一个Ext树由节点...
在IT领域,"ext 下拉树demo"是一个典型的前端开发示例,主要用于构建用户界面,特别是在数据管理和展示层级结构时。EXT是一个强大的JavaScript框架,它提供了丰富的组件库,包括下拉树(TreePicker)这样的控件。这...
在实际应用中,我们经常需要将 Ext.js 与后端框架如 Spring 进行集成,以实现动态加载树结构数据的功能。下面的示例展示了如何使用 Spring MVC 和 Hibernate 实现这一点。 ```javascript var TreeTest = function ...
本文将深入探讨如何处理无限级JSON数据格式并实现动态加载,以优化EXT树的性能。 首先,我们要理解EXT树的基本结构。EXT树的每个节点都是一个`Ext.tree.Node`对象,包含ID、文本、子节点等属性。无限级树意味着树的...
在本篇文章中,我们将深入探讨Ext树的基本概念、其主要功能以及如何通过`tree1.txt`和`tree2.txt`这两个文件来创建和理解树形结构。 首先,让我们了解Ext树的基础。Ext树的核心组件是`Ext.tree.Panel`,它继承自`...
EXT动态加载的树源码分析涉及到EXT的组件化思想、数据绑定、事件驱动编程、网络通信等多个方面,理解并掌握这些概念对于开发高效、可维护的EXT应用至关重要。通过深入学习和实践,我们可以灵活地利用EXT构建功能丰富...
这个名为“ssh+ext+json+dwr技术实现的动态树”的项目结合了这些技术,为我们提供了一个生动的示例,展示了如何在实际项目中有效地整合它们。 SSH(Spring、Struts、Hibernate)是Java Web开发的三大框架,它们各自...
在描述中提到的"Ext TreePanel Checked Ext复选框树"是指`TreePanel`的一种特殊形式,它扩展了基本的树视图,加入了复选框功能。 复选框树(Checked Tree)允许用户通过复选框来选择或取消选择树结构中的节点。这种...