1)先创建一棵树
menuTree = new Ext.tree.TreePanel({}); 2)增加右击事件 menuTree.on('contextmenu',showRightClickMenu,RightClickMenu); var RightClickMenu = new Ext.menu.Menu({ //右击事件 items:[{ xtype:"button", text:"添加节点", icon:"images/icon/menuitem.gif", pressed:true, handler : function(tree) { onInsertNode(); } },{ xtype:"button", text:"修改节点", icon:"images/icon/menuitem.gif", pressed:true, handler : function() { onUpdate(); } },{ xtype:"button", text:"删除节点", icon:"images/icon/menuitem.gif", pressed:true, handler : function(tree) { onDeleteNode(); } }] }); function showRightClickMenu(node,e)
{ //先让该节点被选中 node.select(); //参数node是右击的那个节点,即事件源 //参数e是事件对象 this.showAt(e.getPoint()); } 3)未与数据库相连,只是直接在树上显示 function onInsertNode() { Ext.Msg.prompt('请输入新建的节点名称' , '新建标准名称' , this.onInsertNodePrompt , this) ; } function onInsertNodePrompt(btn , text)
{ if(btn == 'ok') { var selectedNode = menuTree.getSelectionModel().getSelectedNode(); var selectedParentNode = selectedNode.parentNode; var newNode = new Ext.tree.TreeNode({ text : text }); if (selectedParentNode == null) { selectedNode.appendChild(newNode); } else { selectedParentNode.insertBefore(newNode, selectedNode); } setTimeout(function() { treeEditor.editNode = newNode; treeEditor.startEdit(newNode.ui.textNode); }, 10); }
function onDeleteNode() { Ext.Msg.confirm('系统提示' , '你是否确定删除此标准?' , this.onDeleteNodeConfirm , this); }; function onDeleteNodeConfirm(btn)
{ if(btn == 'yes') { var selectedNode = menuTree.getSelectionModel().getSelectedNode(); selectedNode.remove(); } } function onUpdate()
{ Ext.Msg.confirm('系统提示' , '你是否确定修改此标准?' , this.onUpdateNode , this); }; function onUpdateNode()
{ var selectedNode = menuTree.getSelectionModel().getSelectedNode(); Ext.Msg.prompt('请输入修改的节点名称' , '修改名称' , this.onUpdateNodePrompt , this , false , selectedNode.text) ; } function onUpdateNodePrompt(btn , text)
{ if(btn == 'ok') { var selectedNode = menuTree.getSelectionModel().getSelectedNode(); selectedNode.setText(text) ; setTimeout(function() { treeEditor.editNode = selectedNode; treeEditor.startEdit(selectedNode.ui.textNode); }, 10); } } 4)与数据库相连,也是只是直接在树上显示
function onInsertNode()
{ Ext.Msg.prompt('请输入新建的节点名称' , '新建标准名称' , this.onInsertNodePrompt , this) ; } function onInsertNodePrompt(btn , text)
{ if(btn == 'ok') { var selectedNode = menuTree.getSelectionModel().getSelectedNode(); Ext.Ajax.request({ url: action的路径, method:'post', params:{name:text,cid:selectedNode.id}, success: function(response, option) { var result = response.responseText; if(result.match('ok')) { alert('新增成功!'); menuTree.root.reload(); root.expand(); } }, failure: function(response, option) { } }); } }
该action的路径直接到一个jsp页面 <%@page contentType="application/json;charset=utf-8" import="org.springframework.web.context.support.*,org.springframework.core.io.*,org.springframework.beans.factory.*,org.springframework.beans.factory.xml.*,org.springframework.context.*,org.springframework.context.support.*,com.cssrc.bean.*,com.cssrc.dao.impl.*,com.cssrc.dao.*,java.util.List" %> <% request.setCharacterEncoding("utf-8"); response.setCharacterEncoding("utf-8"); String name = request.getParameter("name"); String str[] = name.split(" "); String code = ""; if(str.length==2) { code = str[1]; } String cid = request.getParameter("cid"); int id = Integer.parseInt(cid); ServletContext sc = request.getSession().getServletContext(); ApplicationContext ac =WebApplicationContextUtils.getWebApplicationContext(sc);//很重要获得dao IMenuItemDAO dao = (IMenuItemDAO)ac.getBean("MenuItemDAO"); MenuItem m = dao.findById(id); MenuItem mi = new MenuItem(); mi.setMenuBar(m.getMenuBar()); mi.setImage("menuitem.gif"); if(m.getItemCode()==1)//当前是一级菜单 { mi.setParentId(m.getId()); List l = dao.findByProperty("parentId",m.getId()); if(l.size()==1) { mi.setDisplayOrder(2); } else { MenuItem t = (MenuItem)l.get(l.size()-1); mi.setDisplayOrder(t.getDisplayOrder()+1); } mi.setItemCode(2); mi.setItemName(name); mi.setClickEvent("item.jsp"); } else if(m.getItemCode()==2) { mi.setParentId(m.getId()); List l = dao.findByProperty("parentId",m.getId()); if(l.size()==0) { mi.setDisplayOrder(1); } else if(l.size()==1) { mi.setDisplayOrder(2); } else { MenuItem t = (MenuItem)l.get(l.size()-1); mi.setDisplayOrder(t.getDisplayOrder()+1); } mi.setItemCode(3); mi.setItemName(name); mi.setClickEvent("standard/standardlistAction?type="+code+""); } dao.save(mi); response.getWriter().write( "ok"); %> function onDeleteNode()
{ Ext.Msg.confirm('系统提示' , '你是否确定删除此标准?' , this.onDeleteNodeConfirm , this); }; function onDeleteNodeConfirm(btn)
{ if(btn == 'yes') { var selectedNode = menuTree.getSelectionModel().getSelectedNode(); Ext.Ajax.request({ url: context+'/node/nodedelete.action', method:'post', params:{cid:selectedNode.id}, success: function(response, option) { var result = response.responseText; var str1 = 'ok'; var str2 = 'cancel'; if(result.match(str2)) { alert('该节点不能删除!'); } if(result.match(str1)) { alert('删除成功!'); menuTree.root.reload(); root.expand(); } }, failure: function(response, option) { } }); } } function onUpdate()
{ Ext.Msg.confirm('系统提示' , '你是否确定修改此标准?' , this.onUpdateNode , this); }; function onUpdateNode()
{ var selectedNode = menuTree.getSelectionModel().getSelectedNode(); Ext.Msg.prompt('请输入修改的节点名称' , '修改名称' , this.onUpdateNodePrompt , this , false , selectedNode.text) ; } function onUpdateNodePrompt(btn , text)
{ if(btn == 'ok') { var selectedNode = menuTree.getSelectionModel().getSelectedNode(); Ext.Ajax.request({ url: context+'/node/nodeupdate.action', method:'post', params:{name:text,cid:selectedNode.id}, success: function(response, option) { var result = response.responseText; var str1 = 'ok'; var str2 = 'cancel'; if(result.match(str2)) { alert('该节点不能修改!'); } if(result.match(str1)) { alert('修改成功!'); menuTree.root.reload(); root.expand(); } }, failure: function(response, option) { } }); 本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/y_h_t/archive/2009/12/08/4966222.aspx
|
|