는 이동 행 후 그리드의 행을 얻을 수있는 jqGrid

Question

내가 좋아 보이는 3 열이있는 그리드가 있습니다

col1  col2 col_sortorder 
AAAA  1000 1 
AAAA  1002 2 
AAAA  1003 3 

나는 그것이 가능 사용자가 마우스를 사용하여 그리드에 sortoder을 변경할 수 있습니다했다.

jQuery("#list").jqGrid('sortableRows'); 
jQuery("#list").bind('sortstop', function() { fun_sort(event) }); 

지금 나는 col_sortorder에 대한 새 값으로 내 데이터베이스를 업데이트 할 : 나는 이것을 달성

col1  col2 col_sortorder 
AAAA  1002 2 
AAAA  1000 1 
AAAA  1003 3 

: 같은 격자 모양 때문에 예를 들어, 상단의 두 번째 행으로 이동합니다. fun_sort() 함수는 sortstop-event에 의해 올바르게 트리거됩니다. 내 의도는 그리드에서 모든 데이터를 읽고 col_sortorder에 대한 새로운 값으로 forloop 색인을 사용하는 것이 단지했다,하지만 난 내 그리드를 통해 읽을 때 사용 :

이

var allRowsInGrid = $('#list').jqGrid('getGridParam','data'); 
for (i = 0 ; i <= allRowsInGrid.length -1; i++){ 
var col1 = allRowsInGrid[i].col1; 
var col2 = allRowsInGrid[i].col1; 
var col_sortorder = i+1; //new value for sortorder 
// call ajax to update the database 
} 

함수 getGridParam는 항상 초기 반환 격자 안의 행을 이동 한 후에는 순서가 아니라 격자 순서로 정렬됩니다. 누군가 내가 어떻게 할 수 있는지 말해 줄 수 있습니까?

Answer 1

나는 흥미로운 질문을 발견하고 따라서 문제를 해결할 수있는 방법을 보여주는 데모 https://jsfiddle.net/OlegKi/xw0gcjez/을 만들었습니다. sortableRows의 update 콜백을 사용했습니다. "sortupdate" 이벤트 (the documentation 참조)와 같습니다. updateColSortorder이

function updateColSortorder() { 
    var rows = $grid[0].rows, localRow, i; 
    for (i = 0; i < rows.length; i++) { 
     if ($(rows[i]).hasClass("jqgrow")) { 
      // row is a row with data. row.id is the rowid 
      localRow = $grid.jqGrid("getLocalRow", rows[i].id); 
      localRow.col_sortorder = i; 
     } 
    } 
} 

그리드입니다

$("#list").jqGrid("sortableRows", { 
    update: function() { 
     updateColSortorder(); 
     // the data of the column col_sortorder will contain 
     // now sequensial values 1,2,3... 
     // even the display values are still old 

     // reload grid to display updated data 
     var p = $grid.jqGrid("getGridParam"); 
     // we reset sortname to "col_sortorder" only to reload 
     // with minimal visual changes for the user 
     p.sortname = "col_sortorder"; 
     p.sortorder = "asc"; 
     setTimeout(function() { 
      $grid.trigger("reloadGrid"); 
     }, 0); 
    } 
}); 

내부적으로 HTML 테이블을 사용합니다. 따라서 $grid[0]은 rows 속성을 갖는 table의 DOM입니다. 모든 행에는 id 속성이 있습니다. rows 컬렉션의 요소 순서는 행이 표시되는 순서와 같습니다.