我正在使用jqgrid，一个网格包含主数据，其他网格包含明细数据，当我单击主网格时，行详细信息将详细显示网格（主明细），所以我正在使用onselectRow事件，我想在主数据库中使用编辑按钮链接当我使用以前的代码时，onselectrow事件不会触发，并且数据不会在主网格中显示，并且此代码在主详细信息网格中运行良好。请专家告诉我在主网格中使用编辑按钮链接时是什么问题，然后为什么事件不会触发。
Jqgrid
jQuery(document).ready(function ($) {
// master grid
var $grid = $("#jqGrid");
$grid.jqGrid({
url: '@Url.Action("RequisitionGrid")',
datatype: "json",
jsonReader: { id: 'Req_ID' },
colModel: [
{ name: 'Req_ID', index: 'Req_ID', label: 'Req ID', hidden: true, editable: true, editable: "disabled", align: "center", width: 12 },
{ name: 'Comp_ID', index: 'Comp_ID', label: 'Comp ID', hidden: true, editable: true, searchoptions: { sopt: ['cn'] }, align: "left", width: 2 },
{ name: 'GL_Year', index: 'GL_Year', label: 'GL Year', hidden: true, editable: true, searchoptions: { sopt: ['cn'] }, align: "left", width: 40 },
{
name: 'ReqDate', index: 'ReqDate', label: 'Date', width: 3,
editable: true, edittype: 'text',
editoptions: {
size: 10, maxlengh: 10,
dataInit: function (element) {
$(element).datepicker({ dateFormat: 'yy/mm/dd' })
}
}
},
{ name: 'Job', index: 'Job', label: 'Job', width: 15, editable: true },
{ name: 'ApprovedBy', index: 'ApprovedBy', label: 'Approved by', width: 7, editable: true },
{ name: 'IsApproved', index: 'IsApproved', hidden: true, label: 'Approved', width: 10, editable: true },
{
name: 'Req_ID', label: '', search: false, width: '3', formatter: function (cellvalue, options, rowObject, rowdata) {
function MethodFormatter(cellValue, options, rowObject) {
var selectedRowId = options.rowId;
return '<a href="javascript:ReqMainUpdateMethod(' + selectedRowId + ')" style="color: #3366ff" id="' + selectedRowId + '" >Edit</a>';
}
}
},
],
height: 250,
shrinkToFit: true,
search: true,
autowidth: true,
rowNum: 20,
viewrecords: true,
page: 1,
scroll: 1,
viewrecords: true,
rownumbers: true, // show row numbers
rownumWidth: 25,
navOptions: {
reloadGridOptions: { fromServer: true }
},
formEditing: {
closeOnEscape: true,
closeAfterEdit: true,
savekey: [true, 13],
reloadGridOptions: {
fromServer: true
}
},
forceClientSorting: true,
loadonce: true,
caption: 'Requisition Main',
emptyrecords: 'No Records are Available to Display',
onSelectRow: function (ids) {
if (ids != null) {
var data = $("#jqGrid").getRowData(ids);
$("#jqGridDetails").jqGrid('setGridParam', { url: "/Home/RequisitionDetailGrid/" + data.Req_ID, datatype: 'json' });
$("#jqGridDetails").jqGrid('setCaption', 'Requisition Detail For :: <b style="color: Red">' + data.Job + '</b>');
$("#jqGridDetails").trigger("reloadGrid");
}
},
onSortCol: clearSelection,
onPaging: clearSelection,
pager: "#jqGridPager"
});
});
// detail grid
$("#jqGridDetails").jqGrid({
url: '@Url.Action("RequisitionDetailGrid")',
mtype: "GET",
datatype: "json",
page: 1,
colModel: [
{ key: true, name: 'Req_ID_Det', index: 'Req_ID_Det', label: 'Req Det ID', hidden: true, editable: true, align: "center", width: 12 },
{ name: 'ReqNo', index: 'ReqNo', label: 'Req No', hidden: true, align: "left", width: 40 },
{ name: 'SrNo', index: 'SrNo', label: 'Sr No', align: "left", width: 3 },
{ name: 'GL_Year', index: 'GL_Year', hidden:true,editable:true, label: 'GL_Year', width: 5 },
{ name: 'ItemDesc', index: 'ItemDesc', label: 'Item Desciption', width: 20 },
{ name: 'Qty', index: 'Qty', label: 'Qty', width: 2 },
{ name: 'Remarks', index: 'Remarks', label: 'Remarks', width: 10 },
{
name: 'Req_ID_Det', label: '', search: false, width: '2', formatter: function (cellvalue, options, rowObject) {
return MethodFormatter(cellvalue, options, rowObject);
}
},
{
name: 'Req_ID_Det', label: '', search: false, width: '2', formatter: function (cellvalue, options, rowObject) {
return MethodDelete(cellvalue, options, rowObject);
}
},
],
autowidth: true,
shrinkToFit: true,
navOptions: {
reloadGridOptions: { fromServer: true }
},
rowNum: 5,
loadonce: true,
height: '100',
viewrecords: true,
caption: 'Requisition Detail',
emptyrecords: 'No Records are Available to Display',
pager: "#jqGridDetailsPager"
});
function clearSelection() {
jQuery("#jqGridDetails").jqGrid('setGridParam', { url: "RequisitionDetailGrid", datatype: 'json' }); // the last setting is for demo purpose only
jQuery("#jqGridDetails").jqGrid('setCaption', 'Detail Grid:: none');
jQuery("#jqGridDetails").trigger("reloadGrid");
}
function MethodFormatter(cellValue, options, rowObject) {
var selectedRowId = options.rowId;
return '<a href="javascript:getbyID(' + selectedRowId + ')" style="color: #3366ff" id="' + selectedRowId + '" >Edit</a>';
}
function MethodDelete(cellValue, options, rowObject) {
var selectedRowId = options.rowId;
return '<a href="javascript:ReqDelete(' + selectedRowId + ')" style="color: #3366ff" id="' + selectedRowId + '" >Delete</a>';
}
HTML
<!--Requsitition Detail Update Model-->
<div class="modal fade" id="ReqMainUpdateModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-lg modal-notify modal-info" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<p class="heading lead">Update Requisition Main</p>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="white-text">×</span>
</button>
</div>
<form id="NewOrderForm">
<div class="modal-body">
<div class="form-row">
<div class="col" id="Req_ID">
<div class="md-form">
@Html.TextBoxFor(m => m.Req_ID, new { @class = "form-control mr-sm-3", @id = "txtReqIDmain", Required = true })
</div>
</div>
</div>
<div class="form-row">
<div class="col">
<!-- Requisition Date-->
<label for="lblReqDate">Req Date</label>
<div class="md-form">
@Html.TextBoxFor(m => m.ReqDate, new { @class = "form-control mr-sm-3", @id = "txtReqDateMain" })
</div>
</div>
</div>
<div class="form-row">
<div class="col">
<label for="lblJOB"> JOB</label>
<div class="md-form">
@Html.TextBoxFor(m => m.Job, new { @class = "form-control mr-sm-3", @id = "txtReqjOBMain" })
</div>
</div>
</div>
<div class="form-row">
<div class="col">
<label for="lblApprovedBy"> Approved By </label>
<div class="md-form">
@Html.TextBoxFor(m => m.Approvedby, new { @class = "form-control mr-sm-3", @id = "txtApprovedByMain" })
</div>
</div>
</div>
<div class="form-row">
<div class="col">
<label for="lblApproved"> Approved </label>
<div class="md-form">
@Html.CheckBoxFor(m => m.IsApproved, new { @class = "form-control mr-sm-3", @id = "txtIsApprovedMain" })
</div>
</div>
</div>
<div class="modal-footer">
<button type="reset" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="ReqMainUpdate" type="submit" class="btn btn-danger" onclick="RequisitionDetail_Update();">Update Record</button>
</div>
</div>
</form>
</div>
<!--/.Content-->
</div>
</div>