我有一个包含 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 始终返回初始网格顺序,而不是我在网格内移动一行后的顺序。有人可以告诉我我该怎么做吗?
我觉得你的问题很有趣,因此我创建了演示 https://jsfiddle.net/OlegKi/xw0gcjez/,它演示了如何解决问题。我使用了sortableRows
update
回调,这与"sortupdate"
事件相同(请参阅文档)。
$("#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,它具有行属性。每一行都有id
属性,依此类推。行集合中元素的顺序对应于行的显示顺序。