这两天在搞一个项目升级,用户要操作方便。要用树操作。在网上找了半天,发现 extjs tree 文档比较多,所以用它了。因为原有的项目是用 dwr ,所以,这里动态数据也用它了。其它不多说了。
见代码。全工程代码,用 JBuilder 2006 开发的。
如果改成复选框。只要改点小地方。 node -->checked : false,
再加个 :
tree.on('checkchange', function(node, checked) {
node.expand();
node.attributes.checked = checked;
node.eachChild(function(child) {
child.ui.toggleCheck(checked);
child.attributes.checked = checked;
child.fireEvent('checkchange', child,
checked);
});
}, tree);
全代码如下:
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = "resources/images/default/s.gif";
var root = new Ext.tree.TreeNode({
text:'主菜单',
expanded:true
});
var tree = new Ext.tree.TreePanel({
root:root,
animate : true,
border : false,
autoHeight : true,
useArrows:true,
autoScroll:true,
animate:true,
enableDD:true,
containerScroll: true,
rootVisible: false,
frame: true,
width:200
});
function queryTree()
{
var menu = new Array();
DWREngine.setAsync(false); //同步方法
//取得根结点下的第一级子菜单
menuService.queryFirstMenu(0, function(data){
//0代表根结点ID是0
for(var i = 0; i < data.length; i++)
{
var node = new Ext.tree.TreeNode({
text:data[i].menuName,
id:data[i].menuId,
url:data[i].menuUrl,
allowDrag : false,
checked : false,
expanded:true
});
root.appendChild(node);
menu.push(node);
}
});
//循环队列
for(var i = 0; i < menu.length; i++)
{
menuService.queryFirstMenu(menu[i].id, function(data2){
for(var j = 0; j < data2.length; j++)
{
var node = new Ext.tree.TreeNode({
text:data2[j].menuName,
id:data2[j].menuId,
url:data2[j].menuUrl,
allowDrag : false,
checked : false,
expanded:true
});
menu[i].appendChild(node);
menu.push(node);
}
});
}
DWREngine.setAsync(true);
}
queryTree();
tree.setRootNode(root);
tree.on('checkchange', function(node, checked) {
node.expand();
node.attributes.checked = checked;
node.eachChild(function(child) {
child.ui.toggleCheck(checked);
child.attributes.checked = checked;
child.fireEvent('checkchange', child,
checked);
});
}, tree);
tree.render(Ext.getBody());
});
- 大小: 21.2 KB
- 大小: 4.7 KB
- 大小: 26.9 KB
- 大小: 19.6 KB
分享到:
相关推荐
ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS...ExtJS快速入门 ExtJS快速入门 ExtJS快速入门ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门
extjs dwr hibernate spring 整合的树!
ExtJs和Direct Web Remoting (DWR) 是两种在Web应用程序中实现富客户端交互的技术。ExtJs是一个强大的JavaScript框架,用于构建用户界面,而DWR则是一个允许JavaScript直接调用服务器端Java方法的库,无需AJAX的...
DWR是一种JavaScript到Java的反向AJAX库,它允许前端JavaScript代码直接调用Java后台方法,从而实现了前端与后端的无缝交互。DWR简化了AJAX开发,使得开发者无需处理XMLHttpRequest对象和JSON或XML数据格式化,可以...
**ExtJS** 是一个JavaScript库,主要用于构建桌面级的Web应用。它提供了一套完整的UI组件,包括数据绑定、布局管理、表单处理等,让开发者可以创建出美观且功能丰富的用户界面。ExtJS基于MVC(Model-View-Controller...
4. **源代码分析**:项目中的"电子书"和"源代码"部分可能包含详细的设计文档、教程和实现代码。通过这些资源,开发者可以深入理解系统架构,学习如何整合Extjs、Dwr和Spring,以及如何设计一个完整的业务流程,包括...
Extjs3.1例子源代码Extjs3.1例子源代码Extjs3.1例子源代码vv
深入浅出ExtJS 源代码深入浅出ExtJS 源代码深入浅出ExtJS 源代码深入浅出ExtJS 源代码深入浅出ExtJS 源代码
【Inter(extjs 的案例源代码)源代码】这个资源是一个基于ExtJS的示例集合,主要展示了在实际项目中如何运用这个强大的JavaScript框架。ExtJS是一个用于构建富客户端Web应用的框架,它提供了丰富的组件库,包括数据...
EXTJS高级程序设计源代码6-4 EXTJS高级程序设计源代码6-4
EXTJS高级程序设计源代码6-3 EXTJS高级程序设计源代码6-3
extjs4.0教程源代码,精品分享
这个进销存源代码示例展示了如何利用ExtJs4实现库存管理、销售管理和采购管理的核心功能,帮助开发者更好地理解和应用ExtJs4在实际项目中的实践。 进销存系统是企业管理中不可或缺的一部分,它涵盖了采购...
EXTJS高级程序设计源代码6-2 EXTJS高级程序设计源代码6-2
北大青鸟 李赞红老师 轻松搞定ExtJS 实例 源代码
这个"ExtJS MVC入门级开发案例"是一个理想的学习资源,适合初学者理解并掌握如何在ExtJS中应用MVC架构。 **1. MVC模式详解** Model(模型):负责处理应用程序的数据逻辑,与后端服务器进行交互,获取和存储数据。...
本资源文件“FullSource”旨在解决这个问题,它提供了查看ExtJS程序实际源代码的能力。这通常通过某种方式如插件、扩展或者特定的开发工具实现,使开发者能透明地观察到应用程序的运行状态,包括生成的DOM元素、CSS...