我想在 MVC3 With Razor 上实现 Paging 和 Sorting 功能。
有内置功能吗？或者需要手动执行。
有人有这方面的文章吗？
public ActionResult Index(long parentObjectId, int parentObjectTypeId, int page = 0)
{
var varialbe= someRepository.GetAll(parentObjectId, parentObjectTypeId);
var paginated = new PaginatedSubList<someModel>(varialbe, page, ConfigRepository.PageSize, parentObjectId, parentObjectTypeId);
if (Request.IsAjaxRequest())
{
return PartialView(paginated );
}
return View(paginated);
}
然后
@Ajax.ActionLink("Next >>", "Index",
new { page = Model.PageIndex + 1, parentObjectId = Model.ParentObjectId, parentObjectTypeId = Model.ParentObjectTypeId },
new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "someList", LoadingElementId = "loading-div" })
@Ajax.ActionLink("<< Previous", "Index",
new { page = Model.PageIndex - 1, parentObjectId = Model.ParentObjectId, parentObjectTypeId = Model.ParentObjectTypeId },
new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "someList", LoadingElementId = "loading-div" })
和分页子列表
public class PaginatedSubList<T> : PaginatedList<T>
{
#region Custom Properties
public long ParentObjectId { get; set; }
public int ParentObjectTypeId { get; set; }
#endregion
public PaginatedSubList(IQueryable<T> source, int pageIndex, int pageSize, long parentObjectId, int parentObjectTypeId)
: base(source, pageIndex, pageSize)
{
ParentObjectId = parentObjectId;
ParentObjectTypeId = parentObjectTypeId;
}
}
public ActionResult Index()
{
try
{
ViewBag.SiteMaster = objReportManager.GetSites();
ViewBag.Status = objReportManager.GetTransactionStatus();
logger.Info("ReconController : Index method end and return view");
return View();
}
catch (Exception ex)
{
logger.Error(" ReportsController : Index method error", ex);
throw;
}
}
public ActionResult GetReconReport(string StartDate, string EndDate, string TransactionStatus, string SiteStatus, string SiteOrderID, string TransactionId, string SiteCode, string page, string rows, string sord, string sidx)
{
try
{
logger.Info(" ReconController : GetReconReport method started ");
int totalCount = 0;
List<ReconReportTransactionInfo> dataList = objReconReportMgr.ReadReconReport(StartDate, EndDate, TransactionStatus, SiteStatus, SiteOrderID, TransactionId, SiteCode,
sidx, sord, Convert.ToInt32(page ?? "1") - 1, Convert.ToInt32(rows ?? "1"), WebSession.UserID, ref totalCount);
logger.DebugFormat("[" + dataList.Count + "] ReconController : GetReconReport method and Total {0} records found for ReconReport.");
var data = new
{
total = (totalCount + Convert.ToInt32(rows) - 1) / Convert.ToInt32(rows),
page = page.ConvertTo<int>(1),
records = totalCount,
rows = (from recon in dataList
select new
{
id = recon.TransactionID,
cell = new string[] {
recon.TransactionStatus,
recon.SiteStatus,
Convert.ToString(recon.TransactionID),
recon.ReferenceNo,
recon.SiteOrderID,
recon.SiteCode,
recon.TransactionStatusImage,
recon.SiteStatusImage,
Convert.ToString(recon.DateCreated)
}
}
).ToArray()
};
logger.Info(" ReconController : GetReconReport method end and return json ");
return Json(data, JsonRequestBehavior.AllowGet);
}
catch (Exception ex)
{
logger.Error(" ReconController : GetReconReport method error", ex);
throw;
}
}
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
//REPORTS GRID
$(document).ready(function () {
$.jgrid.formatter.integer = { thousandsSeparator: "" };
$("#btnFilter").button();
$("#dataList").jqGrid
({
this is url to set controller/action
**// url: "/Recon/GetReconReport",**
datatype: "json",
colNames: ['Transaction Status', 'Site Status', 'Transaction ID', 'Reference No', 'Site Order ID', 'Site Code', 'TransactionStatusImage', 'SiteStatusImage', 'Transaction Date', 'Actions'],
colModel: [{ name: 'TransactionStatus', index: 'TransactionStatus', width: 30, search: false, align: 'center' },
{ name: 'SiteStatus', index: 'SiteStatus', width: 30, search: false, align: 'center' },
{ name: 'TransactionID', index: 'TransactionID', width: 35, align: 'center' },
{ name: 'ReferenceNo', index: 'ReferenceNo', width: 50, hidden: false, search: false },
{ name: 'SiteOrderID', index: 'SiteOrderID', width: 50, hidden: false, search: false },
{ name: 'SiteCode', index: 'SiteCode', width: 20, search: false },
{ name: 'TransactionStatusImage', index: 'TransactionStatusImage', width: 35, search: false, hidden: true },
{ name: 'SiteStatusImage', index: 'SiteStatusImage', width: 35, search: false, align: 'center', hidden: true },
{ name: 'DateCreated', index: 'DateCreated', width: 40, search: false, sortable: true, formatter: "datetime", formatoptions: { srcformat: "d/m/Y H:i A", newformat: "ShortDate"} },
{ name: 'Actions', index: 'Actions', width: 20, align: 'center', hidden: true, search: false, sortable: false}],
rowNum: 20,
rowList: [10, 20, 50],
width: 1000,
rownumbers: true,
rownumWidth: 30,
multiselect: false,
viewrecords: true,
height: 400,
scrolling: true,
shrinktofit: true,
sortname: 'DateCreated',
sortorder: "desc",
pager: '#pager',
subGrid: true,
caption: "Reconciliation Report",
subGridRowExpanded: function (subgrid_id, row_id) {
var subgrid_table_id;
subgrid_table_id = subgrid_id + "_t";
$("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table>");
jQuery("#" + subgrid_table_id).jqGrid({
url: "Recon/GetTransactioPayment?TransactionID=" + row_id,
datatype: "json",
colNames: ['Payment Status', 'Processor Status', 'Transaction ID', 'Payment ID', 'Payment Mode', 'Processor', 'PaymentStatusImage', 'ProcessorStatusImage', 'Payment Date'],
colModel: [{ name: "PaymentStatus", index: "PaymentStatus", width: 120, align: 'center', sortable: false },
{ name: "ProcessorStatus", index: "ProcessorStatus", width: 120, align: 'center', sortable: false },
{ name: "TransactionID", index: "TransactionID", width: 60, hidden: true },
{ name: "PaymentID", index: "PaymentID", width: 100, key: true },
{ name: "PaymentMode", index: "PaymentMode", width: 100 },
{ name: "Processor", index: "Processor", width: 200 },
{ name: "PaymentStatusImage", index: "PaymentStatusImage", hidden: true },
{ name: "ProcessorStatusImage", index: "ProcessorStatusImage", hidden: true },
{ name: "DateCreated", index: "DateCreated", width: 140 }
],
sortname: 'DateCreated',
sortorder: "desc",
height: '100%',
width: 1100,![enter image description here][1]
gridComplete: function () {
var gridObj = jQuery("#" + subgrid_table_id);
var ids = gridObj.jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
var cl = ids[i];
var ret = gridObj.jqGrid('getRowData', cl);
var subGridPaymentStatus;
var subGridProcessorStatus;
var subGridPaymentStatus = "<img src=" + "@ViewBag.ImagePath" + "/" + ret.PaymentStatusImage + " alt='S' title='" + ret.PaymentStatus + "'>";
if (ret.ProcessorStatus == '-N/A-') {
subGridProcessorStatus = "<img src=../../Content/images/NoStatus.png alt='S' title='-N/A-' />";
}
else {
subGridProcessorStatus = "<img src=" + "@ViewBag.ImagePath" + "/" + ret.ProcessorStatusImage + " alt='S' title='" + ret.ProcessorStatus + "'>";
}
gridObj.jqGrid('setRowData', cl, { PaymentStatus: subGridPaymentStatus, ProcessorStatus: subGridProcessorStatus });
}
}
});
},
gridComplete: function () {
var ids = jQuery("#dataList").jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
var cl = ids[i];
var ret = jQuery("#dataList").jqGrid('getRowData', cl);
var siteStatus;
var trsStatus = "<img src=" + "@ViewBag.ImagePath" + "/" + ret.TransactionStatusImage + " alt='S' title='" + ret.TransactionStatus + "'>"
if (ret.SiteStatus == '-N/A-') {
siteStatus = "<img src=../../Content/images/NoStatus.png alt='S' title='-N/A-' />";
}
else {
siteStatus = "<img src=" + "@ViewBag.ImagePath" + "/" + ret.SiteStatusImage + " alt='S' title='" + ret.SiteStatus + "'>"
}
jQuery("#dataList").jqGrid('setRowData', cl, { TransactionStatus: trsStatus, SiteStatus: siteStatus });
}
}
}).navGrid("#pager",
{ edit: false, add: false, del: false, search: false },
{}, {}, {},
{
caption: "Search...",
Find: "Filter",
Reset: "Reset",
sopt: ['eq']
})
.navButtonAdd('#pager', {
caption: "Export to Excel ",
buttonicon: "ui-icon-add",
onClickButton: function () {
ExportToExcel();
},
position: "last"
});