功能简介:(1)采用Ext2.2开发的;(2)支持数据三层操作;(3)支持右键菜单项;(4)节点增删改查操作;
数据库表的设计为表A(id,type,text),表B(id,fid,text),表A为根节点一级菜单与二级菜单数据项,其中type用于判别类型,fid为表B的外键,即A中的id,其实两张表也可以合为一张表,方法是利用type进行控制。
表A数据参考:
(1,0,'根节点');
(2,1,'二级菜单1');
(3,1,'二级菜单2');
... ...
表B数据参考:
(1,2,'三级菜单1');
(2,2,'三级菜单2');
(3,3,'三级菜单3');
... ...
以下是Javascript代码实现
/***Ext树相关控件定义开始***/
/***定义树的节点***/
var treeRoot = new Ext.tree.AsyncTreeNode({
id:'root',
treeid : '1',//根节点在数据库表中对应的ID
text : "根节点名称",
expanded : true,
expandable : true,
draggable : false
});
/***定义树的数据项加载器***/
var treeLoader = new Ext.tree.TreeLoader({
url : '',//获取一级菜单数据项URL,输出JSON格式数据
baseParams : {
parentId : '0'
},
listeners : {
beforeload : function(tree, node) {
var treeid = node.attributes.treeid;
//根据treeid获取第二层与第三层的数据项
if (treeid == '1') {
tree.url = '';//获取二级菜单数据项URL,输出JSON格式数据
tree.baseParams.parentId = treeid;
} else {
tree.url = '';//获取二级菜单下对应三级菜单数据项URL,输出JSON格式
tree.baseParams.parentId = treeid;
}
}
}
});
var treeMenu;//定义右键菜单
/***定义树的面板***/
var treePanel = tree = new Ext.tree.TreePanel({
root : treeRoot,
loader : treeLoader,
width : 220,
height : 340,
autoScroll :true,
contextMenu : treeMenu,
listeners : {
click : function(node, e) {
if (node.isLeaf()) {
//当前节点是叶子节点时触发
}
},
//定义右键菜单
contextmenu : function(node, e) {
//当节点为根节点时
if (node.parentNode == null) {
node.select();//当前节点被选中
treeMenu = new Ext.menu.Menu({
items : [{
text : "添加二级菜单项",
iconCls : 'leaf',
handler : function() {
Ext.MessageBox.prompt('请输入二级菜单名称', "", function(e,
text) {
if (e == "ok") {
Ext.Ajax.request({
//添加二级菜单的URL
url : '',
params : {
czdw : text,
dwlb : node.attributes.treeid,
gdjdm: wp.gdjdm
},
method : 'post',
sync : true,
success : function(res) {
//请求返回成功后在前天添加相应节点
var jsonObj = eval("(" + res.responseText + ")");
var tempNode = new Ext.tree.TreeNode({
treeid : jsonObj.treeid,
text :jsonObj.text,
expandable : true,
draggable : false,
dw:true//节点自定义属性,可根据需要添加,主要为判断加载菜单项
});
//注册右键菜单
tempNode.on('contextmenu',function(node,e){
node.select();
treeMenu.showAt(e.getPoint());
});
node.appendChild(tempNode);
try{
tempNode.select();//定位到新节点
}catch(e){}
},
failure : function() {
Ext.Msg.alert('提示消息','操作失败!');
}
});
}
})
}
}]
});
treeMenu.showAt(e.getPoint());//显示菜单位置
} else if (node.attributes.dw == true) {//当前为二级菜单节点时,即二层节点
node.select();
treeMenu = new Ext.menu.Menu({
items : [{
text : "添加三级菜单",
iconCls : 'leaf',
handler : function() {
Ext.MessageBox.prompt("请输入三级菜单名称", "", function(e,
text) {
if (e == "ok") {
Ext.Ajax.request({
//三级菜单添加URL
url : '',
params : {
mid : node.attributes.treeid,
ryxm : text,
gdjdm : wp.gdjdm
},
success : function(res) {
//前台添加相应节点
var jsonObj = eval("(" + res.responseText + ")");
var tempNode = new Ext.tree.TreeNode({
treeid : jsonObj.treeid,
text :jsonObj.text,
expanded : false,
expandable : false,
draggable : false,
ry:true//和dw属性类似,用于判断当前为第几级菜单
});
node.appendChild(tempNode);
tempNode.on('contextmenu',function(node,e){
node.select();
treeMenu.showAt(e.getPoint());
});
node.attributes.leaf=false;
node.attributes.leaf.iconCls='';
node.getUI().getIconEl().src='../../../ext/resources/images/default/tree/folder.gif';//修改父节点图标
node.expand();
//定位到新节点
try{
tempNode.select();
}catch(e){}
},
failure : function() {
Ext.Msg.alert('提示消息','操作失败!');
}
});
}
})
}
}, {
text : "编辑二级菜单",
iconCls : 'leaf',
handler : function() {
var nodeText = node.attributes.text;
Ext.MessageBox.prompt("请输入二级菜单新名称", nodeText, function(e,
text) {
if (e == "ok") {
Ext.Ajax.request({
url : '',//二级菜单更新URL
params : {
id : node.attributes.treeid,
czdw : text
},
success : function(request) {
node.setText(text);
Ext.Msg.alert('提示消息','编辑成功!');
},
failure : function() {
Ext.Msg.alert('提示消息','操作失败!');
}
});
}
})
}
}, {
text : '删除二级菜单项',
iconCls : 'leaf',
handler : function() {
Ext.Ajax.request({
url : '',
params : {
id : node.attributes.treeid
},
success : function(request) {
if(node.hasChildNodes()){
var nodes = node.childNodes;
for(var i=0;i<nodes.length;i++){
nodes[i].remove();
}
}
node.remove();
//Ext.Msg.alert('提示消息','删除成功!');
},
failure : function() {
Ext.Msg.alert('提示消息','操作失败!');
}
});
}
}]
});
treeMenu.showAt(e.getPoint());
} else if ( node.attributes.ry == true) {//当前节点为三级菜单项时,即三层节点
node.select();
treeMenu = new Ext.menu.Menu({
items : [{
text : "编辑三级菜单项",
iconCls : 'leaf',
handler : function() {
var nodeText = node.attributes.text;
Ext.MessageBox.prompt("请输入三级菜单新名称", nodeText, function(e,
text) {
if (e == "ok") {
Ext.Ajax.request({
url : '',//更新三级菜单数据项URL
params : {
id : node.attributes.treeid,
ryxm : text
},
success : function(request) {
node.setText(text);
},
failure : function() {
Ext.Msg.alert('提示消息','操作失败!');
}
});
}
})
}
}, {
text : '删除三级菜单项',
iconCls : 'leaf',
handler : function() {
Ext.Ajax.request({
url : '',//删除三级菜单的URL
params : {
id : node.attributes.treeid
},
success : function(request) {
node.remove();
//Ext.Msg.alert('提示消息','删除成功!');
},
failure : function() {
Ext.Msg.alert('提示消息','操作失败!');
}
});
}
}]
});
treeMenu.showAt(e.getPoint());
}
}
}
});
//var treeEditor = new Ext.tree.TreeEditor(treePanel);
var treeWin;
/***树相关控件定义结束***/
/***
* 获取树界面
*/
function getUnitsManageTreeWin() {
if (!treeWin) {
treeWin = new Ext.Window({
title : "Ext树",
width : 240,
height : 370,
items : [treePanel],
closeAction : 'hide'
});
}
treeWin.show();
}
分享到:
相关推荐
该项目实现了树的增删改操作,还有下拉树;该项目的使用说明在压缩包中, 我也是ext的初学者,为了在以后的项目中使用,此处做已备份,希望对大家也有所帮助
Ext2.0不仅仅实现了复选框的树形菜单,而且使得在选中某个节点时,如果有子节点,那么就能够将所有的字节点全部选中,当然你也可以直接选择你希望的节点。但是,当你第一次选中某个有子节点但是子节点并没有展开的...
由于项目的需要最近在学习ext,在项目中必不可少用到了tree,并且要对tree进行增、改、删的操作。上网找了很多不错的学习资料把这些功能组织在一起。在学习ext的过程中花了不少时间,我想很多网友刚开始学习ext的...
ext 关于树目录的函数,关键对象,方法的操作说明,和相关ECLIPSE上的插件安装。
ext开发的动态树的生成,里面还有对树的各种增删改操作
一个基于Ext4.2可增删树的例子,解决了Ext不能动态改变leaf属性的问题。该树可自动判断当增删操作后,重新更新自我状态以便显示为叶节点或者非叶节点。
8.5.5. 反向操作,ext把json变成字符串 8.6. 小声说说scope 8.7. 菜单和工具条 8.7.1. 至简至廉的菜单 8.7.2. 丰富一点儿的多级菜单 8.7.3. 单选多选,菜单里搞这套 8.7.4. 小把戏,定制好的菜单 8.7.5. SplitButton...
第5~9章分别讲解了ext js的事件及其应用、选择器与dom操作、数据交互、模板与组件、容器、面板、布局与视图;第10章和第11章分别详细介绍了重构后的gird和与gird同源的树;第12~16章分别讲解了表单、窗口、按钮、...
8.5.5. 反向操作,ext把json变成字符串 8.6. 小声说说scope 8.7. 菜单和工具条 8.7.1. 至简至廉的菜单 8.7.2. 丰富一点儿的多级菜单 8.7.3. 单选多选,菜单里搞这套 8.7.4. 小把戏,定制好的菜单 8.7.5. SplitButton...
ext的树的实例.通过右键菜单操作树节点对数据库进行增删改查.
8.5.5. 反向操作,ext把json变成字符串 8.6. 小声说说scope 8.7. 菜单和工具条 8.7.1. 至简至廉的菜单 8.7.2. 丰富一点儿的多级菜单 8.7.3. 单选多选,菜单里搞这套 8.7.4. 小把戏,定制好的菜单 8.7.5. ...
7.5.11 树节点:ext.data.nodeinterface与ext.data.tree / 364 7.5.12 store的方法 / 366 7.5.13 store的事件 / 368 7.5.14 store管理器:ext.data.storemanager / 369 7.6 综合实例 / 369 7.6.1 远程读取json...
全书由一个可以引领读者快速入门的“hello world”示例开篇,紧接着对ext js的事件、核心组件、表格和表单等各种控件、树形结构、拖放、弹出窗口、布局、数据存储和传输、实用工具和扩展等进行了详细讲解,最后以一...
全书由一个可以引领读者快速入门的“hello world”示例开篇,紧接着对ext js的事件、核心组件、表格和表单等各种控件、树形结构、拖放、弹出窗口、布局、数据存储和传输、实用工具和扩展等进行了详细讲解,最后以一...
实现的树的增删改操作,并且添加了权重,及树节点的排列顺序, 备以后使用,同时希望能为用的的兄弟姐妹提供以下帮助,不足之处希望多多指点
全书由一个可以引领读者快速入门的“hello world”示例开篇,紧接着对ext js的事件、核心组件、表格和表单等各种控件、树形结构、拖放、弹出窗口、布局、数据存储和传输、实用工具和扩展等进行了详细讲解,最后以一...
第5~9章分别讲解了ext js的事件及其应用、选择器与dom操作、数据交互、模板与组件、容器、面板、布局与视图;第10章和第11章分别详细介绍了重构后的gird和与gird同源的树;第12~16章分别讲解了表单、窗口、按钮、...
包括布局、事件、grid的绑定(包含增删改)以及数据库分页还有表单绑定取值和dateview控件的使用,树的使用,包含拖拉,修改等操作 dll文件为extnet3.5,可自行下载黏贴到要目录下的net35文件夹里即可
例子包括对GWT-EXT的对表格,树,面板操作。对与IBATIS数据结合使用。包括客户端与服务器端,此例子在netbeans6.5下面可以正常运行 整个工程文件太大,这里只能上传源代码,如果需要整个工程的可以发邮件给我 ...
全书由一个可以引领读者快速入门的“Hello World”示例开篇,紧接着对Ext JS的事件、核心组件、表格和表单等各种控件、树形结构、拖放、弹出窗口、布局、数据存储和传输、实用工具和扩展等进行了详细讲解,最后一个...