ext树节点右击事件的增删改（包括与数据库的操作）

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)

{

}

});