这两天在搞一个项目升级,用户要操作方便。要用树操作。在网上找了半天,发现 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 DWR Spring 组合示例
ExtJs DWR扩展 DWRProxy、DWRTreeLoader、DWRGridProxy,经过EXT3.0版本测试! 通过DWR向Ext提供数据!非常棒的扩展!
自己写的extjs和dwr整合,自己写的extjs和dwr整合
Extjs3.1例子源代码Extjs3.1例子源代码Extjs3.1例子源代码vv
ExtJS MVC入门级开发案例 ,快速进入ExtJs的编码世界
源代码 博文链接:https://yusam.iteye.com/blog/237168
深入浅出ExtJS 源代码深入浅出ExtJS 源代码深入浅出ExtJS 源代码深入浅出ExtJS 源代码深入浅出ExtJS 源代码
extjs editgrid示例代码extjs editgrid示例代码extjs editgrid示例代码extjs editgrid示例代码
EXTJS高级程序设计源代码6-4 EXTJS高级程序设计源代码6-4
EXTJS高级程序设计源代码6-3 EXTJS高级程序设计源代码6-3
extjs4.0教程源代码,精品分享
EXTJS高级程序设计源代码6-2 EXTJS高级程序设计源代码6-2
EXTJS产品级别管理后台源代码
北大青鸟 李赞红老师 轻松搞定ExtJS 实例 源代码
extjs入门 extjs入门 extjs入门 extjs入门 extjs入门
博文链接:https://myd.iteye.com/blog/244882