Ext树的相关操作

 

功能简介：（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');

...  ...

 

 /***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(); }