jqgrid получить строки в сетке после того, как перемещать строки

Question

У меня есть сетка с 3-мя столбцами, выглядит следующим образом:

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

Я сделал это возможно, что пользователь может изменить sortoder в сетке с помощью мыши. Например переместить вторую строку на вершине, так что сетка выглядит следующим образом:

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

Я достиг этого с:

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

Теперь я хочу, чтобы обновить свою базу данных с новым значением для col_sortorder. Функция fun_sort() запускается с помощью sortstop-event правильно. Мое намерение было просто прочитать все данные из сети и использовать forloop-индекс в качестве нового значения для col_sortorder, но когда я прочитал мою сетку с помощью:

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/, которая демонстрирует, как вы можете решить проблему. Я использовал update обратный вызов sortableRows, что совпадает с событием "sortupdate" (см. the documentation).

$("#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); 
    } 
}); 

где 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; 
     } 
    } 
} 

Сетка использует HTML-таблицы внутри. Таким образом, $grid[0] является DOM table, который имеет rows. Каждая строка имеет свойство id и так далее. Порядок элементов в коллекции rows соответствует порядку отображения строк.