我正在尝试使用MVC3和jqgrid，我是新手。我想在同一页面上显示2个网格。两者都调用不同的Web方法来加载数据。我可以看到两个网格的布局。但是第二个Web方法被调用两次，并且两个网格都填充了第二个Web方法值。这是代码。我为两个网格使用不同的ID。我从两个不同的部分视图中调用两个网格。
的webMethods：
public ActionResult GridDailyEntryData(int page, int rows, string search, string sidx, string sord, DateTime igamingDate, int icasinoId)
{
var dailyEntry = new DailyEntryBLL();
int currentPage = Convert.ToInt32(page) - 1;
int totalRecords = 0;
var data = dailyEntry.GetContactPaged(icasinoId , isnapshottypeId, igamingDate, page, rows, out totalRecords);
var totalPages = (int)Math.Ceiling(totalRecords / (float)rows);
var jsondata = new
{
total = totalPages,
page,
records = totalRecords,
rows = (from m in data select new { id = m.HistoSystemSASMeterReadingId, cell = new object[] { m.HistoSystemSASMeterReadingId ,m.slot_id, m.SystemMeterCoinIn, m.location,m.MechanicalMeterCoinIn,m.ElectronicMeterCoinIn} }).ToArray()
};
return Json(jsondata, JsonRequestBehavior.AllowGet);
}
public ActionResult GridSignageData(int page, int rows, DateTime igamingDate, string sord, string sidx, string search)
{
var signageEntry = new SignageEntryBLL();
int currentPage = Convert.ToInt32(page)-1;
int totalRecords = 0;
var data = signageEntry.GetSignageDetailsPaged(igamingDate, page, rows, out totalRecords);
var totalPages = (int)Math.Ceiling(totalRecords/(float)rows);
var jsondata = new
{
total = totalPages,
page,
records = totalRecords,
rows = (from m in data select new { id = m.HistoSystemJkpSnapshotID, cell = new object[] {m.HistoSystemJkpSnapshotID, m.Linkname, m.Level, m.SystemSignageValue, m.ManualSignageValue } }).ToArray()
};
return Json(jsondata, JsonRequestBehavior.AllowGet);
}
- **.cshtml page**
<div id="grid1">
@{
Html.RenderPartial("_grid");
}
</div>
<br/><br/>
<div id="grid2">
@{
Html.RenderPartial("_signageGrid");
}
</div>
- **Partial Classes**
_grid.cshtml(1st partial class)
@model MCC_PMC.Models.DailyEntryModel
@{
ViewBag.Title = "_grid";
}
<link href="@Url.Content("~/Content/jquery-grid/ui.jqgrid.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/ui-darkness/jquery-ui-1.8.12.custom.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/grid.locale-en.js")" type="text/javascript"> </script>
<script src="@Url.Content("~/Scripts/jquery.jqGrid.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jqDailyEntryGrid.js")" type="text/javascript"></script>
<table id="grid" cellpadding="0" cellspacing="0">
</table>
<div id="pager" name="pager" style="text-align: center;">
</div>
_signageGrid(2nd partial class)
@model MCC_PMC.Models.DailyEntryModel
@{
ViewBag.Title = "_signageGrid";
}
<table id="sinGrid" cellpadding="0" cellspacing="0">
</table>
<div id="signpager" name="signpager" style="text-align: center;">
</div>
-------------------------------------------------------
JQgrid for 1st Grid (jqDailyEntryGrid)
//---JQGrid for DailyEntry Page-----------------------------------------------------------------------------------------------------------------
var lastsel;
var firstClick = true;
var jqDataUrl = "/DailyEntryCon/GridDailyEntryData";
$('#Process').click(function () {
if (!firstClick) {
$("#grid").trigger("reloadGrid");
}
firstClick = false;
$("#grid").jqGrid({
ajaxGridOptions: { cache: false },
postData: { icasinoId: function () { return $("#search").val(); },
igamingDate: function () { return $("#datetime").val(); }
},
colNames: ['HistoSystemSASMeterReadingId', 'SlotId', 'SystemCoinIn', 'Location', 'MechanicalMeterCoinIn', 'ElectricalCoinIn'],
colModel: [{ name: 'HistoSystemSASMeterReadingId', index: 'HistoSystemSASMeterReadingId', sortable: false, align: 'left', hidden: true },
{ name: 'SlotId', index: 'SlotId', sortable: false, align: 'left', width: '200' },
{ name: 'SystemCoinIn', index: 'SystemMeterCoinIn', sortable: false, align: 'left', width: '200' },
{ name: 'Location', index: 'Location', sortable: false, align: 'left', width: '200' },
{ name: 'MechanicalMeterCoinIn', index: 'MechanicalMeterCoinIn', sortable: false, align: 'left', width: '200',
editable: true, edittype: 'text'
},
{ name: 'ElectricalCoinIn', index: 'ElectricalCoinIn', sortable: false, align: 'left', width: '200',
editable: true, edittype: 'text'
}],
pager: jQuery('#pager'),
sortname: 'HistoSystemSASMeterReadingId',
rowNum: 10,
rowList: [15, 20, 30],
sortorder: "",
height: 250,
viewrecords: true,
rownumbers: true,
caption: 'Meter Entry',
width: 1200,
url: jqDataUrl,
editurl: "/DailyEntryCon/PerformCRUDAction",
datatype: 'json',
mtype: 'POST',
onSelectRow: function (rowid) {
debugger;
if (rowid && rowid !== lastsel) {
jQuery('#grid').jqGrid('restoreRow', lastsel);
jQuery('#grid').jqGrid('editRow', rowid, true);
lastsel = rowid;
}
}
})
jQuery("#grid").jqGrid('navGrid', '#pager', { edit: false, add: true, del: true, search: false, refresh: true },
{ closeOnEscape: true, reloadAfterSubmit: true, closeAfterEdit: true, left: 400, top: 300 },
{ closeOnEscape: true, reloadAfterSubmit: true, closeAfterAdd: true, left: 450, top: 300, width: 520 },
{ closeOnEscape: true, reloadAfterSubmit: true, left: 450, top: 300 });
});
jqgrid for 2nd Grid (jqSignageEntryGrid)
var lastsel;
var firstClick = true;
var jqDataUrl = "/DailyEntryCon/GridSignageData";
$('#Process').click(function () {
if (!firstClick) {
$("#sinGrid").trigger("reloadGrid");
}
firstClick = false;
$("#sinGrid").jqGrid({
ajaxGridOptions: { cache: false },
postData: { igamingDate: function () { return $("#datetime").val(); }
},
colNames: ['HistoSystemJkpSnapshotId', 'Linkname', 'Level', 'SystemSignageValue', 'ManualSignageValue'],
colModel: [{ name: 'HistoSystemJkpSnapshotId', index: 'HistoSystemJkpSnapshotId', sortable: false, align: 'left', hidden: true },
{ name: 'Linkname', index: 'Linkname', sortable: false, align: 'left', width: '200' },
{ name: 'Level', index: 'Level', sortable: false, align: 'left', width: '200' },
{ name: 'SystemSignageValue', index: 'SystemSignageValue', sortable: false, align: 'left', width: '200' },
{ name: 'ManualSignageValue', index: 'ManualSignageValue', sortable: false, align: 'left', width: '200',
editable: true, edittype: 'text'
}],
pager: jQuery('#signpager'),
sortname: 'Linkname',
rowNum: 5,
rowList: [10, 15, 20],
sortorder: "",
height: 150,
viewrecords: true,
rownumbers: true,
caption: 'Signage Entry',
width: 1200,
url: jqDataUrl,
editurl: "/DailyEntryCon/PerformSignageCRUDAction",
datatype: 'json',
mtype: 'POST',
onSelectRow: function (rowid) {
if (rowid && rowid !== lastsel) {
jQuery('#sinGrid').jqGrid('restoreRow', lastsel);
jQuery('#sinGrid').jqGrid('editRow', rowid, true);
lastsel = rowid;
}
}
})
jQuery("#sinGrid").jqGrid('navGrid', '#signpager', { edit: false, add: true, del: true, search: false, refresh: true },
{ closeOnEscape: true, reloadAfterSubmit: true, closeAfterEdit: true, left: 400, top: 300 },
{ closeOnEscape: true, reloadAfterSubmit: true, closeAfterAdd: true, left: 450, top: 300, width: 520 },
{ closeOnEscape: true, reloadAfterSubmit: true, left: 450, top: 300 });
});