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


 

 

曹振华
关注
专栏目录
Extjs实现下拉菜单效果
11-24
在提供的代码中，可以看到引用了`ext-all.css`和`bootstrap.js`，这些都是ExtJS框架的基础组成部分，确保了组件的正常渲染和功能实现。 创建下拉树的组件类 `TreeComboBox` 是基于ExtJS的`Ext.form.field.ComboBox`...
Extjs实现菜单下拉和鼠标右键菜单（加入系统菜单权限判断，有权限则显示，无反之）...
weixin_30654419的博客
04-23 181
其实实现并不难。废话不说，先看效果图： （点击“更多功能”按钮，出现下拉菜单，这样就能把一些菜单按钮放到这里，使可视页面不会很拥挤） （在当前页面的任何位置鼠标右键，弹出菜单选项） 现在看看这样通过Extjs实现： 1 <script language="javascript"> 2 var menu = new Ext.menu.Menu(); ...
ExtJS6.2开发-用户管理(二)
砌墙民工的博客
02-02 338
一、创建控制文件 1)在app目录下找到main\core\user\controller目录创建maCrUserController.js 2)maCrUserController.js文件代码如下： Ext.define('appcenter.main.core.user.controller.maCrUserController', { extend: 'Ext.app.View...
extjs初学者教程
热门推荐
09-05 1万+
layout 1.面板     (1)类结构         Ext.Base         Ext.AbstractComponent             Ext.Component                 Ext.container.AbstractContainer                     Ext.container.Container   
Extjs 动态加载子菜单
leehao_accp的博客
06-23 266
最近在做一个项目，要求从数据库中获得菜单子项动态加载到web客户端中的菜单： extjs如下： //定义grid this.grid = new FeedGrid(this, { region:"center", store:grid.php, tbar:[{ text:'级别', id:'btnLevel',...
ExtJS6.2开发-首页左菜单区域(三)
砌墙民工的博客
12-07 345
菜单区域开发 一、创建做左菜单组件 1.在在app目录下创建main\core\index\component下创建indexLeftMenu.js 2.编写基础代码如下: Ext.define('appCenter.main.core.index.component.indexLeftMenu', { extend : 'Ext.panel.Panel', alias : 'widget...
ExtJS 设置级联菜单的默认值
10-29
在具体实现上，首先需要准备两个ComboBox组件，其中一个作为一级菜单，另一个作为二级菜单。其中，二级菜单的选项内容依赖于一级菜单的选项。以下是具体的操作步骤： 1. 准备数据源。首先定义两个数据源，分别对应...
ExtJs grid行 右键菜单的两种方法
10-29
在ExtJs中，创建一个Grid并为其添加右键菜单是常见的需求...总的来说，ExtJs提供了灵活的方式来实现Grid的右键菜单功能，为用户提供更丰富的交互体验。通过以上两种方法，你可以根据项目的具体需求选择适合的实现方式。
使用ExtJs构建树形菜单功能
11-18
### 使用ExtJs构建树形菜单功能详解 #### 一、引言 在现代Web应用程序开发中，树形菜单是一项常用且重要的功能。它能够帮助用户更直观地理解数据层次关系，尤其是在展示组织架构、文件系统或者任何有层级结构的...
ExtJS6.2开发-首页左菜单添加菜单数据(四)
砌墙民工的博客
01-06 327
一、修改菜单组件 1.找到app目录下main\core\index\component\indexLeftMenu.js文件 2.修改initComponent函数，代码内容如下： initComponent : function() { this.style = ""; this.store = Ext.create('Ext.data.TreeStore', { roo...
ExtJs4 笔记（13） Ext.menu.Menu 菜单、Ext.draw.Component 绘图、Ext.resizer.Resizer 大小变更...
weixin_30270889的博客
12-26 140
《回到系列目录 本篇讲解菜单、绘图、还有大小变更控件。菜单控件可以附加到各种其他控件中，比如按钮、工具栏等，甚至可以直接通过通过右键打开（模拟右键菜单）；ext对绘图的支持可以让我们通过js来绘图；大小变更控件可以让各种html元素获取可变更大小的能力。下面我们一一详细介绍。 一、Ext.menu.Menu 菜单 1.菜单的定义 下面我们来定义一个菜单，它包括一个下拉列表，还有颜色选择...
Ext Tree 添加右键菜单
JustCoding_的专栏
09-19 2700
首先，我们需要建立一棵树 var leftTree = new Ext.tree.TreePanel({ contentEl : 'tree_panel', region : 'west', id : 'leftTree', collapsible : true, width : 200, Height : 500, autoScroll : true,
Extjs实现右键菜单
name_liv的专栏
09-11 3758
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 右键菜单
weixin_30312557的博客
10-25 77
js: //右键菜单 grid.addListener('rowcontextmenu', rightClickFn);//右键菜单代码关键部分 var rightClick = new Ext.menu.Menu({ id:'rightClickCont', items: [ { //id: 'rMe...
Extjs右键菜單
x1043556915的博客
09-26 181
Extjs右键菜單
Extjs给控件添加右键菜单
huoyunshen的专栏
07-28 757
//以 grid 为例 Ext.onReady(function(){ Vargrid = new Ext.grid.GridPanel({ Title:’表格实例’, renderTo:Ext.getBody(), //定义导入数据源到表格 Store:store, ...
ExtJS4 tree右键菜单
祥子的博客
08-12 1809
效果图： 源码： init : function() { var me = this; this.control({ 'cxbGrid button' : { click : me.doAction }, 'tree button':{ click:me.doAdd }, 'tree':{ itemcontextmenu:me.doEdit } }); },
Extjs 4.0.7 gridPanel记录添加右键菜单事件
liyong20080101的专栏
09-24 3018
// GridPanel注册 grid.addListener('itemcontextmenu', itemcontextmenu); /** * 分类代码grid右键菜单 */ function itemcontextmenu(his, record, item, index, e) { // itemcontextmenu( Ext.view.View this, Ext.
EXTJS实现GridPanel右键菜单功能
"这篇资源主要介绍了如何在Ext.grid.GridPanel中实现右键菜单功能，适用于EXT 4.0及以上版本。通过提供一个名为`Ext.ux.grid.RightMenu`的自定义扩展，用户可以轻松地为表格添加具有自定义事件处理程序的右键菜单。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值