새로 고침 jqGrid by Ajax

Question

두 개의 jqgrid를 사용합니다. grid1의 행을 클릭 한 다음 grid2의 기본 매개 변수 인 Ajax에 의해 grid2 데이터를 표시하려고합니다. Ajax로 grid2의 데이터를 변경하는 방법? GRID2에 대한 이 코드 :

$("#gridrelatedLette").jqGrid(
{ 
    url: "GetLetterInformationHandler.ashx?CurrentUser=" + 1157 + "&IndCode=" + rowData["PctIndCode"] + "&IndSerial=" + rowData["PctIndNum"] + "&TabName=relatedLetters", 
    datatype: 'json', 
    width: $("#relatedLetterTab").width()-20, 
    height: a1, 
    direction: "rtl", 
    colNames: ['1', '2', '2', '3', '4', '5','6',], 
    colModel: [ 
     { name: 'IRltType', width: 40, sortable: false, hidden: false, template: CenterTemplate }, 
     { name: 'IRltLettDate', width: 60, sortable: false, hidden: false, template: CenterTemplate }, 
     { name: 'IRltLettNum', width: 60, sortable: false, hidden: false, template: CenterTemplate }, 
     { name: 'IRltLettType', width:30, sortable: false, hidden: false, template: CenterTemplate }, 
     { name: 'IndTopic', width: 100, sortable: false, hidden: false, template: CenterTemplate }, 

    ], 
    rowNum: 20, 
    loadonce: true, 
    rowList: [5, 10, 20], 
    recordpos: "left", 
    ignoreCase: true, 
    toppager: true, 
    viewrecords: true, 
    sortorder: "desc", 
    scrollOffset: 1, 
    editurl: 'clientArray', 
    shrinkToFit: true , 
    jsonReader: 
    { 
     repeatitems: false, 
    }, 
    rowattr : function(rd) { 
     return { "class": "myRowClass" }; 
    }, 
    gridview: true, 
}); 

Answer 1

마스터 코드/시나리오 자세한 사항은 다음과 같습니다 : 두 번째 (세부 사항) 그리드 초기에 모두 하나 개의 사용 datatype: "local"의

1. 첫째. 결과적으로 첫 번째 (마스터) 그리드의 행이 선택되지 않을 때까지 세부 사항 그리드가 비어있게됩니다. 두 번째 (세부 사항) 그리드의 url에 대한 요청이 처음에는 이루어지지 않습니다.
2. 첫 번째 (마스터) 그리드가 다시로드되는 경우 ("Reload Grid"버튼을 클릭 한 후 navGrid) 두 번째 그리드의 데이터를 제거해야합니다. 옵션으로 datatype을 "local" 값으로 재설정 할 수도 있습니다.
3. HTTP GET 작업을 사용하는 경우 URL에 매개 변수를 추가하는 기능으로 정의 된 속성이있는 postData을 사용할 수 있습니다. 자세한 내용은 the answer을 참조하십시오. 그것은 자연스럽게 매개 변수의 동적 값을 구현할 수 있습니다. 또한 매개 변수의 값은 encodeURIComponent을 사용하여 자동으로 인코딩되며 올바른 URL을 갖게됩니다.
4. 세부 그리드 (두 번째 그리드)가 마스터 그리드 (첫 번째 그리드)와 동일한 ROWID를 사용할 수있는 경우가 종종 있습니다. ID가 중복되는 문제를 방지하려면 적어도 하나의 그리드에서 idPrefix을 사용하는 것이 좋습니다. 예를 들어 idPrefix: "d_"을 세부 정보 표로 사용할 수 있습니다.
5. 서버에서 데이터를 다시로드하기 전에 명시 적으로 datatype을 "json"으로 설정 했으므로 두 번째 (세부 정보) 표에 loadonce: true을 안전하게 사용할 수 있습니다. 로드 후 서버 datatype의 데이터는 자동으로 "local"으로 설정되지만 현재 마스터 그리드의 선택된 행에 해당하는 데이터를 갖게됩니다.

코드의 주요 스키마는 다음

var $master = $("#grid1"), $details = ("#grid2"); 

$master.jqGrid({ 
    colModel: [ 
     ... 
     { name: "PctIndCode", ... }, 
     { name: "PctIndNum", ... } 
    ], 
    onSelectRow: function (rowid) { 
     // set datatype to "json" and reload the grid. 
     $details.jqGrid("setGridParam", { datatype: "json" }) 
      .triggerHandler("reloadGrid", [{current: true, page: 1}]); 
    }, 
    loadComplete: function() { 
     var selRowId = $(this).jqGrid("getGridParam", "selrow"); 
     if (selrow === null) { 
      // no row selected after reloading of the master grid 
      $details.jqGrid("setGridParam", { datatype: "local" }) 
       .triggerHandler("reloadGrid", [{page: 1}]); 
     } 
    }, 
    toppager: true, 
    gridview: true 
}); 
$master.jqGrid("navGrid", "#grid1_toppager", 
    { add: false, edit: false, del: false, search: false, 
     refreshstate: "current"}); 

$details.jqGrid({ 
    datatype: "local", 
    idPrefix: "d_", // to be sure that no id duplicates with master grid exist 
    url: "GetLetterInformationHandler.ashx", 
    postData: { 
     CurrentUser: 1157, 
     TabName: "relatedLetters", 
     IndCode: function() { 
      var selRowId = $master.jqGrid("getGridParam", "selrow"); 

      return selRowId === null ? "" : 
       $master.jqGrid("getCell", selRowId, "PctIndCode"); 
     }, 
     IndSerial: function() { 
      var selRowId = $master.jqGrid("getGridParam", "selrow"); 

      return selRowId === null ? "" : 
       $master.jqGrid("getCell", selRowId, "PctIndNum"); 
     } 
    } 
    ... 
);