как построить контекстное меню jqgrid из панели инструментов верхнего уровня - PullRequest
Новая
       25

как построить контекстное меню jqgrid из панели инструментов верхнего уровня

1 голос
/ 10 декабря 2011

Пользовательские значения для элементов контекстного меню в JQgrid содержит большой пример добавления контекстного меню в jqgrid. Если операции редактирования, удаления, добавления отключаются динамически, синхронизация контекстного меню с панелью инструментов требует дополнительного кодирования.

Как автоматически создать контекстное меню из панели инструментов верхнего уровня jqgrid, чтобы дополнительное кодирование не требовалось? Контекстное меню должно содержать значки кнопок панели инструментов, а заголовки кнопок становятся заголовками пунктов меню. Меню выбора запускает событие нажатия кнопки панели инструментов.

Или, если это невозможно, как синхронизировать элементы контекстного меню с панелью инструментов? Пример Fox, если вызов navtoolbar имеет del: false, команда Delete в контекстном меню не должна появляться или отображаться отключенной.

1 Ответ

1 голос
/ 11 декабря 2011

Моя новая демонстрация демонстрирует, как это сделать:

enter image description here

В демоверсии я использую небольшую модификацию из jquery.contextmenu.js включен в каталог плагинов jqGrid.Мой код далеко не идеален, особенно в использовании классов CSS и получении цветов, используемых в menuStyle и itemHoverStyle из contextMenu.Тем не менее, код нужен нам.

Основная часть демонстрации состоит из функции createContexMenuFromNavigatorButtons, которая может быть вызвана после построения панели навигации (после navGrid и navButtonAdd).Использование очень просто: 

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

Код createContexMenuFromNavigatorButtons вы найдете ниже: 

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