extjs 实现右击菜单功能

最新推荐文章于 2022-09-26 14:04:43 发布
最新推荐文章于 2022-09-26 14:04:43 发布
阅读量1.4k 收藏
点赞数
分类专栏： javascript 文章标签： extjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chadcao/article/details/6280103
版权

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;
            }
        }
    }
}


 

 

曹振华
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
extjs实现动态树加载菜单
10-12
extjs实现动态树加载菜单
Extjs4开发笔记(三)——菜单的实现
nuoyan666的专栏
08-02 2696
上篇文章介绍了搭建一个空的框架（链接地址：www.mhzg.net/a/20116/201162913210280.html），使得管理系统有了大致的模样，今天工作的主要内容就是菜单的实现以及点击菜单后在右边内容区打开一个新的Panel。本篇文章的内容主要包括两个方面，Extjs
Extjs4快速上手四——实现菜单
weixin_30388677的博客
04-16 71
　　这几天状态不佳，杂事太多有些烦心，这一次就少讲点吧。 　　本次将主要讲Extjs树形菜单的实现。在很多系统里边，树形菜单被广泛应用，主要因为其有清晰的层次结构。记得最早见到的树形菜单是通过<ul><li>实现的，非常简单。之后用C#的现成控件拖拽了一个，当时还沾沾自喜。再后来在学习师兄的一个通用后台代码时，看到了梅花雪，当时感觉太强大了，每个节点都可以存在数据库，并且...
Extjs右键菜單
最新发布
x1043556915的博客
09-26 167
Extjs右键菜單
Extjs实现右键菜单
name_liv的专栏
09-11 3726
var sellAction = Ext.create('Ext.Action', { icon : '../shared/icons/fam/delete.gif', // Use a URL in the icon config text: 'Sell stock', disabled: true, handler: fun
Extjs实现下拉菜单效果
11-24
在提供的代码中，可以看到引用了`ext-all.css`和`bootstrap.js`，这些都是ExtJS框架的基础组成部分，确保了组件的正常渲染和功能实现。 创建下拉树的组件类 `TreeComboBox` 是基于ExtJS的`Ext.form.field.ComboBox`...
ExtJS 设置级联菜单的默认值
10-29
在具体实现上，首先需要准备两个ComboBox组件，其中一个作为一级菜单，另一个作为二级菜单。其中，二级菜单的选项内容依赖于一级菜单的选项。以下是具体的操作步骤： 1. 准备数据源。首先定义两个数据源，分别对应...
ExtJs grid行 右键菜单的两种方法
10-29
在ExtJs中，创建一个Grid并为其添加右键菜单是常见的需求...总的来说，ExtJs提供了灵活的方式来实现Grid的右键菜单功能，为用户提供更丰富的交互体验。通过以上两种方法，你可以根据项目的具体需求选择适合的实现方式。
使用ExtJs构建树形菜单功能
11-18
### 使用ExtJs构建树形菜单功能详解 #### 一、引言 在现代Web应用程序开发中，树形菜单是一项常用且重要的功能。它能够帮助用户更直观地理解数据层次关系，尤其是在展示组织架构、文件系统或者任何有层级结构的...
extjs右键功能
gt2008gt的博客
07-20 200
大致代码如下 initListener : function(){ /*this.addListener("render",function(){ this.loadMask=new Ext.LoadMask(Ext.getBody(),{msg:'正在载入数据,请稍候...'}); this.loadMask.show(); ...
Extjs5 Tab标签右键单击菜单
yelong0201的专栏
02-10 997
Extjs5 Tab标签右键单击菜单在使用Extjs的tabclosemenu时，发现需要双击右键才能弹出标签操作菜单，不符合我们的使用习惯，但是又没有找到相关的配置来实现单击右键显示菜单，我的解决办法是重写tabclosemenu的onAfterLayout方法，添加鼠标单击监听事件，在右键单击时调用tabclosemenu中的onContextMenu方法： 代码:{ ptype
extjs 右键菜单
weixin_30312557的博客
10-25 65
js: //右键菜单 grid.addListener('rowcontextmenu', rightClickFn);//右键菜单代码关键部分 var rightClick = new Ext.menu.Menu({ id:'rightClickCont', items: [ { //id: 'rMe...
extjs登陆界面和菜单树的实现
晴丶空
06-20 676
未经博主允许，不得转载 上一篇URL：https://blog.csdn.net/gbp_Anl/article/details/80751437 本人登陆界面是在jquery插件库（http://www.jq22.com/）该网站上下载的（花钱的）并做了简易的修改而成， 界面展示如下： 用户名和密码的校验都是通过extjs提供的Ext.Ajax.request实现的， 具体代码如下...
ExtJS右击菜单事件
内事问度娘，外事问谷歌！
04-26 244
Extjs右击事件 写道 rowcontextmenu:function(grid,rowIndex,e){//右键菜单 e.preventDefault();document.title=(rowIndex) //这里的index是每次点击的行 if(menu==null){//为了节省资源，只创建一次 menu=new Ext.menu.Menu({ items:[{ tex...
EXT 右键菜单
泉水依然
12-01 441
/*****************右键按钮定义*********************/         var treeRightMenu = new Ext.menu.Menu({         id: 'theContextMenu',         items:[{                 id:'policy_apply',                 text:'策...
Extjs实现菜单下拉和鼠标右键菜单（加入系统菜单权限判断，有权限则显示，无反之）...
weixin_30654419的博客
04-23 168
其实实现并不难。废话不说，先看效果图： （点击“更多功能”按钮，出现下拉菜单，这样就能把一些菜单按钮放到这里，使可视页面不会很拥挤） （在当前页面的任何位置鼠标右键，弹出菜单选项） 现在看看这样通过Extjs实现： 1 <script language="javascript"> 2 var menu = new Ext.menu.Menu(); ...
Extjs给控件添加右键菜单
huoyunshen的专栏
07-28 730
//以 grid 为例 Ext.onReady(function(){ Vargrid = new Ext.grid.GridPanel({ Title:’表格实例’, renderTo:Ext.getBody(), //定义导入数据源到表格 Store:store, ...
Extjs结合后台数据库动态生成多层菜单树
热门推荐
隋旭峰的专栏
01-31 1万+
JS/Main.js//----------------------------------------------左边var root=new Ext.tree.AsyncTreeNode({        id:'0',        text:"####管理系统",
EXTJS GridPanel 右键复制当前选中单元格
Lue
05-29 9067
EXTJS中复制Grid中当前单元格的内容是一个比较常见的需求，最常见的解决方法就是添加新的css样式，具体可以参考：http://blog.csdn.net/dy_paradise/article/details/5212389         其实呢不用这么麻烦的，EXTJS API其实提供了相应的事件让开发者可以通过添加监听事件来到达选中当前单元格并取得当前单元格的内容。下面以右击为例(左
ExtJS 实现动态高级查询功能
"这篇文章主要介绍了如何在ExtJS框架下实现通用查询功能，支持多种数据类型的查询条件，并且可以通过Ext.data.JsonStore与服务器进行方便的数据交互。" 在ExtJS开发中，构建一个通用查询功能是非常常见且重要的任务...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值