SNF快速开发平台MVC-EasyUI3.9之-DataGrid表格控件如何增加右键菜单

如题，我们在项目开发当中会遇到需要，表格控件增加右键菜单的使用。

下面我们就以SNF框架增加右键菜单步骤如下：

1、在加载页面当中增加如下菜单定义

<div id="mm" class="easyui-menu" style="width: 65px;">
    <div id="createLeftTable" data-options="iconCls:'icon-package'">生成左表数据(推送)</div>
    <div id="createRuleLeftTable" data-options="iconCls:'icon-package_add'">生成左表数据(规则)</div>
    <div id="createExtRuleRightTable" data-options="iconCls:'icon-package_down'">生成右表数据(扩展规则)</div>
</div>

2、增加对应的右键菜单事件

//生成左表数据(推送)
                this.createLeftTable=function(){
                    var row = self.grid.datagrid('getSelected');
                    if (!row) return snf.message('warning', self.resx.noneSelect);
                    var index = self.grid.datagrid('getRowIndex', row);
                    //数据提交
                    snf.ajax({
                        url: '/api/DEMO/DemoSingleTable/CreateLeftTable',
                        data: ko.toJSON(row),
                        success: function (d) {
                            snf.messageif(d.msgtype != '', d.msgtype, d.msg);
                        }
                    });

                }
                //生成左表数据(规则)
                this.createRuleLeftTable=function(){
                    var row = self.grid.datagrid('getSelected');
                    if (!row) return snf.message('warning', self.resx.noneSelect);
                    var index = self.grid.datagrid('getRowIndex', row);
                    //数据提交
                    snf.ajax({
                        url: '/api/DEMO/DemoSingleTable/CreateRuleLeftTable',
                        data: ko.toJSON(row),
                        success: function (d) {
                            snf.messageif(d.msgtype != '', d.msgtype, d.msg);
                        }
                    });
                }

                //生成右表数据(扩展规则)
                this.createExtRuleRightTable=function(){
                    var row = self.grid.datagrid('getSelected');
                    if (!row) return snf.message('warning', self.resx.noneSelect);
                    var index = self.grid.datagrid('getRowIndex', row);
                    //数据提交
                    snf.ajax({
                        url: '/api/DEMO/DemoSingleTable/CreateExtRuleRightTable',
                        data: ko.toJSON(row),
                        success: function (d) {
                            snf.messageif(d.msgtype != '', d.msgtype, d.msg);
                        }
                    });
                }

3、在加载完毕事件，把上面定义好的菜单和事件进行建立关联关系

 //窗体加载事件
                $(window).load(function () {
                    $('#mm').menu({
                        onClick: function (item) {
                            if(item.id == 'createLeftTable'){
                                self.createLeftTable();
                            }
                            else if(item.id == 'createRuleLeftTable'){
                                self.createRuleLeftTable();
                            }else if(item.id == 'createExtRuleRightTable'){
                                self.createExtRuleRightTable();
                            }  

                        }
                    });
                }); 

4、最后一步需要在表格控件的js代码上，增加onRowContextMenu事件挂上，右键点击时显示我们定义的菜单而不是系统默认的菜单。

 this.grid = {
                    ////size: { h: 40 },//120
                    size: { w: , h:  },
                    url: self.urls.query,
                    queryParams: ko.observable(ko.toJS(this.queryForm)),
                    pagination: true,
                    onRowContextMenu:  function (e, rowIndex, rowData) { //右键时触发事件                      
                        $(this).datagrid("clearSelections"); //取消所有选中项
                        $(this).datagrid("selectRow", rowIndex); //根据索引选中该行
                        e.preventDefault();
                        $("#mm").menu('show', {
                            left:e.pageX,
                            top:e.pageY
                        });
                    },
                };  

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

作者： 王金斗
出处： http://www.cnblogs.com/spring_wang/
Email: spring_best@yeah.net
QQ：903639067 
QQ群：322581894

这个系列教程文档，欢迎转载：

SNF快速开发平台WinForm-CS甘特图http://www.cnblogs.com/spring_wang/p/7418423.html

SNF快速开发平台MVC-审核流，审核完成后会给下一个审核人发邮件，下一个审核人可以不登录系统，在邮件里进行审核处理http://www.cnblogs.com/spring_wang/p/7418402.html

SNF快速开发平台MVC-名片管理(实际名片样式) http://www.cnblogs.com/spring_wang/p/7416540.html

SNF快速开发平台MVC-表格单元格合并组件http://www.cnblogs.com/spring_wang/p/7416368.html

SNF快速开发平台MVC-单据状态水印http://www.cnblogs.com/spring_wang/p/7416349.html

SNF快速开发平台MVC-瀑布式分页组件http://www.cnblogs.com/spring_wang/p/7411116.html

SNF快速开发平台MVC-高级查询组件http://www.cnblogs.com/spring_wang/p/7411113.html

SNF快速开发平台MVC-自由排序组件http://www.cnblogs.com/spring_wang/p/7411090.html

SNF快速开发平台MVC-各种级联绑定方式，演示样例程序（包含表单和表格控件）http://www.cnblogs.com/spring_wang/p/7405371.html

SNF快速开发平台MVC-集成了百度开源项目echarshttp://www.cnblogs.com/spring_wang/p/7405171.html

SNF快速开发平台WinForm-平板拍照及扫描二维码功能http://www.cnblogs.com/spring_wang/p/7404600.html

SNF快速开发平台WinForm规则引擎整体介绍及使用http://www.cnblogs.com/spring_wang/p/7404182.html

SNF快速开发平台WinForm-Grid表格控件大全http://www.cnblogs.com/spring_wang/p/7403881.html

SNF快速开发平台WinForm-表单验证控件-通用http://www.cnblogs.com/spring_wang/p/7403750.html

SNF.CodeGenerator-升级生成BS页面代码-支持视图-数据库配置-快速开发者的利器http://www.cnblogs.com/spring_wang/p/7402612.html

SNF快速开发平台WinForm-审核流使用方法样例http://www.cnblogs.com/spring_wang/p/7374176.html

SNF快速开发平台WinForm-EasyQuery统计分析-效果-非常牛逼的报表查询工具http://www.cnblogs.com/spring_wang/p/7366059.html

SNF快速开发平台MVC-Grid++集成打印http://www.cnblogs.com/spring_wang/p/7365567.html

SNF快速开发平台MVC-富文本控件集成了百度开源项目editorhttp://www.cnblogs.com/spring_wang/p/7365265.html

C#按回车Enter使输入焦点自动跳到下一个TextBox的方法收集http://www.cnblogs.com/spring_wang/p/7216538.html

关于系统前端开发的那些事http://www.cnblogs.com/spring_wang/p/7092721.html

WebApi和MVC-controller层接收的json字符串的取值方法和调用后台服务方法http://www.cnblogs.com/spring_wang/p/6740314.html

SNF快速开发平台--规则引擎在程序当中如何调用http://www.cnblogs.com/spring_wang/p/6740490.html

SNF快速开发平台--规则引擎介绍和使用文档http://www.cnblogs.com/spring_wang/p/6740445.html

SNF快速开发平台MVC-EasyUI3.9之-DataGrid表格控件如何增加右键菜单http://www.cnblogs.com/spring_wang/p/6740338.html

SNF快速开发平台--多组织+多平台+多系统处理方案http://www.cnblogs.com/spring_wang/p/6734654.html

SNF快速开发平台MVC-EasyUI3.9之-Session过期处理和页面请求筛选http://www.cnblogs.com/spring_wang/p/6733975.html

SNF快速开发平台MVC-EasyUI3.9之-WebApi身份验证问题解决方案http://www.cnblogs.com/spring_wang/p/6733814.html

SNF快速开发平台MVC-EasyUI3.9之-WebApi跨域处理方案http://www.cnblogs.com/spring_wang/p/6733659.html

SNF快速开发平台MVC-EasyUI3.9之-ueditor富文本编辑在 asp.net MVC下使用步骤http://www.cnblogs.com/spring_wang/p/6710351.html

SNF开发平台WinForm之十五-时间轴控件使用-http://www.cnblogs.com/spring_wang/p/6285393.html

SNF开发平台WinForm之十四-站内发送系统信息http://www.cnblogs.com/spring_wang/p/6140031.html

SNF开发平台WinForm之十三-单独从服务器上获取PDF文件进行显示http://www.cnblogs.com/spring_wang/p/6140025.html

SNF开发平台WinForm之十二-发送手机短信功能调用http://www.cnblogs.com/spring_wang/p/6139829.html

SNF开发平台WinForm之十一-程序打包http://www.cnblogs.com/spring_wang/p/6139827.html

SNF开发平台WinForm之十-Excel导入http://www.cnblogs.com/spring_wang/p/6128604.html

SNF开发平台WinForm之九-代码生成器使用说明http://www.cnblogs.com/spring_wang/p/6128595.html

SNF开发平台WinForm之八-自动升级程序部署使用说明http://www.cnblogs.com/spring_wang/p/6128570.html

SNF开发平台WinForm之七-单据打印和使用说明http://www.cnblogs.com/spring_wang/p/6126016.html

SNF开发平台WinForm之六-上传下载组件使用http://www.cnblogs.com/spring_wang/p/6125929.html

SNF开发平台WinForm之五-高级查询使用说明-http://www.cnblogs.com/spring_wang/p/6116640.html

SNF开发平台WinForm之四-开发-主细表管理页面-http://www.cnblogs.com/spring_wang/p/6116626.html

SNF开发平台WinForm之三-开发-单表选择控件创建-http://www.cnblogs.com/spring_wang/p/6116592.html

SNF开发平台WinForm之二-开发-单表表单管理页面-http://www.cnblogs.com/spring_wang/p/6116572.html

SNF开发平台WinForm之一-开发-单表表格编辑管理页面-http://www.cnblogs.com/spring_wang/p/6116523.html

Winform开发框架之通用Windows摄像头调用拍照http://www.cnblogs.com/spring_wang/p/6008674.html

Winform开发框架之图表报表在线设计器2-图表-SNF.EasyQuery项目--SNF快速开发平台3.3-Spring.Net.Framework

Winform开发框架之图表报表在线设计器-报表-SNF.EasyQuery项目--SNF快速开发平台3.3-Spring.Net.Framework

Winform开发框架之通用附件管理模块 --SNF快速开发平台3.3-Spring.Net.Framework

SNFAutoupdater通用自动升级组件V2.0-WinForm

SNF快速开发平台3.2之--.Net可扩展的单据编号生成器-SNF.CodeRule

SNF快速开发平台3.1之--审核流(3)低调奢华，简单不凡，实例演示-SNF.WorkFlow

SNF快速开发平台3.1之--审核流(2)流程设计-SNF.WorkFlow功能使用说明

SNF快速开发平台3.1之--审核流(1)SNF.WorkFlow审核流简介

SNF快速开发平台3.0之--完美的代码生成器SNF.CodeGenerator-快速开发者的利器

基于MVC4+EasyUI的Web开发框架--Spring.Net.FrameworkV3.0总体介绍

SNF快速开发平台3.0之--MVC 打印解决方案

SNF快速开发平台3.0之--文件批量上传-统一附件管理器-在线预览文件(有互联网和没有两种)

SNF快速开发平台3.0之--asp.net mvc4 强大的导出和不需要上传文件的批量导入EXCEL

SNF快速开发平台3.0之MVC通用控件库展示-Asp.net+MVC4.0+WebAPI+EasyUI+Knockout

SNF快速开发平台3.0之BS页面展示和九大优点-部分页面显示效果-Asp.net+MVC4.0+WebAPI+EasyUI +Knockout

SNF快速开发平台3.0之-界面个性化配置+10种皮肤+7种菜单-Asp.net+MVC4.0+WebAPI+EasyUI+Knockout

SNF快速开发平台3.0之-CS页面-Asp.net+Spring.Net.Framework

SNF快速开发平台3.0之--系统里广播的作用--迅速及时、简明扼要的把信息发送给接收者