extjs 实现右击菜单功能
1）default.aspx前台代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ExtjsTreeDemo._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<link type="text/css" rel="Stylesheet" href="Extjs3.2.0/resources/css/ext-all.css" />
<script language="javascript" type="text/javascript" src="Extjs3.2.0/adapter/ext/ext-base.js"></script>
<script language="javascript" type="text/javascript" src="Extjs3.2.0/ext-all.js"></script>
<script language="javascript" type="text/javascript">
Ext.onReady(initTreePanel);
function initTreePanel() {
//建立根
var root = new Ext.tree.AsyncTreeNode(
{ id: '0', text: '家谱' });
//建立树
var tree = new Ext.tree.TreePanel({
renderTo: 'div_tree',
id: 'tree',
autoScroll: true,
border: true,
width: 150,
height: 500,
useArrows: true,
lines: true,
animate: true,
enableDD: true,
containerScroll: true,
rootVisible: true,
root: root,
loader: new Ext.tree.TreeLoader({ url: 'ServletHandlers/GetTrees.ashx' }),
listeners: {
'contextmenu': function(node, e) {
node.select();
e.preventDefault(); //关闭右键默认菜单
var nodemenu = new Ext.menu.Menu({
items: [{
text: '添加节点',
//id: 'addNode',//添加的话右击菜单只能显示一次
icon: 'Extjs3.2.0/resources/images/default/tree/drop-add.gif',
handler: function() {
Ext.Msg.prompt('请输入新节点名称：', '', function(e, text) {
if (e == 'ok') {
if (text == null || text == '') {
Ext.Msg.alert('提示', '添加失败！节点名不能为空！');
}
else {
//执行添加
Ext.Ajax.request({
url: 'ServletHandlers/TreeHandler.ashx?type=add&parentId=' + node.id + '&text=' + text,
success: function(request) {
Ext.Msg.alert('执行结果：', '成功了！', function(e, text) {
if (e == 'ok') {
//tree.root.reload(); //数据重新加载
//tree.root.expand(true, false);
window.location.href = window.location.href;
}
});
},
failure: function() {
Ext.Msg.alert('执行结果：', '失败了！');
}
})
}
}
})
}
}, {
text: '删除节点',
//id: 'delNode',
icon: 'Extjs3.2.0/resources/images/default/tree/drop-no.gif',
handler: function() {
Ext.Msg.confirm('提示：', '确认删除？', function(btn) {
if (btn == 'yes') {
//执行删除
Ext.Ajax.request({
url: 'ServletHandlers/TreeHandler.ashx?type=del&parentId=' + node.id + '&text=' + node.attributes.text,
success: function(request) {
Ext.Msg.alert('执行结果：', '成功了！', function(e, text) {
if (e == 'ok') {
//tree.root.reload(); //数据重新加载
//tree.root.expand(true, false);
window.location.href = window.location.href;
}
});
},
failure: function() {
Ext.Msg.alert('执行结果：', '失败了！');
}
})
}
});
}
}, {
text: '修改节点',
//id: 'editNode',
icon: 'Extjs3.2.0/resources/images/default/tree/leaf.gif',
handler: function() {
Ext.Msg.prompt('请输入修改后的节点名称：', '', function(e, text) {
if (e == 'ok') {
if (text == null || text == '') {
Ext.Msg.alert('提示', '修改失败！节点名不能为空！');
}
else {
//执行修改
Ext.Ajax.request({
url: 'ServletHandlers/TreeHandler.ashx?type=edit&parentId=' + node.id + '&text=' + text,
success: function(request) {
Ext.Msg.alert('执行结果：', '成功了！', function(e, text) {
if (e == 'ok') {
//tree.root.reload(); //数据重新加载
//tree.root.expand(true, false);
window.location.href = window.location.href;
}
});
},
failure: function() {
Ext.Msg.alert('执行结果：', '失败了！');
}
})
}
}
})
}
}]
});
nodemenu.showAt(e.getPoint());
}
}
});
//单击事件
tree.on('click', function(node, e) {
e.stopEvent();
if (!node.isExpandable()) {
//提交到页面处理
Ext.MessageBox.alert('测试', node.id);
}
})
tree.expandAll();// 加载自动显示展开节点
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="div_tree">
</div>
</form>
</body>
</html>
2）GetTrees.ashx 代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Text;
using System.Configuration;
namespace ExtjsTreeDemo.ServletHandlers
{
/// <summary>
/// $codebehindclassname$ 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class GetTrees : IHttpHandler
{
private string TreeDemoConnectionString = ConfigurationManager.ConnectionStrings["TreeDemoConnectionString"].ConnectionString;
DataClassesDataContext dc = null;
public void ProcessRequest(HttpContext context)
{
dc = new DataClassesDataContext(TreeDemoConnectionString);
string str = GetParentNodeString(0);
context.Response.ContentType = "text/plain";
context.Response.Write(str);
}
/// <summary>
/// 获取父节点
/// </summary>
/// <returns></returns>
private string GetParentNodeString(int id)
{
int counter= 1;
IQueryable<TreeNodes> nodes=dc.TreeNodes.Where(u=>u.parentId==id);
StringBuilder sb = new StringBuilder();
if (nodes != null && nodes.Count() != 0)
{
sb.Append("[");
foreach (TreeNodes node in nodes)
{
sb.Append("{");
sb.Append("id:'" + node.id + "'");
sb.Append(",text:'" + node.text + "'");
sb.Append(GetSubNodeString(node.id));
sb.Append("}");
if (counter < nodes.Count())
{
sb.Append(",");
}
counter++;
}
sb.Append("]");
}
return sb.ToString();
}
/// <summary>
/// 获取子节点
/// </summary>
/// <param name="id"></param>
/// <returns></returns>
private string GetSubNodeString(int id)
{
int counter = 1;
IQueryable<TreeNodes> nodes = dc.TreeNodes.Where(u => u.parentId == id);
StringBuilder sb = new StringBuilder();
if (nodes != null & nodes.Count() != 0)
{
sb.Append(",children: [");
foreach (TreeNodes node in nodes)
{
sb.Append("{");
sb.Append("id:'" + node.id + "'");
sb.Append(",text:'" + node.text + "'");
sb.Append(GetSubNodeString(node.id));
sb.Append("}");
if (counter < nodes.Count())
{
sb.Append(",");
}
counter++;
}
sb.Append("]");
}
else
{
sb.Append(",leaf: true");
//sb.Append(",href:'http://www.baidu.com?id="+id+"'");
//sb.Append(",hrefTarget:'_blank'");
}
return sb.ToString();
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
3）TreeHandler.ashx代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Configuration;
using System.Data.Linq;
namespace ExtjsTreeDemo.ServletHandlers
{
/// <summary>
/// $codebehindclassname$ 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class TreeHandler : IHttpHandler
{
private string TreeDemoConnectionString = ConfigurationManager.ConnectionStrings["TreeDemoConnectionString"].ConnectionString;
DataClassesDataContext dc = null;
public void ProcessRequest(HttpContext context)
{
dc = new DataClassesDataContext(TreeDemoConnectionString);
string type = "";
int parentId = 0;
string text = "";
if (context.Request.QueryString["type"] != null)
{
type = context.Request.QueryString["type"].ToString();
}
if (context.Request.QueryString["parentId"] != null)
{
string strId = context.Request.QueryString["parentId"].ToString();
parentId = Convert.ToInt32(strId);
}
if (context.Request.QueryString["text"] != null)
{
text = context.Request.QueryString["text"].ToString();
}
if (type == "add")
{
TreeNodes node = new TreeNodes();
node.text = text;
node.parentId = parentId;
bool flag = AddNode(node);
}
else if (type == "del")
{
TreeNodes node = GetNode(parentId);
if (node != null)
{
bool flag = DelNode(node);
DelNodesEvent(parentId);
}
}
else
{
TreeNodes node = GetNode(parentId);
bool flag = EditNode(node, text);
}
context.Response.ContentType = "text/plain";
context.Response.Write("response");
}
/// <summary>
/// 递归删除所有的字节点
/// </summary>
/// <param name="parentId"></param>
private void DelNodesEvent(int parentId)
{
IQueryable<TreeNodes> nodes = GetNodes(parentId);
if (nodes != null && nodes.Count() != 0)
{
foreach (TreeNodes node in nodes)
{
DelNodesEvent(node.id);
}
DelNodes(nodes);
}
}
/// <summary>
/// 根据id获取节点
/// </summary>
/// <param name="id"></param>
/// <returns></returns>
private TreeNodes GetNode(int id)
{
TreeNodes node = null;
node=dc.TreeNodes.SingleOrDefault(u => u.id == id);
return node;
}
/// <summary>
/// 根据parentId删除多个节点
/// </summary>
/// <param name="parentId"></param>
/// <returns></returns>
private IQueryable<TreeNodes> GetNodes(int parentId)
{
IQueryable<TreeNodes> nodes = null;
nodes = dc.TreeNodes.Where(u => u.parentId == parentId);
return nodes;
}
/// <summary>
/// 添加节点
/// </summary>
/// <param name="node"></param>
/// <returns></returns>
private bool AddNode(TreeNodes node)
{
bool flag = false;
try
{
dc.TreeNodes.InsertOnSubmit(node);
dc.SubmitChanges();
flag = true;
}
catch (Exception ex)
{
flag = false;
}
return flag;
}
/// <summary>
/// 删除节点
/// </summary>
/// <param name="node"></param>
/// <returns></returns>
private bool DelNode(TreeNodes node)
{
bool flag = false;
try
{
dc.TreeNodes.DeleteOnSubmit(node);
dc.SubmitChanges();
}
catch (Exception ex)
{
flag = false;
}
return flag;
}
/// <summary>
/// 删除多个节点
/// </summary>
/// <param name="nodes"></param>
/// <returns></returns>
private bool DelNodes(IQueryable<TreeNodes> nodes)
{
bool flag = false;
try
{
dc.TreeNodes.DeleteAllOnSubmit(nodes);
dc.SubmitChanges();
}
catch (Exception ex)
{
flag = false;
}
return flag;
}
/// <summary>
/// 修改
/// </summary>
/// <param name="node"></param>
/// <param name="text"></param>
/// <returns></returns>
private bool EditNode(TreeNodes node, string text)
{
bool flag = false;
node.text = text;
try
{
dc.SubmitChanges();
flag = true;
}
catch (Exception ex)
{
flag = false;
}
return flag;
}
public bool IsReusable
{
get
{
return false;
}
}
}
}