如何创建jqGrid上下文菜单? [英] How to create jqGrid Context Menu?

问题描述

我正在尝试在jqGrid上为每行创建一个上下文菜单，但找不到方法.我目前正在使用jQuery Context Menu(是否有更好的方法?)，但这是针对整个Grid的不适用于特定的行，即无法对其执行行级操作.请帮助我，谢谢.

I am trying to create a context menu on jqGrid (for each row) but can't find how to do so.I am currently using jQuery Context Menu (is there a better way? )but it is for the entire Grid not for a particular row i.e. cannot perform row level operations for it. Please help me in this, thanks.

$(document).ready(function(){ 
  $("#list1").jqGrid({
    sortable: true,
    datatype: "local", 
    height: 250, 
    colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'], 
    colModel:[ 
        {name:'id',index:'id', width:60, sorttype:"int"}, 
        {name:'invdate',index:'invdate', width:90, sorttype:"date"}, 
        {name:'name',index:'name', width:100}, 
        {name:'amount',index:'amount', width:80, align:"right",sorttype:"float"}, 
        {name:'tax',index:'tax', width:80, align:"right",sorttype:"float"}, 
        {name:'total',index:'total', width:80,align:"right",sorttype:"float"}, 
        {name:'note',index:'note', width:50, sortable:false} 
        ], 
    multiselect: true,
    rowNum:10, 
    rowList:[10,20,30], 
    pager: '#pager1', 
    sortname: 'id', 
    recordpos: 'left', 
    viewrecords: true, 
    sortorder: "desc",
    caption: "Manipulating Array Data"
  });
  $("#list1").jqGrid('navGrid','#pager1',{add:false,del:false,edit:false,position:'right'});

  $("#list1").contextMenu({
        menu: "myMenu"
    },
        function(action, el, pos) {
        alert(
            "Action: " + action + "\n\n" +
            "Element ID: " + $(el).attr("id") + "\n\n" +
            "X: " + pos.x + "  Y: " + pos.y + " (relative to element)\n\n" +
            "X: " + pos.docX + "  Y: " + pos.docY+ " (relative to document)"
            );
    });

推荐答案

有很多上下文菜单插件.您可以在jqGrid源文件的plugins子目录中找到一个.

There are many context menu plugins. One from there you will find in the plugins subdirectory of the jqGrid source.

要使用它，例如，可以使用以下HTML标记定义上下文菜单:

To use it you can for example define your context menu with for example the following HTML markup:

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

您可以将上下文菜单绑定到loadComplete内部的网格行(将行放置在<table>中之后):

You can bind the context menu to the grid rows inside of loadComplete (after the rows are placed in the <table>):

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

在该示例中，我对所有具有偶数rowid的行禁用了"Del"菜单项.禁用的菜单项会转发项目选择，因此需要控制是否在bindings内再次禁用该项目.

In the example I disabled "Del" menu item for all rows having even rowid. The disabled menu items forward the item selection, so one needs to control whether the item disabled one more time inside of bindings.

我在$("tr.jqgrow", this).contextMenu('myMenu1', {...});上面使用过将同一菜单绑定到所有网格行.您当然可以将不同的行绑定到不同的菜单:$("tr.jqgrow:even", this).contextMenu('myMenu1', {...}); $("tr.jqgrow:odd", this).contextMenu('myMenu2', {...});

I used above $("tr.jqgrow", this).contextMenu('myMenu1', {...}); to bind the same menu to all grid rows. You can of course bind different rows to the different menus: $("tr.jqgrow:even", this).contextMenu('myMenu1', {...}); $("tr.jqgrow:odd", this).contextMenu('myMenu2', {...});

我没有仔细阅读contextMenu的代码，可能上面的示例不是最好的示例，但是它工作得很好.您可以在此处看到相应的演示.该演示还具有许多其他功能，但是您只能在loadComplete事件处理程序中查看外观.

I didn't read the code of contextMenu careful and probably the above example is not the best one, but it works very good. You can see the corresponding demo here. The demo has many other features, but you should take the look only in the loadComplete event handler.

这篇关于如何创建jqGrid上下文菜单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！