如题,我们在项目开发当中会遇到需要,表格控件增加右键菜单的使用。
下面我们就以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: 4, h: 94 }, 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 }); }, };
----------------------------------------------------------------------------------------------------------------------------------------------------
这个系列教程文档,欢迎转载:
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之--文件批量上传-统一附件管理器-在线预览文件(有互联网和没有两种)
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
作者: 王春天
QQ群:322581894 关于作者: 大连天翼信息科技有限公司 技术总监。 SNF快速开发平台 创始人。应用平台架构师、IT规划咨询专家、业务流程设计专家。 专注于快速开发平台的开发、代码生成器。同时专注于微软平台项目架构、管理和企业解决方案,多年项目开发与管理经验,精通DotNet系列技术Vue、.NetCore、MVC、Webapi、C#、WinForm等,DB(SqlServer、Oracle等)技术,移动端开发。熟悉Java、VB及PB开发语言。在面向对象、面向服务以及数据库领域有一定的造诣。现从事项目实施、开发、架构等工作。并从事用友软件产品U8、U9、PLM 客开工作。 如有问题或建议,请多多赐教! 本文版权归作者和CNBLOGS博客共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,如有问题,可以通过邮箱或QQ 联系我,非常感谢。