JQGrid 인라인 편집 : 다른 카테고리 드롭 다운을 기준으로 하위 카테고리 드롭 다운 목록 필터링

Question

Jqgrid에 카테고리 및 하위 카테고리 열이 있습니다. 인라인 편집을 활성화했으며 카테고리 및 하위 카테고리 모두 드롭 다운 목록 열 (edittype : 'select')입니다. 선택한 카테고리를 기반으로 하위 카테고리 목록을 필터링해야합니다. 나는 어떻게이 기능을 습득 할 수 있을까?

나는 아래의 이벤트 만 afterEditCell 나 작동하지의 시도 : 기능 (ROWID, celname, 가치, iRow, iCol를) { // 여기에서해야 할 일 }

위의 이벤트는하지 않습니다 해고 됐어. 내 모든 열을 편집 할 수 있습니다

감사합니다,

Answer 1

이 질문은 자주 묻습니다. 그래서 (3.7.x로 시작하는 jqGrid에 대해서만) 로컬 데이터로 이러한 시나리오를 구현하는 방법을 보여주는 작은 코드 예제를 작성했습니다. 데이터 편집 (인라인 편집)에서는 여기에서 더블 클릭 이벤트를 사용합니다. 수정 된 데이터는 "enter"키를 누르면 저장됩니다. 선택 요소를 채우기 위해 ID를 사용합니다. 카테고리 및 하위 카테고리의 텍스트를 대신 사용하려면 포맷터 'select'를 제거하고 <option> 요소 (참조 코드 dataEvents 이벤트 핸들러 참조)의 해당 변경 사항을 적용해야합니다.

var categories = ["sport", "science"]; 
var subcategories = ["football", "formel 1", "physics", "mathematics"]; 
var mydata = [ 
    {Name:"Lukas Podolski",  Category:0, Subcategory:0}, 
    {Name:"Michael Schumacher", Category:0, Subcategory:1}, 
    {Name:"Albert Einstein", Category:1, Subcategory:2}, 
    {Name:"Blaise Pascal",  Category:1, Subcategory:3} 
]; 
var subcategoriesOfCategory = [ 
    ["football", "formel 1"], 
    ["physics", "mathematics"] 
]; 

var grid = jQuery("#list").jqGrid({ 
    data: mydata, 
    datatype: 'local', 
    colModel: [ 
     { name: 'Name', width: 200 }, 
     { name: 'Category', width: 200, editable:true, formatter:'select', 
      edittype:'select', editoptions: { 
       value: categories, 
       dataInit : function (elem) { 
        var v = $(elem).val(); 
        grid.setColProp('Subcategory', { 
            editoptions:{value:subcategoriesOfCategory[v]}}); 
       }, 
       dataEvents: [ 
        { type: 'change', 
        data: { id: 7 }, 
        fn: function(e) { 
         var v=$(e.target).val(); 
         var sel = grid.getGridParam('selrow'); 
         grid.setColProp('Subcategory', { editoptions: 
               {value:subcategoriesOfCategory[v]}}); 
         var res = ''; 
         var sc = subcategoriesOfCategory[v]; 
         for (var i=0; i<sc.length; i++) { 
          res += '<option role="option" value="' + i + '">' + 
            sc[i] + '</option>'; 
         } 
         $("select#"+sel+"_Subcategory").html(res); 
        } 
        } 
       ] 
      } 
     }, 
     { name: 'Subcategory', width: 200, editable:true, formatter:'select', 
      edittype:'select', editoptions: {value: subcategories} } 
    ], 
    onSelectRow: function(id) { 
     if (id && id !== lastSel) { 
      grid.restoreRow(lastSel); 
      lastSel = id; 
     } 
    }, 
    ondblClickRow: function(id, ri, ci) { 
     if (id && id !== lastSel) { 
      grid.restoreRow(lastSel); 
      lastSel = id; 
     } 
     grid.editRow(id, true); 
     return; 
    }, 
    editurl: 'clientArray', 
    sortname: 'Name', 
    viewrecords: true, 
    rownumbers: true, 
    sortorder: "desc", 
    pager: '#pager', 
    caption: "Inline Editing example" 
}).navGrid('#pager', { edit: false, add: false, del: false, 
         search: false, view: false }); 

이 예제는 서버에서 선택 옵션을 빌드하는 경우에 수정할 수 있습니다.