トップレベルツールバーからjqgridコンテキストメニューを作成する方法

Question

Custom values to Context Menu Items in JQgridには、jqgridにコンテキストメニューを追加するための素晴らしいサンプルが含まれています。 編集、削除、追加操作が動的に無効になっている場合、ツールバーでコンテキストメニューを同期させるには追加のコーディングが必要です。

jqgridのトップレベルツールバーからコンテキストメニューを自動的に作成して、追加のコーディングは不要ですか？コンテキストメニューにはツールバーのボタンアイコンが、ボタンのタイトルにはメニューアイテムのタイトルが表示されます。 選択メニューがツールバーボタンのクリックイベントをトリガーします。

これができない場合は、コンテキストメニュー項目をツールバーと同期させるにはどうすればよいですか？ Foxの例では、navtoolbar呼び出しにdel：falseが指定されている場合、コンテキストメニューのDeleteコマンドは表示されないか、無効になっているはずです。

Answer 1

は私の新しいdemoがこれを行う方法を示します。デモで

私はjqGridのpluginsディレクトリに含ま jquery.contextmenu.jsの small modification使用します。私のコードは、特にCSSクラスの使用や、 contextMenuの menuStyleと itemHoverStyleに使われている色を取得するのには完璧です。それにもかかわらず、コードは私たちに必要なものです。

デモの主要部分は、ナビゲータバーの後に呼び出すことができる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' 
     } 
    }); 
}