如何从顶层工具栏构建jqgrid上下文菜单

问题描述

JQgrid中上下文菜单项的自定义值包含关于将上下文菜单添加到jqgrid的绝佳示例.如果动态禁用编辑，删除，添加操作，则与工具栏同步上下文菜单需要附加编码.

Custom values to Context Menu Items in JQgrid contains great sample about adding context menu to jqgrid.If edit,delete, add operations are dynamically disabled, synching context menu with toolbar requires additional coding.

如何从jqgrid顶层工具栏自动创建上下文菜单，从而不需要其他编码?上下文菜单应包含工具栏按钮图标，并且按钮标题成为菜单项标题.选择菜单会触发工具栏按钮单击事件.

How to create context menu automatically from jqgrid top level toolbar so that additional coding is not required? Context menu should contain toolbar buttons icons and button titles become menu item titles.Selection menu triggers toolbar button click event.

或者，如果不可能，如何将上下文菜单项与工具栏同步? Fox的例子，如果navtoolbar调用具有del:false，则上下文菜单中的Delete命令不应出现或显示为禁用.

Or if this is not possible, how to sync context menu items with toolbar? Fox example, if navtoolbar call has del:false , Delete command in context menu should not appear or appear disabled.

推荐答案

我的新 demo 演示如何执行此操作:

My new demo demonstrate how to do this:

在演示中，我使用 jqGrid的插件目录中包含的jquery.contextmenu.js的小修改.我的代码远非完美无缺，尤其是在CSS类的使用以及在contextMenu的menuStyle和itemHoverStyle中使用颜色的情况下.尽管如此，代码确实希望我们需要.

In the demo I use small modification of the jquery.contextmenu.js included in the plugins directory of jqGrid. My code is far to be perfect especially in usage of CSS classes and getting colors used in menuStyle and itemHoverStyle of the contextMenu. Nevertheless the code do want we need.

该演示的主要部分由createContexMenuFromNavigatorButtons函数组成，可以在构建导航栏之后(在navGrid和navButtonAdd之后)调用该函数.用法很简单:

The main part of the demo consist from createContexMenuFromNavigatorButtons function which can be called after the navigator bar are build (after navGrid and navButtonAdd). The usage is very simple:

createContexMenuFromNavigatorButtons($("#list"), '#pager');

createContexMenuFromNavigatorButtons的代码，您将在下面找到:

The code of createContexMenuFromNavigatorButtons you will find below:

function createContexMenuFromNavigatorButtons(grid, pager) {
    var buttons = $('table.navtable .ui-pg-button', pager),
        myBinding = {},
        menuId = 'menu_' + grid[0].id,
        menuDiv = $('<div>').attr('id', menuId).hide(),
        menuUl = $('<ul>');

    menuUl.appendTo(menuDiv);
    buttons.each(function () {
        var $div = $(this).children('div.ui-pg-div:first'), $spanIcon, text, $td, id, $li, gridId = grid[0].id;

        if ($div.length === 1) {
            text = $div.text();
            $td = $div.parent();
            if (text === '') {
                text = $td.attr('title');
            }
            if (this.id !== '' && text !== '') {
                id = 'menuitem_' + this.id;
                if (id.length > gridId.length + 2) {
                    id = id.substr(0, id.length - gridId.length - 1);
                }
            } else {
                // for custom buttons
                id = $.jgrid.randId();
            }
            $li = $('<li>').attr('id', id);
            $spanIcon = $div.children('span.ui-icon');
            $li.append($spanIcon.clone().css("float", "left"));
            $li.append($('<span>').css({
                'font-size': '11px',
                'font-family': 'Verdana',
                'margin-left': '0.5em'
            }).text(text));
            menuUl.append($li);
            myBinding[id] = (function ($button) {
                return function () { $button.click(); };
            }($div));
        }
    });
    menuDiv.appendTo('body');
    grid.contextMenu(menuId, {
        bindings: myBinding,
        onContextMenu: function (e) {
            var rowId = $(e.target).closest("tr.jqgrow").attr("id"), p = grid[0].p, i, lastSelId;
            if (rowId) {
                i = $.inArray(rowId, p.selarrrow);
                if (p.selrow !== rowId && i < 0) {
                    // prevent the row from be unselected
                    // the implementation is for "multiselect:false" which we use,
                    // but one can easy modify the code for "multiselect:true"
                    grid.jqGrid('setSelection', rowId);
                } else if (p.multiselect) {
                    // Edit will edit FIRST selected row.
                    // rowId is allready selected, but can be not the last selected.
                    // Se we swap rowId with the first element of the array p.selarrrow
                    lastSelId = p.selarrrow[p.selarrrow.length - 1];
                    if (i !== p.selarrrow.length - 1) {
                        p.selarrrow[p.selarrrow.length - 1] = rowId;
                        p.selarrrow[i] = lastSelId;
                        p.selrow = rowId;
                    }
                }
                return true;
            } else {
                return false; // no contex menu
            }
        },
        menuStyle: {
            backgroundColor: '#fcfdfd',
            border: '1px solid #a6c9e2',
            maxWidth: '600px',
            width: '100%'
        },
        itemHoverStyle: {
            border: '1px solid #79b7e7',
            color: '#1d5987',
            backgroundColor: '#d0e5f5'
        }
    });
}

这篇关于如何从顶层工具栏构建jqgrid上下文菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！