这两天在搞一个项目升级,用户要操作方便。要用树操作。在网上找了半天,发现 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
分享到:
相关推荐
【DWR + ibatis + jQuery 入门教程】 DWR(Direct Web Remoting)是一种用于在Web应用程序中实现Ajax技术的框架,它使得JavaScript可以直接调用服务器端的Java方法,从而实现了页面的异步更新,提供了更加流畅的...
《精通JS脚本之ExtJS框架》附有配套光盘,提供了书中实例的源代码和视频教学文件。此外,读者还可以通过访问itzcn网站来获得即时在线帮助。 《精通JS脚本之ExtJS框架》可以作为Web开发的自学参考书,也可以作为...
《精通JS脚本之ExtJS框架》附有配套光盘,提供了书中实例的源代码和视频教学文件。此外,读者还可以通过访问itzcn网站来获得即时在线帮助。 《精通JS脚本之ExtJS框架》可以作为Web开发的自学参考书,也可以作为...
- `Hibernate+Spring+Struts2+ExtJS整合.rar`:这个文件可能是整个整合教程的源代码或者配置文件,包含了如何将这四个框架集成到一个项目中的步骤和示例。 这个组合的优势在于,Struts2处理HTTP请求和页面展示,...
1. **编写源文件 (.java)**: 使用文本编辑器或其他集成开发环境 (IDE) 编写 Java 源代码。 2. **编译源文件为类文件 (.class)**: 使用 JDK 提供的 `javac` 命令将源文件编译成字节码文件。 3. **在虚拟机上运行**: ...