我有以下网格定义:
$(document).ready(function () {
$("#thegrid").jqGrid({
url: "/ajax/questions/get/" + form_id,
datatype: "json",
colNames: ['id', 'grid_id', 'seq', 'type', 'text'],
colModel: [
{name: 'field_id', index: 'id', width: 100, editable: false, search: false},
{name: 'grid_id', index: 'grid_id', width: 50, editable: false, search: false},
{name: 'field_seq', index: 'seq', width: 45, editable: false, search: false},
{name: 'type', index: 'type', width: 125, editable: false, search: false},
{name: 'field_name', index: 'text', width: 585, search: false}
],
autowidth: true,
rowNum: 200,
cmTemplate: {width: 300, autoResizable: true},
iconSet: "fontAwesome",
guiStyle: "bootstrap",
autoResizing: {compact: true, resetWidthOrg: true},
viewrecords: true,
autoencode: true,
sortable: true,
pager: true,
toppager: true,
hoverrows: true,
multiselect: true,
multiPageSelection: false,
rownumbers: true,
loadonce: true,
autoresizeOnLoad: true,
forceClientSorting: true,
ignoreCase: true,
prmNames: {id: "field_id"},
jsonReader: {id: "field_id"},
localReader: {id: "field_id"},
navOptions: {edit: false, add: false, search: false, del: false, refresh: true},
pgbuttons: false,
pginput: false,
caption: "Questions",
height: 100,
editurl: '/ajax/questions/edit',
onSelectRow:
function () {
// ....
},
loadComplete: function () {
// ...
}
})
});
使用上面的代码,可以通过将行拖放到网格的某个位置来对行进行排序。
为了保持这种变化,我在后端有一个函数
form_id
(我将其存储在sessionStorage中)和
field_id => field_seq
并在DB级别执行一些魔术。
请看下图,这是第一次加载的网格:
现在让我们假设我正在拖动(&A);删除彩色行(
id: 219110
)进入第一排位置。这将是第一排(
编号:219110
)向下移动一行(该行之后的所有行都会发生相同的情况),然后移动的行将占据第一个位置。参见以下示例:
之前:
+--------+--------+-----+
| id | gri_id | seq |
+--------+--------+-----+
| 219111 | | 1 |
| ... | | ... |
| 219110 | | 4 |
+--------+--------+-----+
之后:
+--------+--------+-----+
| id | gri_id | seq |
+--------+--------+-----+
| 219110 | | 1 |
| 219111 | | 2 |
| ... | | ... |
+--------+--------+-----+
我需要使用
id
作为
key
以及
seq
作为值,以便稍后将其传递给AJAX后端函数,该函数将负责存储新数据。
我如何做到这一点?