jqgrid 4.4 の inlineNav 機能を使用して、サブグリッドに追加/編集機能を提供しています。ただし、 Add イベントを呼び出す方法がわかりません。レコードを「追加」すると、更新イベントのみが呼び出されます。
親グリッド行からサブグリッドに row_id を取得して Add イベントに渡す方法もわかりません。
これが私のコードです
<script type="text/javascript">
$(document).ready(function () {
$('#jqgFactors').jqGrid({
//url from wich data should be requested
url: '@Url.Action("GetFactors")',
//type of data
datatype: 'json',
//url access method type
mtype: 'POST',
//columns names
colNames: ['id', 'category', 'question type', 'question', 'tooltip text', 'xdata', 'warningexception'],
//columns model
colModel: [
{ name: 'id', index: 'id', align: 'left', editable: false, width: '40px', fixed: true, key: true },
{ name: 'categoryid', index: 'categoryid', align: 'left', editable: true, edittype: 'select', width: '80px', fixed: true, editoptions: { value: { 1: 'Departure', 2: 'Pilot', 3: 'Product', 4: 'Flight', 5: 'Destination'} }, editrules: { required: true} },
{ name: 'type', index: 'type', align: 'left', editable: true, edittype: 'select', width: '100px', fixed: true, editoptions: { value: { 1: 'RadioButton List', 2: 'DatePicker'} }, editrules: { required: true} },
{ name: 'questiontext', index: 'questiontext', align: 'left', editable: true, edittype: 'textarea', width: '200px', fixed: true, editoptions: { rows: '5', cols: '40' }, editrules: { required: true} },
{ name: 'tooltip', index: 'tooltip', align: 'left', editable: true, edittype: 'textarea', width: '300px', fixed: true, editoptions: { rows: '5', cols: '40' }, editrules: { required: true} },
{ name: 'x', index: 'x', align: 'left', editable: true, edittype: 'select', width: '60px', fixed: true, editoptions: { value: { 1: 'true', 0: 'false'} }, editrules: { required: true} },
{ name: 'warningexception', index: 'warningexception', align: 'left', editable: true, edittype: 'select', width: '60px', editoptions: { value: { 1: 'true', 0: 'false'} }, editrules: { required: true} }
],
//pager for grid
pager: $('#jqgpFactors'),
rowNum: 60,
sortname: 'id',
sortorder: 'asc',
viewrecords: true,
height: '100%',
width: 900,
subGrid: true,
subGridRowExpanded: function (subgrid_id, row_id) {
var subgrid_table_id;
var subgrid_pager_id;
subgrid_table_id = subgrid_id + "_t";
subgrid_pager_id = "p_" + subgrid_table_id;
$("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table><div id='" + subgrid_pager_id + "' class='scroll'></div>");
$("#" + subgrid_table_id).jqGrid({
url: '@Url.Action("GetFactorDetails")',
postData: { QuestionId: function () { return row_id; } },
datatype: "json",
mtype: "POST",
colNames: ['id', 'questionid', 'text', 'influence', 'weight'],
colModel: [
{ name: "id", index: "id", key: true, hidden: true },
{ name: "questionid", index: "questionid", hidden: true },
{ name: "text", index: "text", width: 700, editable: true, edittype: 'text' },
{ name: "influence", index: "influence", width: 80, editable: true, edittype: 'text', editrules: { required: true, integer: true} },
{ name: "weight", index: "weight", sortable: false, width: 80, editable: true, edittype: 'text', editrules: { required: true, integer: true} }
],
height: '100%',
rowNum: 5,
sortname: 'id',
sortorder: 'asc',
pager: subgrid_pager_id,
editurl: 'clientArray',
width: 860
});
$("#" + subgrid_table_id).jqGrid('navGrid', '#' + subgrid_pager_id, { edit: false, add: false, del: false });
$("#" + subgrid_table_id).jqGrid('inlineNav', '#' + subgrid_pager_id, {
addParams: {
addRowParams: {
keys: true,
url: '@Url.Action("AddFactorDetail")'
}
},
editParams: {
url: '@Url.Action("UpdateFactorDetail")'
},
add: true,
edit: true,
save: true,
cancel: true
}
});
}
});
$.jgrid.nav.addtext = "Add Record";
$.jgrid.nav.edittext = "Edit Record";
$.jgrid.nav.deltext = "Delete Record";
$('#jqgFactors').jqGrid('navGrid', '#jqgpFactors',
{ add: true, del: true, edit: true, search: false },
{ width: 'auto', url: '@Url.Action("UpdateFactor")' },
{ width: 'auto', url: '@Url.Action("UpdateFactor")' }, //insert
{ width: 'auto', url: '@Url.Action("DeleteFactor")' });
$('#dlgFactor').dialog({ autoOpen: false, bgiframe: true, resizable: false, title: 'Factor' });
$('a[data-supplier-id]').live('click', function (e) {
if (e.preventDefault)
e.preventDefault();
else
e.returnValue = false;
var dialogPosition = $(this).offset();
$.post('@Url.Action("Factor")', { FactorId: $(this).attr('data-supplier-id') }, function (data) {
$('#dlgFactor').empty();
$('#tmplFactor').tmpl(data).appendTo('#dlgFactor');
$('#dlgFactor').dialog('option', 'position', [dialogPosition.left, dialogPosition.top]);
$('#dlgFactor').dialog('open');
});
});
});
これは、コントロールを次のように表示したいものです。更新は正常に機能しています。
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult UpdateFactorDetail(FactorDetailModel model, int Id)
{
model.QuestionId = Id;
FactorManager fm = new FactorManager();
return Json(fm.UpdateDetail(model));
}
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult AddFactorDetail(FactorDetailModel model, int QuestionId)
{
model.QuestionId = QuestionId;
FactorManager fm = new FactorManager();
return Json(fm.AddDetail(model));
}