私はJQGridである程度の成功を収めてきましたが、データを一度ロードしてからクライアント側ですべてのcrud操作を実行する必要がある状況にあり、それが完全に行き詰まっているように聞こえるほど簡単です。私はすべてスタックオーバーフローとグーグルを調べてきましたが、単純なクライアント側のjqgrid操作の良い例を見つけることができないようです(私は間違っているかもしれませんが、公式のjqgridドキュメントでもクライアント側のものを見つけることができませんでした)。ここで例を利用しようとしました：
http://www.ok-soft-gmbh.com/jqGrid/LocalFormEditing.htm
しかし、私はまだajax/javaxcript/jqueryの初心者であり、やや圧倒され、グリッドで機能させることができませんでした. ヒントやチュートリアルへのリンクをいただければ幸いです。私のコードと、これまでにプロセスについて収集したものは次のとおりです。
私は自分のグリッドを持っています:
editSettings = {
jqModal: false,
reloadAfterSubmit: false,
closeOnEscape: true,
savekey: [true, 13],
closeAfterEdit: true,
onclickSubmit: editSubmit,
height: 200,
width: 400
},
addSettings = {
jqModal: false,
reloadAfterSubmit: false,
savekey: [true, 13],
closeOnEscape: true,
closeAfterAdd: true,
onclickSubmit: addSubmit,
height: 200,
width: 400
},
$('#engineerGrid').jqGrid({
datatype: 'json',
colNames: ['Engineer Name', 'Engineer Type', '% Utilization'],
colModel: [
{name: 'name', index: 'name', width: 150, align: "left", editable: true, edittype: "select",
editoptions: { value: "@(Model.engineerOptions)" }, sorttype: 'string', formatter: 'select'
},
{ name: 'type', index: 'type', width: 150, align: "left", editable: true, edittype: "select",
editoptions: { value: "@(Model.typeOptions)" }, formatter: 'select'
},
{ name: 'ut', index: 'ut', width: 125, align: "left", editable: true, sorttype: 'number', formatter: 'number' }
],
rowNum: 10,
rowList: [5, 10, 20],
pager: '#pager',
gridview: true,
rownumbers: true,
autoencode: true,
ignoreCase: true,
sortname: 'invdate',
viewrecords: true,
sortorder: 'desc',
loadonce: true,
caption: 'Project Engineers',
editurl: 'clientArray',
url: '@Url.Action("EditProjectEngineerJQGridData","Project",new{projID = Model.projectID})'
}).jqGrid('navGrid', '#pager', {}, editSettings, addSettings, delSettings);
});
サーバーから json 情報を取得しています。loadonce:true が設定されているため、データ型を json から local に切り替える必要があると思います。これが私が混乱し始めるところです。すべてのcrud関数を手動で記述し、onclickSubmitでそれらにリンクする必要がありますか? その場合、データを正しく取得/設定する方法を誰かが喜んで説明してくれますか?
addSubmit = function(){
//I think something needs to go here?
};
編集：
これを見た人のためにもう一度言いたいと思います。私はあまり経験がないので、これは低レベルかもしれませんが、他の初心者は素人の説明から恩恵を受けることができます. ローカル データを操作する場合、フォーム編集は使用できません (機能する削除を除く)。ただし、行を追加/編集するには、inlineNav を使用できます。私が取り組んだのは以下のとおりです。細かい部分がいくつかありますが、ローカルデータの追加/編集/削除に関しては機能します。
$(document).ready(function () {
var myData = [],
editOptions = {},
addOptions = {},
lastSel = -1,
parameters = {
edit: false,
editicon: "ui-icon-pencil",
add: true,
addicon: "ui-icon-plus",
save: true,
saveicon: "ui-icon-disk",
cancel: true,
cancelicon: "ui-icon-cancel",
addParams: { useFormatter: false },
editParams: {}
},
myDelOptions = {
onclickSubmit: function (options, rowid) {
var grid = $('#engineerGrid');
// delete the row
grid.delRowData(rowid);
grid.trigger("reloadGrid", [{ page: 0}]);
return true;
},
processing: true
};
$('#engineerGrid').jqGrid({
datatype: 'json',
url: '@Url.Action("CreateProjectEngineerJQGridData", "Project")',
colNames: ['Engineer Name', 'Engineer Type', '% Utilization'],
colModel: [
{ name: 'name', index: 'name', width: 150, align: "left", editable: true, edittype: "select",
editoptions: { value: "@(Model.engineerOptions)" }, sorttype: 'string', formatter: 'select'
},
{ name: 'type', index: 'type', width: 150, align: "left", editable: true, edittype: "select",
editoptions: { value: "@(Model.typeOptions)" }, formatter: 'select'
},
{ name: 'ut', index: 'ut', width: 125, align: "left", editable: true, formatter: 'number',
formatoptions: { decimalPlaces: '0', defaultValue: '20'}
}
],
rowNum: 20,
rowList: [5, 10, 20],
pager: '#pager',
gridview: true,
rownumbers: true,
autoencode: true,
ignoreCase: true,
sortname: 'invdate',
viewrecords: true,
sortorder: 'desc',
loadonce: true,
width: 750,
caption: 'Project Engineers',
editurl: 'clientArray',
onSelectRow: function (id) {
//if selected row changed restore values of previously selected row
if (id && id !== lastSel) {
jQuery('#engineerGrid').restoreRow(lastSel);
lastSel = id;
}
jQuery('#engineerGrid').editRow(id, true);
}
}).jqGrid('navGrid', '#pager', { edit: false, add: false, del: true }, editOptions, addOptions, myDelOptions);
jQuery("#engineerGrid").jqGrid('inlineNav', '#pager', parameters);
});
とにかく、助けてくれてありがとうオレグ！