qinya06
- 浏览: 582227 次
- 性别:
- 来自: 杭州
-
文章分类
- 全部博客 (268)
- ext基础 (72)
- Java基础 (68)
- jquery (14)
- oracle (21)
- sqlserver (7)
- linux (2)
- webserver (1)
- C/C++ (1)
- sql (9)
- IDE (2)
- java 智能卡 (1)
- mysql (6)
- ibatis (2)
- struts2 (3)
- cvs (1)
- 服务器 (1)
- html (11)
- freemarker (4)
- liferay (2)
- jMS (1)
- iphone (1)
- c# (1)
- Android (11)
- wince (6)
- javascript (4)
- ps (1)
- hibernate (1)
- 其他 (3)
最新评论
-
ilyq：
请问，px.gif 在哪里
斜线表头 -
jisang：
没看懂，第一个org.js和最后的js什么关系，可否发我一份完 ...
用ExtJS 实现动态载入树（Load tree） -
JavaStudyEye：
我去，能否搞个正确点的，，，
<#list ...
freemarker 遍历map 对象 -
PangSir：
大爱，简直是大爱！！困扰这么久以来的问题，虽然知道是CSS的问 ...
ExtJs checkbox radiobox 问题 汇总 -
skynet_java：
有demo嘛！邮箱：think_world@foxmail.c ...
消息推送服务需求 - 服务器开发、客户端开发
Oracle DDL脚本 ：
初始化数据内容（注意第一行数据是必需的）：
有了数据库支持就可以动态的从数据库中提取树数据。
第一步是建立JSP文件（org.jsp）和JavaScript(org.js)文件：
在org.jsp中导入ExtJS所必需的库文件，并在<body>中加入
<body>
<div id="tree-div" style="overflow:auto; height:300px;width:200px;border:2px solid #c3daf9;"></div>
</body>
Org.jsp文件完全可以是静态HTML文件，这里org.jsp中不包含任何动态内容，注意ExtJS所必需的库文件类库路径问题。
Org.js文件内容：
OrgTreeJsonData.action所请求的JSON数据例子：
我载入的jsondata
获取上面的href地址：node.attributes.href
[ {
"text" : "公司总部1",
"id" : "1",
"cls" : "folder"
}, {
"text" : "公司总部2",
"id" : "2",
"cls" : "folder"
}, {
"text" : "公司总部3",
"id" : "3",
"cls" : "folder"
}]
服务器端可以使用这样的SQL语句来查询：
下面的代码片断用于struts2 action类中：
运行时的图：
http://dl.iteye.com/upload/picture/pic/58892/423be1ce-d811-31a6-b65a-ff4c88996dfd.jpg
create table ORGANIZATION(
ORGID NUMBER(10) not null,
PARENTID NUMBER(10) not null,
ORGNAME VARCHAR2(32) not null,
ISAVAILABLE NUMBER(1) default 1 not null
);
alter table ORGANIZATION
add constraint PK_ORGID primary key (ORGID);
alter table ORGANIZATION
add constraint FK_ORGID_PARENTID foreign key (PARENTID)
references ORGANIZATION (ORGID);
初始化数据内容（注意第一行数据是必需的）：
insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME, ISAVAILABLE) values (-100, -100, '组织机构图', 1); insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME, ISAVAILABLE) values (1, -100, '公司总部1', 1); insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME, ISAVAILABLE) values (2, -100, '公司总部2', 1); insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME, ISAVAILABLE) values (3, -100, '公司总部3', 1); insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME, ISAVAILABLE) values (4, 1, '公司总部1-1', 1); insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME, ISAVAILABLE) values (5, 1, '公司总部1-2', 1); insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME, ISAVAILABLE) values (6, 2, '公司总部2-1', 1); insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME, ISAVAILABLE) values (7, 2, '公司总部2-2', 1); insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME, ISAVAILABLE) values (8, 3, '公司总部3-1', 1); insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME, ISAVAILABLE) values (9, 3, '公司总部3-2', 1);
有了数据库支持就可以动态的从数据库中提取树数据。
第一步是建立JSP文件（org.jsp）和JavaScript(org.js)文件：
在org.jsp中导入ExtJS所必需的库文件，并在<body>中加入
<body>
<div id="tree-div" style="overflow:auto; height:300px;width:200px;border:2px solid #c3daf9;"></div>
</body>
Org.jsp文件完全可以是静态HTML文件，这里org.jsp中不包含任何动态内容，注意ExtJS所必需的库文件类库路径问题。
Org.js文件内容：
Ext.onReady(function() {
var Tree = Ext.tree;
var tree = new Tree.TreePanel( {
el : 'tree-div',//目标div容器
autoScroll : true,
animate : true,
enableDD : true,
containerScroll : true,
loader : new Tree.TreeLoader( {
dataUrl : ' OrgTreeJsonData.action '// OrgTreeJsonData.action就是要动态载入数据的请求地址，这里请求时会提交一个参数为node的值，值为root即new Tree.AsyncTreeNode()对象的id值
})
});
var root = new Tree.AsyncTreeNode( {
text : '组织机构树',
draggable : false,
id : '-100'//默认的node值：?node=-100
});
tree.setRootNode(root);
tree.render();
root.expand();
});
OrgTreeJsonData.action所请求的JSON数据例子：
我载入的jsondata
[ {
"text" : "公司总部1",
"id" : "1",
"cls" : "folder","href":"1.jsp","left":"true","qtip":"根节点提示" }]
获取上面的href地址：node.attributes.href
[ {
"text" : "公司总部1",
"id" : "1",
"cls" : "folder"
}, {
"text" : "公司总部2",
"id" : "2",
"cls" : "folder"
}, {
"text" : "公司总部3",
"id" : "3",
"cls" : "folder"
}]
服务器端可以使用这样的SQL语句来查询：
select t.orgid,t.orgname,t.parentid from organization t where t.parentid='-100' and t.orgid!='-100'
下面的代码片断用于struts2 action类中：
public String treeNode() {
try {
List<Object[]> list = this.organizationService.findByParentId(this.node);
if (list != null && !list.isEmpty()) {
boolean isFirst = true;
int i = 0;
int last = list.size();
for (Object[] o : list) {
if (i == 0) {
this.setJsonString("[{\"text\" :\"" + o[1].toString() + "\" ,\"id\" :\"" + o[0].toString()
+ "\" ,\"cls\" :\"folder\"} ");
} else if (i == (last - 1)) {
this.setJsonString(this.getJsonString() + ",{\"text\" :\"" + o[1].toString() + "\" ,\"id\" :\""
+ o[0].toString() + "\" ,\"cls\" :\"folder\"}]");
} else {
this.setJsonString(this.getJsonString() + ",{\"text\" :\"" + o[1].toString() + "\" ,\"id\" :\""
+ o[0].toString() + "\" ,\"cls\" :\"folder\"}");
}
i++;
}
} else {
this.setJsonString("");
}
System.out.println(this.getJsonString());
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
return this.INPUT;
}
return this.SUCCESS;
}
运行时的图：
http://dl.iteye.com/upload/picture/pic/58892/423be1ce-d811-31a6-b65a-ff4c88996dfd.jpg
Ext.onReady(function() {
var Tree = Ext.tree;
var tree = new Tree.TreePanel( {
el : 'tree-div',//目标div容器
autoScroll : true,
animate : true,
enableDD : true,
containerScroll : true,
loader : new Tree.TreeLoader( {
dataUrl : 'student/doGetTree.action '// OrgTreeJsonData.action就是要动态载入数据的请求地址，这里请求时会提交一个参数为node的值，值为root即new Tree.AsyncTreeNode()对象的id值
}),
listeners:{
click : function(node){
if(node.id == '-100'){
// 如果点击的是根节点，则 GridPanel 显示所有的数据
//store.load({params:{flag:'all'}});
alert("play");
}
else if(node.isLeaf() == true){
// 如果点击的是枝节点的话，则根据 ID 查询联系人的信息
//store.load({params:{flag:'contacter',contacterId:node.id}});
alert("leaf");
}else{
// 如果既不是根节点也不是枝节点，那么点击的就是分组节点，
// 则 GridPanel 显示对应分组号的联系人信息
//store.load({params:{flag:'group',groupId:node.id}});
var nodeId=node.attributes.id;
alert(nodeId);
self.location = 'test.jsp?nodeid='+nodeId;
}
}
}
});
var root = new Tree.AsyncTreeNode( {
text : '组织机构树',
draggable : false,
id : '-100'//默认的node值：?node=-100
});
tree.setRootNode(root);
tree.render();
// root.expand();
tree.root.expand(false, false); //默认展开第一级
});
分享到：
发表评论
-
将博客搬至CSDN
2023-02-06 16:57 109https://www.iteye.com/blog/user ... -
Liferay Portal 应用之开发（1）
2012-02-27 14:09 17321.下载安装Eclipse Eclipse ... -
liferay Portal (1) 应用之配置
2012-02-27 13:59 1230Liferay Portal缺省只有一 ... -
ext form
2011-05-18 15:25 924//grid1定义的grid var record = gr ... -
combox
2011-04-27 10:55 15311.服务器数据作为ComboBox的数据源 实例 首先从服务 ... -
ext grid 单元格
2010-12-29 11:17 959listeners : { cellcli ... -
combox 默认值
2010-12-20 10:35 2950[ {"abbr":&quo ... -
Ext.DateField 格式
2010-12-17 10:11 1393Ext.DatePicker，该类为我们提供了一个占地面积很广 ... -
extjs的grid控件如何根据值来设置某行的背景颜色
2010-12-17 09:40 8030根据不同的值来设置grid的背景颜色 在viewConfig ... -
动态组件
2010-12-16 17:05 966Ext.onReady(function() { ... -
js 获取路径
2010-12-13 19:02 1337<br>以下为输出： <br> ... -
矫正对象 信息登记
2010-12-08 14:10 879矫正对象登记 { frame : true ... -
转 ext Demo
2010-12-05 13:17 1419下面这个是主界面的设计 Ext.onReady(funct ... -
下拉框 控制 列是否可读
2010-11-12 08:33 1050Ext EditorGrid单元格控制小记 http://d ... -
extjs formpanel 怎么显示图片
2010-10-02 10:13 3492//可加普通的panel，html属性直接添加html代码 ... -
动态 改变 column样式
2010-09-30 16:35 1090grid.getView().getCell(rowNum , ... -
js 应用
2010-09-29 14:38 966JS里 面的new Date("xxxx/xx/xx ... -
grid 表头 鼠标事件
2010-09-24 16:04 1845grid.addListener("cellclic ... -
格式化
2010-08-26 00:32 1410//创建edgrid.js Ext.onReady(func ... -
ext (增 ，删，改 ，查，导出excel)
2010-08-26 00:03 1802下面为扩张grid的 代码 ...
相关推荐
用ExtJS实现动态载入树.包含数据库背景、具体代码、以及图片解释
资源名称：用ExtJS实现动态载入树 WORD版内容简介：本文档主要讲述的是用ExtJS实现动态载入树；希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看资源截图： 资源太大，传百度网盘了，链接在附件中，有...
可以让页面更美观 用ExtJS实现动态载入树
extjs实现动态树
extjs实现动态树加载菜单
用ExtJS 实现动态载入树（Load tree） Hibernate+Spring+Struts2+ExtJS开发CRUD功能
Extjs4动态树实现，感觉写的比较好就分享给大家
tree 的所有功能 很难得的 我刚调试好 只需要把数据库url 用户名和密码修改 ，就可以运行 extjs 动态树 tree ajax 全部功能 10分一点都不多，绝对值得。
ExtJs中Store加载(load)时候提示信息
csdn里有个兄弟类似的东西要10分，而且收录的不全，这个代码本是一个外国朋友的然后国人加了些修改，这里把两个版本同时献上
ExtJS 实现动态处理加载 grid 实现了CRUD还有分页功能
ExtJs4 Checkbox tree
Extjs3.2.0+asp.net动态Tree(附数据库)
Extjs的tree Extjs的tree Extjs的tree Extjs的tree Extjs的tree
extjs、struts2、mysql做的一个动态树，仅是一个动态树的小demo，不涉及角色、权限，并且数据是手动加入到数据库中的；资源中包涵数据库sql，只需创建一个名称为tree的数据库，执行sql就可以了，另外修改一下练级...
详细说明了extjs中的树控件,正确无误的说明extjs树控件的强大之处
功能：extjs4 下拉菜单树 combobox+tree 支持单选多选等 收集两款，仅需要1分。
NULL 博文链接：https://kaobian.iteye.com/blog/996146
1.主要是Extjs方面的一些学习笔记。重点方面有事件处理，动态载入等相关介绍。