최상위 툴바에서 jqgrid 컨텍스트 메뉴를 작성하는 방법

Question

Custom values to Context Menu Items in JQgrid에는 jqgrid에 상황에 맞는 메뉴를 추가하는 방법에 대한 훌륭한 예제가 들어 있습니다. 편집, 삭제, 추가 작업이 동적으로 비활성화 된 경우 툴바가있는 상황에 맞는 메뉴를 동기화하려면 추가 코딩이 필요합니다.

추가 코딩이 필요하지 않도록 jqgrid 최상위 툴바에서 자동으로 컨텍스트 메뉴를 만드는 방법은 무엇입니까? 컨텍스트 메뉴에는 툴바 버튼 아이콘이 있어야하며 버튼 제목은 메뉴 항목 제목이됩니다. 선택 메뉴가 툴바 버튼 클릭 이벤트를 트리거합니다.

아니면 가능하지 않은 경우 컨텍스트 메뉴 항목을 툴바와 동기화하는 방법은 무엇입니까? Fox 예제, navtoolbar 호출에 del : false가 있으면 상황에 맞는 메뉴에서 Delete 명령이 표시되지 않거나 비활성화 된 것으로 표시됩니다.

Answer 1

내 새로운 demo이 작업을 수행하는 방법을 보여줍니다 데모에서

내가있는 jqGrid의 플러그인 디렉토리에 포함 된 jquery.contextmenu.js의 small modification 사용합니다. 내 코드는 특히 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' 
     } 
    }); 
}