jqgrid에서 대화 상자를 사용하여 행을 편집하는 방법은 무엇입니까?

Question

jqgrid의 팝업 대화 상자에서 편집하는 방법.

다음은 jqgrid 관련 내용입니다. 나는 인라인 편집이 필요 없다. 팝업 대화 상자를 원합니다. 팝업 대화 상자에는 이미 팝업 대화 상자가 있습니다. 이렇게하려면 팝업 대화 상자를 허용 할 수있는 javascript 함수를 호출해야합니다. 편집 아이콘을 클릭하면 자바 스크립트 기능을 호출 할 수있는 방법을 안내해 주시겠습니까?

 $('#CategoriesGrdList').jqGrid({ 
      ajaxGridOptions: { 
       error: function() { 
        $('#CategoriesGrdList')[0].grid.hDiv.loading = false; 
        alert('An error has occurred.'); 
       } 
      }, 
      url: '@Url.Action("GetAllCategoriesList", "Categories")/' + 0, 
      gridview: true, 
      autoencode: true, 
      postData: { categoryId: 1 }, 
      datatype: 'json', 
      jsonReader: { root: 'List', page: 'Page', total: 'TotalPages', records: 'TotalCount', repeatitems: false, id: 'Id' }, 
      mtype: 'GET', 
      colNames: ['Id', 'Code', 'Description', 'IsActive', "actions"], 
      colModel: [ 
        { name: 'Id', index: 'Id', hidden: false, key: true }, 
       { name: 'Code', index: 'Code', width: 170}, 
       { name: 'Description', index: 'Description', width: 170}, 
      { name: 'IsActive', index: 'IsActive', width: 170 }, 
      { 
       name: 'actions', index: 'actions', formatter: 'actions', 
       formatoptions: { 
        keys: true, 
        editbutton: true, 
        delOptions: { url: '@Url.Action("DeleteCategory", "Categories")' } 
       } 
      } 
      ], 
      pager: $('#CategoriesGrdPager'), 
      sortname: 'Code', 
      rowNum: 3, 
      rowList: [3, 6, 9], 
      width: '500', 
      height: '100%', 
      viewrecords: true, 
      multiselect: false, 
      caption: "Categories", 
      loadComplete: function() { 
       $("tr.jqgrow:odd").css("background", "#E0E0E0"); 
      }, 
      beforeSelectRow: function (rowid, e) { 
       return false; 

      }, 
      sortorder: 'desc' 
     }).navGrid('#CategoriesGrdPager', { edit: true, add: false, del: false, search: false, refresh: true }); 

플라이 가이드.

Answer 1

JQGrid에서 직접 편집 작업/버튼을 만들려면 기본 Edit NavGrid 버튼/액션을 false로 설정 한 다음 탐색 버튼에 맞춤 검색 버튼을 추가해야합니다. 여기 은 아래의 예 - 위에있는 jqGrid에 체인 기능을 navGrid 설정을 제거해야합니다 :

$('#CategoriesGrdList').jqGrid('navGrid', '#CategoriesGrdPager', { edit: false, add: false, del: false, search: false, refresh: true}) 
     .navButtonAdd('#CategoriesGrdPager', { 
      title: "Edit", 
      caption: "Edit", 
      buttonicon: "ui-icon-pencil", // JQuery UI Icon 
      onClickButton: function() { /*CALL YOUR FUNCTION HERE*/ }, 
      position: "last" // Position of the button on Nav 
     })'