次のグリッド定義があります。
$(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レベルでいくつかの魔法を実行する関数があります。
初めてロードされたグリッドである次の画像を見てください。
ここで、色付きの行(id: 219110
)を最初の行の位置にドラッグアンドドロップするとします。これにより、最初の行(id: 219110
)が1行下に移動し(その後のすべての行に同じことが起こります)、移動した行が最初の位置になります。以下の例を参照してください。
前:
+--------+--------+-----+
| id | gri_id | seq |
+--------+--------+-----+
| 219111 | | 1 |
| ... | | ... |
| 219110 | | 4 |
+--------+--------+-----+
後:
+--------+--------+-----+
| id | gri_id | seq |
+--------+--------+-----+
| 219110 | | 1 |
| 219111 | | 2 |
| ... | | ... |
+--------+--------+-----+
id
askey
とseq
asの値を使用してビルドおよび配列する必要があるため、後でこれをAJAXバックエンド関数に渡して、新しいデータの格納を考慮します。
どうすればこれを達成できますか?
lastSelectedData
jqGridのパラメーターを使用して、ユーザーが以前にソートおよびフィルター処理したアイテムを取得できます。古い答え:これともう1つは、の使用法を示すデモを提供しますlastSelectedData
。
一般に、jqGridには、ローカルデータの並べ替えとフィルタリングに使用されるJavaScriptメソッドが内部に含まれています。古いjqGrid(iバージョン<= 4.7)で機能する古い回答のトリッキーな手法で説明しました。「freejqGrid」フォークの最初のバージョンでlastSelectedData
は、パラメーターを実装しました(readmeを参照)。これにより、最後にソートおよびフィルター処理されたローカルデータを非常に簡単に操作できます。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加