移动行后jqgrid在网格中获取行

Question

我有一个包含 3 列的网格，如下所示：

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

我使用户可以使用鼠标更改网格中的分拣机成为可能。例如将第二行移到顶部，这样网格看起来像：

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-index 作为 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 总是 returns 初始网格顺序，而不是我在网格内移动一行后的顺序。谁能告诉我该怎么做？

Answer 1

我发现你的问题很有趣，因此我创建了演示 https://jsfiddle.net/OlegKi/xw0gcjez/, which demonstrates how you can solve the problem. I used update callback of sortableRows, which is the same as "sortupdate" event (see 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 table。因此$grid[0]是table, which has rows properties. Every row has id property and so on. The order of elements in the rows集合的DOM对应行显示的顺序

移动行后jqgrid在网格中获取行

jqgrid get rows in grid after move rows

jqgrid

jquery-ui-sortable