localArray データで jqGrid を使用しています。この配列を紺碧のデータベースから取得し、グリッドにビンジングしています。この後、すべての行を操作して、DBで更新する予定です。
インライン ナビゲーション バーを使用しています。「行の追加」、「行の保存」、「行の削除」ボタンをクリックすると、カスタム関数を呼び出して、その関数から DB にデータを保存/削除したいと考えています。
まず、私のデザインが正しく、スケーラブルかどうかを知りたいです。
現在、「aftersavefunc」パラメーターを使用して、保存ボタンのクリック時にカスタム関数を呼び出すことができます。
次に、「行の削除」ボタンに設定する必要があるパラメーターを教えてください。「行の追加」の場合、「行の保存」ボタンをクリックして行を保存する必要があるため、同じパラメーターが機能すると思います。
私のコードは参考のために以下の通りです：
jQuery("#list4").jqGrid({
datatype: "local",
data: myData,
height: "auto",
colNames: ['RowNo', 'RouteId', 'Area'],
colModel: [
{ name: 'id', index: 'id', width: 50, sortable: false },
{ name: 'RouteId', index: 'RouteId', width: 50, sortable: false },
{ name: 'Area', index: 'Area', width: 130, sortable: false, editable: true, editrules: { required: true} },
],
multiselect: false,
rownumbers: false,
rowList: [10, 20, 30],
pager: jQuery('#pager1'),
viewrecords: true,
caption: "Bus Schedule Data",
editurl: "clientArray",
restoreAfterSelect: false,
loadonce: true
});
var rowid;
var inlineparams = {
addParams: { useFormatter: false },
editParams: {
aftersavefunc: function (id) {
var rowData = jQuery('#list4').jqGrid('getRowData', id);
ScheduleTable.update({ id: 1, Area: rowData.Area.toString() });
}
},
add: true,
edit: true,
save: true,
cancel: true,
del: true
};
jQuery("#list4").jqGrid('navGrid', "#pager1", { edit: false, save: false, add: false, cancel: false, del: false });
jQuery("#list4").jqGrid('inlineNav', "#pager1", inlineparams);
jQuery("#list4").jqGrid("saveRow", id, {
keys: false,
url: "clientArray"
});