jqgrid - 如何将切换按钮从 jqgrid 工具栏添加到自动生成的上下文菜单

Question

jqgrid 顶部工具栏中的切换按钮使用 Oleg answer 定义为

var autoedit;
$("#grid_toppager_left table.navtable tbody tr").append(
    '<td class="ui-pg-button ui-corner-all" >' +
        '<div class="ui-pg-div my-nav-checkbox">' +
        '<input tabindex="-1" type="checkbox" id="AutoEdit" '+(autoedit ? 'checked ' : '')+'/>' +
        '<label title="Toggle autoedit" for="AutoEdit">this text is ignored in toolbar</label></div></td>'
);
$("#AutoEdit").button({
    text: false,
    icons: {primary: "ui-icon-star"}
}).click(function () {
    autoedit = $(this).is(':checked');
});

来自 how to add standard textbox command to jqgrid context menu 的回答用于从工具栏自动生成网格的上下文菜单。

在为此项目生成的上下文菜单中，仅出现文本“此文本在工具栏中被忽略”并且选择它不会执行任何操作。

如何让它工作或从上下文菜单中删除此项？

Answer 1

看the demo或具有其他主题的相同演示:this和 this .

首先，我修改了 jquery.contextmenu.js 的代码以支持 jQuery UI 主题。然后我修改了更多代码，以便能够更动态地创建上下文菜单。在 jquery.contextmenu.js 的修改版本中，不仅可以在 onContextMenu 中创建菜单和绑定(bind)，还可以在 onShowMenu 中创建菜单和绑定(bind)。在 onContextMenu 内部，可以只创建空菜单

<div id="myMenu"><ul></ul></div>

仅当使用动态切换导航栏中按钮文本的图标时才重要。

您可以下载文件的修改版本here .

在演示中，我使用了来自 the answer 的代码的最后修改。 , 因此标准的上下文菜单仍然可以在选定文本的网格中或在启用的输入/文本区域字段中使用。在这种情况下会显示浏览器的上下文菜单:

我从 the answer 修改了 createContexMenuFromNavigatorButtons 函数的代码到以下内容:

var getSelectedText = function () {
        var text = '';
        if (window.getSelection) {
            text = window.getSelection();
        } else if (document.getSelection) {
            text = document.getSelection();
        } else if (document.selection) {
            text = document.selection.createRange().text;
        }
        return typeof (text) === 'string' ? text : text.toString();
    },
    createContexMenuFromNavigatorButtons = function (grid, pager) {
        var menuId = 'menu_' + grid[0].id, menuUl = $('<ul>'),
            menuDiv = $('<div>').attr('id', menuId);

        menuUl.appendTo(menuDiv);
        menuDiv.appendTo('body');

        grid.contextMenu(menuId, {
            bindings: {}, // the bindings will be created in the onShowMenu
            onContextMenu: function (e) {
                var p = grid[0].p, i, lastSelId, $target = $(e.target),
                    rowId = $target.closest("tr.jqgrow").attr("id"),
                    isInput = $target.is(':text:enabled') ||
                    $target.is('input[type=textarea]:enabled') ||
                    $target.is('textarea:enabled');
                if (rowId && !isInput && getSelectedText() === '') {
                    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
                }
            },
            onShowMenu: function (e, $menu) {
                var options = this, $menuUl = $menu.find('ul:first').empty();

                $('table.navtable .ui-pg-button', pager).each(function () {
                    var $spanIcon, text, $td, id, $li, $a, button,
                        $div = $(this).children('div.ui-pg-div:first'),
                        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');
                        if ($spanIcon.length > 0) {
                            // standard navGrid button or button added by navButtonAdd
                            $li.append($('<a>')
                                .text(text)
                                .prepend($spanIcon.clone().css({
                                    float: 'left',
                                    marginRight: '0.5em'
                                })));
                            $menuUl.append($li);
                            options.bindings[id] = (function ($button) {
                                return function () { $button.click(); };
                            }($div));
                        } else {
                            button = $div.children("input").data("button");
                            if (button !== undefined) {
                                $a = $('<a>')
                                    .text(button.options.label)
                                    .prepend(
                                        $('<label>').addClass("ui-corner-all").css({
                                            float: 'left',
                                            width: '16px',
                                            borderWidth: '0px',
                                            marginRight: '0.5em'//'4px'
                                        }).append(
                                            $('<span>').addClass("ui-button-icon-primary ui-icon " +
                                                button.options.icons.primary)
                                                .css({
                                                    float: 'left',
                                                    marginRight: '0.5em'
                                                })
                                        )
                                    );
                                $li.append($a);
                                if (button.type === "checkbox" && button.element.is(':checked')) {
                                    $a.find('label:first').addClass("ui-state-active");
                                }
                                $menuUl.append($li);
                                options.bindings[id] = (function ($button, isCheckbox) {
                                    if (isCheckbox) {
                                        return function () {
                                            if ($button.is(':checked')) {
                                                $button.siblings('label').removeClass("ui-state-active");
                                            } else {
                                                $button.siblings('label').addClass("ui-state-active");
                                            }
                                            $button.click();
                                            $button.button("refresh"); // needed for IE7-IE8
                                    };
                                    } else {
                                        return function () { $button.click(); };
                                    }
                                }(button.element, button.type === "checkbox"));
                            }
                        }
                    }
                });
                return $menu;
            }
        });
    },
    autoedit = false;

并用代码填充导航栏中的检查按钮，代码只做了一点改动:

$("#pager_left table.navtable tbody tr").append(
    '<td class="ui-pg-button ui-corner-all">' +
        '<div class="ui-pg-div my-nav-checkbox">' +
        '<input tabindex="-1" type="checkbox" id="AutoEdit" />' +
        '<label title="Checkx caption which should appear as button tooltip"' +
        ' for="AutoEdit">Autoedit</label></div></td>'
);
$("#AutoEdit").button({
    text: false,
    icons: {primary: "ui-icon-mail-closed"}
}).click(function () {
    var iconClass, $this = $(this);
    if (!autoedit) { // $this.is(':checked')) {
        autoedit = true;
        iconClass = "ui-icon-mail-open";
    } else {
        autoedit = false;
        iconClass = "ui-icon-mail-closed";
    }
    $this.button("option", {icons: {primary: iconClass}});
});
createContexMenuFromNavigatorButtons($grid, '#pager');

已更新:又一个演示支持新添加的按钮 inlineNav方法你可以找到here .此外，我在演示中包含了函数 normalizePagers，我用它来改善寻呼机的外观:

如何查看上下文菜单仅包含导航栏中启用的按钮。