如何从顶级工具栏构建 jqgrid 上下文菜单 [英] how to build jqgrid context menu from top level toolbar

问题描述

.我的代码远非完美，尤其是在 CSS 类的使用以及在 contextMenu 的 menuStyle 和 itemHoverStyle 中使用的颜色方面.尽管如此，我们确实需要代码.

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

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

createContexMenuFromNavigatorButtons的代码如下:

function createContexMenuFromNavigatorButtons(grid, pager) {var 按钮 = $('table.navtable .ui-pg-button', 寻呼机),我的绑定 = {}，menuId = 'menu_' + grid[0].id,menuDiv = $('
').attr('id', menuId).hide(),menuUl = $('<ul>');menuUl.appendTo(menuDiv);按钮.每个(函数(){var $div = $(this).children('div.ui-pg-div:first'), $spanIcon, text, $td, id, $li, gridId = grid[0].id;if ($div.length === 1) {文本 = $div.text();$td = $div.parent();如果(文本 === ''){文本 = $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);}} 别的 {//对于自定义按钮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({'字体大小': '11px','font-family': 'Verdana','margin-left': '0.5em'}).text(文本));menuUl.append($li);myBinding[id] = (function ($button) {返回函数 () { $button.click();};}($div));}});menuDiv.appendTo('body');grid.contextMenu(menuId, {绑定:myBinding，onContextMenu: 函数 (e) {var rowId = $(e.target).closest("tr.jqgrow").attr("id"), p = grid[0].p, i, lastSelId;如果(行号){i = $.inArray(rowId, p.selarrrow);if (p.selrow !== rowId && i < 0) {//防止行被取消选中//实现是针对我们使用的multiselect:false"，//但可以轻松修改multiselect:true"的代码grid.jqGrid('setSelection', rowId);} else if (p.multiselect) {//编辑将编辑第一个选定的行.//rowId 已经被选中，但不能是最后一个选中的.//我们将 rowId 与数组 p.selarrrow 的第一个元素交换lastSelId = p.selarrrow[p.selarrrow.length - 1];如果(我！== p.selarrrow.length - 1){p.selarrrow[p.selarrrow.length - 1] = rowId;p.selarrrow[i] = lastSelId;p.selrow = rowId;}}返回真；} 别的 {返回假；//没有上下文菜单}},菜单样式:{背景颜色:'#fcfdfd',边框:'1px 实心#a6c9e2'，最大宽度:'600px'，宽度:'100%'},项目悬停样式:{边框:'1px 实心#79b7e7'，颜色:'#1d5987',背景颜色:'#d0e5f5'}});}

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.

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.

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.

解决方案

My new demo demonstrate how to do this:

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.

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

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 上下文菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！