`
谷赛玉
  • 浏览: 19206 次
文章分类
社区版块
存档分类
最新评论

实现jqGrid右键菜单contextMenu

阅读更多
方法1、该版本是完整的例子,但我使用的是最新版本的jqGrid(jqGrid-4.5.4)和jQuery(1.9.1),按照他的做法没成功,估计版本问题。http://diqigan.iteye.com/blog/920904

方法2、我使用成功的示例:
show:


jsp代码:
There are many context menu plugins. One from there you will find in the plugins subdirectory of the jqGrid source.
To use it you can for example define your context menu with for example the following HTML markup:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/sunny/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="plug/jqgrid/themes/css/ui.jqgrid.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="plug/jqgrid/js/jquery.contextmenu.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="plug/jqgrid/js/i18n/grid.locale-cn.js" type="text/javascript"></script>
<script src="plug/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>

<div class="contextMenu" id="myMenu1" style="display:none">
    <ul style="width: 200px">
        <li id="add">
            <span class="ui-icon ui-icon-plus" style="float:left"></span>
            <span style="font-size:11px; font-family:Verdana">Add Row</span>
        </li>
        <li id="edit">
            <span class="ui-icon ui-icon-pencil" style="float:left"></span>
            <span style="font-size:11px; font-family:Verdana">Edit Row</span>
        </li>
        <li id="del">
            <span class="ui-icon ui-icon-trash" style="float:left"></span>
            <span style="font-size:11px; font-family:Verdana">Delete Row</span>
        </li>
    </ul>
</div>
You can bind the context menu to the grid rows inside of loadComplete (after the rows are placed in the <table>):
js代码:
loadComplete: function() {
    $("tr.jqgrow", this).contextMenu('myMenu1', {
        bindings: {
            'edit': function(trigger) {
                // trigger is the DOM element ("tr.jqgrow") which are triggered
                grid.editGridRow(trigger.id, editSettings);
            },
            'add': function(/*trigger*/) {
                grid.editGridRow("new", addSettings);
            },
            'del': function(trigger) {
                if ($('#del').hasClass('ui-state-disabled') === false) {
                    // disabled item can do be choosed
                    grid.delGridRow(trigger.id, delSettings);
                }
            }
        },
        onContextMenu: function(event/*, menu*/) {
            var rowId = $(event.target).closest("tr.jqgrow").attr("id");
            //grid.setSelection(rowId);
            // disable menu for rows with even rowids
            $('#del').attr("disabled",Number(rowId)%2 === 0);
            if (Number(rowId)%2 === 0) {
                $('#del').attr("disabled","disabled").addClass('ui-state-disabled');
            } else {
                $('#del').removeAttr("disabled").removeClass('ui-state-disabled');
            }
            return true;
        }
    });
}
地址:http://www.ok-soft-gmbh.com/jqGrid/LocalFormEditingWithContextmenu3.htm
http://stackoverflow.com/questions/6607576/how-to-create-jqgrid-context-menu
  • 大小: 89.6 KB
分享到:
评论

相关推荐

    jQuery右键菜单contextMenu使用实例

    《jQuery右键菜单contextMenu使用实例详解》 在网页交互设计中,右键菜单是一种常见的功能,用于提供快捷的操作选项。jQuery的contextMenu插件为我们提供了实现这一功能的强大工具。本文将详细介绍如何利用jQuery和...

    jquery 右键菜单功能

    总结来说,jQuery实现右键菜单功能是通过捕获`contextmenu`事件,阻止默认行为,动态创建和显示菜单,并处理点击事件来执行相应操作。结合`jqGrid`插件,可以进一步增强表格数据的交互性,提供更丰富的用户界面。在...

    jQuery-contextMenu-master.

    jQuery-contextMenu是一个基于jQuery的插件,用于创建可自定义的右键上下文菜单。这个插件提供了丰富的功能,使得开发者能够轻松地为网页元素添加交互式的右键操作选项,而无需深入研究复杂的原生JavaScript事件处理...

    基于jqgrid实现树形菜单分页列表查询

    "基于jqgrid实现树形菜单分页列表查询"这一主题,旨在创建一个既能展示层级结构又能进行高效分页查询的表格组件。jqGrid是一款强大的jQuery插件,它提供了丰富的功能,如数据网格、分页、排序、过滤、编辑等,同时...

    实现jqGrid三级表头功能,支持冻结,拖动

    在这个项目中,我们将探讨如何实现jqGrid的三级表头功能,并且支持冻结列以及拖动列的功能。 首先,让我们了解什么是三级表头。在标准的表格中,我们通常有单一或双层的表头,而在三级表头中,列标题被分为了三个...

    jqgrid-contextmenu-show-hide-columns:jQGrid 具有显示隐藏列功能(上下文菜单)

    jqgrid-contextmenu-show-hide-columns jQGrid 具有显示/隐藏列功能(上下文菜单) 此存储库是讨论在 jqGrid 中添加显示/隐藏列功能的最佳方法的草案。 在列中添加可见性属性 右键单击标题以显示带有列复选框列表...

    JQuery Mobile 中实现 jqGrid 数据分组

    在本文中,我们将深入探讨如何在JQuery Mobile中实现jqGrid数据分组,这是一个非常实用的功能,可以帮助用户更有效地组织和展示大量数据。首先,我们需要理解JQuery Mobile和jqGrid的基本概念。 JQuery Mobile是一...

    table表格样式利用jqgrid实现

    本教程将深入探讨如何利用jqGrid来实现美观且功能丰富的表格样式。 首先,我们需要了解jqGrid的基本概念。jqGrid是由Trirand公司开发的,基于jQuery的开源项目,它提供了数据网格的功能,支持数据分页、排序、过滤...

    jqgrid 表格的增删改查以及modal弹出框

    在这个项目文件“RuanTai.Finance”中,我们将深入探讨如何使用 jqGrid 实现这些功能,并且在修改和添加操作时使用 modal 弹出框来增强用户体验。 首先,让我们看看 jqGrid 的增删改查功能: **增加(Add)**:在 ...

    jqgrid实现分组显示和统计

    在本教程中,我们将深入探讨如何利用jqGrid实现数据的分组显示和统计,这对于数据分析和报告呈现来说尤其重要。 一、分组显示 1. 初始化jqGrid 首先,我们需要在HTML中创建一个表格元素,并通过jQuery初始化jqGrid...

    jqgrid中文文档API

    jQgrid使用ajax来实现对请求与响应的处理。 皮肤 从3.5版本开始,jQgrid完全支持jquery UI的theme。我们可以从http://jqueryui.com/themeroller/下载我们所需要的theme。当然,你也可以编辑自己的theme。jQgrid也...

    利用jqGrid实现类似Excel录入功能

    这篇文章将深入探讨如何利用jqGrid来实现类似Excel的录入功能,让用户能够在Web界面中进行高效的数据操作。 首先,我们需要了解jqGrid的基本结构。jqGrid是一个基于jQuery的插件,它通过HTML表格元素来呈现数据。你...

    JqGrid插件+JqGridDemo+JqGrid主题

    6. 扩展性:JqGrid拥有丰富的API和事件,允许开发者扩展其功能,例如自定义按钮、添加验证规则、实现复杂的业务逻辑等。 在"JqGridDemo"中,通常会包含一些示例代码和预览,帮助开发者了解如何配置和使用JqGrid。...

    jqGrid表头锁列及排序功能细节

    在本文中,我们将深入探讨jqGrid中的表头锁列和排序功能的实现细节。 一、jqGrid 添加列的大标题 jqGrid 提供了设置列组标题的功能,允许为多列设置一个共同的标题头部,提升表格的可读性。实现这一功能的代码如下...

    jqGrid4.6完整包

    - `js`:JavaScript 库文件,这里存放了 jqGrid 的主要 JavaScript 实现,包括主文件(如 `grid.base.js`, `grid.common.js` 等)和其他辅助脚本。 - `plugins`:插件目录,jqGrid 提供许多扩展功能,如排序、筛选...

    PHP+jqGrid表格插件实现增删改查

    要实现“PHP+jqGrid表格插件实现增删改查”,首先需要在HTML页面中引入jqGrid的CSS和JS文件,然后创建一个表格元素,定义相应的列名和ID。接着,使用jQuery初始化jqGrid,设置数据源(通常是PHP脚本返回的JSON或XML...

    jqgriddemo,样式漂亮,可以直接使用

    5. **扩展性**:jqGrid拥有丰富的插件和扩展,可以实现更多高级功能,如树形视图、拖放排序、列固定、列菜单等。 6. **多语言支持**:jqGrid内置多种语言,方便国际化应用。 7. **响应式设计**:随着移动设备的...

    JQGrid 分页

    在这个特定的"JQGrid分页"项目中,我们关注的是如何实现数据的分页功能,这在处理大量数据时尤为重要,因为它能提高网页的加载速度和用户体验。 首先,我们需要理解JQGrid分页的基本概念。在JQGrid中,分页通常分为...

Global site tag (gtag.js) - Google Analytics