jqgrid - 网格不会填充在 free-jqgrid 中
问题描述
我无法让网格填充我的数据。显示了正确的行数,但一切都是空的(在我的例子中是 8 个空行)。我正在使用无 jqGrid 4.15.5、jQueryUI 1.21.1、jQuery 3.5.1。
有什么简单的我做错了吗?
一些对我很重要的事情:
- loadonce: true (这样我一次得到我的数据集并从那里进行客户端排序)
- 强制客户端排序:真
此外,我已经看到了寻呼机的不同解决方案,所以我不确定我是否正确地做到了这一点。据我了解,对于这个版本的 jqGrid,只需设置 pager: true 就足够了。
控制器动作:
public IActionResult GridData(string sidx, string sord, int page, int rows)
{
int pageIndex = page - 1;
int pageSize = rows;
List<SubCampaignData> subCampaignData = new List<SubCampaignData>();
subCampaignData = database.SubCampaignData
.Include(scd => scd.ContentPriority)
.Include(scd => scd.DataSources)
.Include(scd => scd.DeliveryMethod)
.Include(scd => scd.DeliveryPriority)
.Include(scd => scd.Contacts)
.ThenInclude(c => c.Role)
.ToList();
var sortColumn = typeof(SubCampaignData).GetProperty(sidx);
if (sord.ToUpper() == "ASC")
{
subCampaignData = subCampaignData.OrderBy(scd => sortColumn.GetValue(scd, null)).ToList();
}
else
{
subCampaignData = subCampaignData.OrderByDescending(scd => sortColumn.GetValue(scd, null)).ToList();
}
var gridData = subCampaignData.Select(scd => new
{
Campaign = scd.Campaign,
SubCampaign = scd.SubCampaign,
BulkCampaignName = scd.BulkCampaignName,
DeliveryMethodName = scd.DeliveryMethod.DeliveryMethodName,
AutomationTriggerName = scd.AutomationTriggerName,
MasterDataExtension = scd.MasterDataExtension,
Purpose = scd.Purpose,
Active = scd.Active.ToString(),
FailureContactName = string.Join(';', scd.Contacts.Where(c => c.Role.RoleName.ToUpper() == "FAILURE CONTACT").Select(c => c.Name).ToList()),
DeliveryPriorityName = scd.DeliveryPriority.PriorityName,
ContentPriorityName = scd.ContentPriority.PriorityName,
EscalateAfter = scd.EscalateAfter,
ClientName = string.Join(';', scd.DataSources.Select(ds => ds.ClientName).ToList()),
SourceJob = scd.SourceJob,
MainframeFileName = scd.MainframeFileName,
AggregationJob = scd.AggregationJob,
AggregationRunTime = scd.AggregationRunTime,
SendTime = scd.SendTime,
RunFrequency = scd.RunFrequency,
RunDays = scd.RunDays,
RunMonths = scd.RunMonths,
SendPend = scd.SendPend,
SendPendDelay = scd.SendPendDelay,
SendPendReason = scd.SendPendReason,
RegressionScripts = scd.RegressionScripts.ToString(),
ConfirmedActiveDate = FormatNullableDateTime(scd.ConfirmedActiveDate),
StartDate = FormatNullableDateTime(scd.StartDate),
Resend = scd.Resend,
ResendAbility = scd.ResendAbility.ToString(),
RecreateAbility = scd.RecreateAbility.ToString(),
ResendRecreateDetails = scd.ResendRecreateDetails,
BusinessOwnerName = string.Join(';', scd.Contacts.Where(c => c.Role.RoleName.ToUpper() == "BUSINESS OWNER").Select(c => c.Name).ToList()),
BusinessSponsorName = string.Join(';', scd.Contacts.Where(c => c.Role.RoleName.ToUpper() == "BUSINESS SPONSOR").Select(c => c.Name).ToList()),
BusinessSponsorEmailAddress = string.Join(';', scd.Contacts.Where(c => c.Role.RoleName.ToUpper() == "BUSINESS SPONSOR").Select(c => c.EmailAddress).ToList()),
BusinessSponsorConfirmedDate = string.Join(';', FormatNullableDateTimes(scd.Contacts.Where(c => c.Role.RoleName.ToUpper() == "BUSINESS SPONSOR").Select(c => c.ConfirmedDate).ToList())),
FailureContactEmailAddress = string.Join(';', scd.Contacts.Where(c => c.Role.RoleName.ToUpper() == "FAILURE CONTACT").Select(c => c.EmailAddress).ToList()),
FailureContactConfirmedDate = string.Join(';', FormatNullableDateTimes(scd.Contacts.Where(c => c.Role.RoleName.ToUpper() == "FAILURE CONTACT").Select(c => c.ConfirmedDate).ToList())),
SmeAnalystName = string.Join(';', scd.Contacts.Where(c => c.Role.RoleName.ToUpper() == "SME/ANALYST").Select(c => c.Name).ToList()),
SmeAnalystEmailAddress = string.Join(';', scd.Contacts.Where(c => c.Role.RoleName.ToUpper() == "SME/ANALYST").Select(c => c.EmailAddress).ToList()),
SmeAnalystConfirmedDate = string.Join(';', FormatNullableDateTimes(scd.Contacts.Where(c => c.Role.RoleName.ToUpper() == "SME/ANALYST").Select(c => c.ConfirmedDate).ToList())),
}).ToArray();
return Json(gridData);
}
查看(网格功能):
$(function () {
"use strict";
var mydata = [
{ id: "10", campaign: "Agent AutoReply Emails", subcampaign: "FAO_Agent_Inhouse_SoldQuote", commdeliverycampaign: "", deliverymethod: "Triggered Send", automationtriggeredsend: "Agent_AutoReply", masterdataextension: "Agent_AutoReply", purpose: "Sent to Agency when PGR has written new business for a customer on the Agency's behalf", active: "true", failurecontact: "", deliverypriority: "Medium", contentpriority: "Medium", escalateafter: "2", datasource: "Probill", sourcejob: "", mainframefile: "", inputfile: "", aggregationjob: "", aggregationruntime: "", sendtime: "Real-time", runfrequency: "Daily", rundays: "SMTWThFSa", runmonths: "JanFebMarAprMayJunJulAugSepOctNovDec", sendpend: "N", sendpenddelay: "", sendpendreason: "", regression: "false", confirmactivedate: "2020-07-22", startdate: "", resend: "", resendability: "false", recreateability: "true", resendcomments: "Can recreate the list of Agencies from a report for the date.", businessowner: "", businesssponsor: "Dan Merk;Patrick D Astolfo", sponsoremail: "Dan_Merk@progressive.com;Patrick_DAstolfo@progressive.com", sponsorconfirmdate: "2020-01-30", failureemail: "", failureconfirmdate: "", smeanalyst: "", smeanalystemail: "", smeanalystconfirmed: "", metadata: "" }
],
initDateEdit = function (elem, options) {
// we need get the value before changing the type
var orgValue = $(elem).val(), newformat,
cm = $(this).jqGrid("getColProp", options.name);
$(elem).attr("type", "date");
if ((Modernizr && !Modernizr.inputtypes.date) || $(elem).prop("type") !== "date") {
// if type="date" is not supported call jQuery UI datepicker
$(elem).css({ width: "8em" }).datepicker({
dateFormat: "yy-mm-dd",
autoSize: true,
changeYear: true,
changeMonth: true,
showButtonPanel: true,
showWeek: false
});
} else {
// convert date to ISO
if (orgValue !== "") {
newformat = cm.formatoptions != null && cm.formatoptions.newformat ?
cm.formatoptions.newformat :
$(this).jqGrid("getGridRes", "formatter.date.newformat");
$(elem).val($.jgrid.parseDate.call(this, newformat, orgValue, "yy-mm-dd"));
}
$(elem).css("width", "11em");
}
},
initDateSearch = function (elem) {
setTimeout(function () {
$(elem).datepicker({
dateFormat: "yy-mm-dd",
autoSize: true,
changeYear: true,
changeMonth: true,
showWeek: false,
showButtonPanel: true
});
}, 50);
},
numberTemplate = {
formatter: "number", align: "right", sorttype: "number",
editrules: { number: true, required: true },
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge", "nu", "nn", "in", "ni"] }
};
$("#list").jqGrid({
url: "/Home/GridData",
datatype: "json",
//data: mydata,
mtype: "GET",
colModel: [
{ name: "act", template: "actions", frozen: true },
{ name: "Campaign", label: "Campaign Name", width: 120, editable: false, frozen: true },
{ name: "SubCampaign", label: "SubCampaign Name", width: 141, editable: true, frozen: true },
{
name: "BulkCampaignName", label: "Bulk Campaign", width: 120,
editrules: { edithidden: true }, editable: true, hidden: true
},
{
name: "DeliveryMethodName", label: "Delivery Method", width: 120, formatter: "select",
formatoptions: { value: "Adhoc Bulk, Bulk, Bulk Text Messaging, Triggered Send, Triggered Text Messaging", defaultvalue: "Bulk" },
stype: "select",
searchoptions: { value: ":Any;Adhoc Bulk:Adhoc Bulk;Bulk:Bulk;Bulk Text Messaging:Bulk Text Messaging;Triggered Send:Triggered Send;Triggered Text Messaging:Triggered Text Messaging" },
editable: true
},
{ name: "AutomationTriggerName", label: "Automation/Triggered Send", width: 185, editable: true },
{ name: "MasterDataExtension", label: "Master Data Extension", width: 155, editable: true },
{ name: "Purpose", label: "Purpose", width: 155, editable: true },
{
name: "Active", label: "Active", width: 120, align: "center", formatter: "checkbox",
stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;true:Yes;false:No" },
editable: true,
edittype: "checkbox", editoptions: { value: "Yes:No", defaultValue: "Yes" }
},
{ name: "FailureContactName", label: "Failure Contact", width: 155, editable: true },
{
name: "DeliveryPriorityName", label: "Delivery Priority", width: 120, formatter: "select",
formatoptions: { value: "Low, Low-Medium, Medium, Medium-High, High", defaultvalue: "Medium" },
editable: true
},
{
name: "ContentPriorityName", label: "Content Priority", width: 120, formatter: "select",
formatoptions: { value: "Low, Low-Medium, Medium, Medium-High, High", defaultvalue: "Medium" },
editable: true
},
{ name: "EscalateAfter", label: "Escalate After (days)", width: 120, editable: true },
{ name: "ClientName", label: "Data Source", width: 100, editable: true },
{ name: "SourceJob", label: "Source Job", width: 120, editable: true },
{ name: "MainframeFileName", label: "Mainframe File", width: 120, editable: true },
{ name: "AggregationJob", label: "AggregationJob", width: 120, editable: true },
{ name: "AggregationRunTime", label: "Aggregation Run Time", width: 120, editable: true },
{ name: "SendTime", label: "Send Time", width: 120, editable: true },
{ name: "RunFrequency", label: "Run Frequency", width: 120, editable: true },
{ name: "RunDays", label: "Run Days", width: 120, editable: true },
{ name: "RunMonths", label: "Run Months", width: 120, editable: true },
{ name: "SendPend", label: "SendPend", width: 120, editable: true },
{ name: "SendPendDelay", label: "SendPend Delay", width: 120, editable: true },
{ name: "SendPendReason", label: "SendPend Reason", width: 120, editable: true },
{
name: "RegressionScripts", label: "Regression Scripts", width: 120, align: "center", formatter: "checkbox",
stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;true:Yes;false:No" },
editable: true,
edittype: "checkbox", editoptions: { value: "true:false", defaultValue: "false" }
},
{
name: "ConfirmedActiveDate", label: "Last Confirmed Active", width: 120, align: "center", sorttype: "date",
formatter: "date", formatoptions: { newformat: "Y-m-d" }, editable: true,
editoptions: { dataInit: initDateEdit },
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDateSearch }
},
{
name: "StartDate", label: "Start Date", width: 120, align: "center", sorttype: "date",
formatter: "date", formatoptions: { newformat: "Y-m-d" }, editable: true,
editoptions: { dataInit: initDateEdit },
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDateSearch }
},
{ name: "Resend", label: "Resend", width: 120, editable: true },
{
name: "ResendAbility", label: "Business Can Resend", width: 120, align: "center", formatter: "checkbox",
stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;true:Yes;false:No" },
editable: true,
edittype: "checkbox", editoptions: { value: "true:false", defaultValue: "false" }
},
{
name: "RecreateAbility", label: "Business Can Recreate", width: 120, align: "center", formatter: "checkbox",
stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;true:Yes;false:No" },
editable: true,
edittype: "checkbox", editoptions: { value: "true:false", defaultValue: "false" }
},
{ name: "ResendRecreateDetails", label: "Resend/Recreate Details", width: 120, editable: true },
{ name: "BusinessOwnerName", label: "Business Platform Owner", width: 120, editable: true },
{ name: "BusinessSponsorName", label: "Business Sponsor", width: 120, editable: true },
{ name: "BusinessSponsorEmailAddress", label: "Sponsor Email", width: 120, editable: true },
{
name: "BusinessSponsorConfirmedDate", label: "Sponsor Confirmed", width: 120, align: "center", sorttype: "date",
formatter: "date", formatoptions: { newformat: "Y-m-d" }, editable: true,
editoptions: { dataInit: initDateEdit },
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDateSearch }
},
{ name: "FailureContactEmailAddress", label: "Failure Email", width: 120, editable: true },
{
name: "FailureContactConfirmedDate", label: "Failure Confirmed", width: 120, align: "center", sorttype: "date",
formatter: "date", formatoptions: { newformat: "Y-m-d" }, editable: true,
editoptions: { dataInit: initDateEdit },
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDateSearch }
},
{ name: "SmeAnalystName", label: "SME/Analyst", width: 120, editable: true },
{ name: "SmeAnalystEmailAddress", label: "SME/Analyst Email", width: 120, editable: true },
{
name: "SmeAnalystConfirmedDate", label: "SME/Analyst Confirmed", width: 120, align: "center", sorttype: "date",
formatter: "date", formatoptions: { newformat: "Y-m-d" }, editable: true,
editoptions: { dataInit: initDateEdit },
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDateSearch }
}
],
loadonce: true,
forceClientSorting: true,
cmTemplate: { autoResizable: true },
autoResizing: { compact: false, adjustGridWidth: false },
shrinkToFit: false,
autowidth: true,
rownumbers: true,
ignoreCase: true,
height: "auto",
sortname: "Campaign",
sortorder: "asc",
threeStateSort: true,
sortable: true,
pager: true,
rowNum: 10,
viewrecords: true,
searching: {
defaultSearch: "cn"
},
multiSort: true,
formEditing: {
onclickSubmit: function (options, postdata, formOper) {
return {};
}
}
}).jqGrid("setFrozenColumns")
.jqGrid("navGrid", { add: true, edit: true, del: true })
.jqGrid("inlineNav", { add: false, edit: false })
.jqGrid("filterToolbar")
.jqGrid("gridResize");
});
解决方案
return Json(gridData);
Instead of the above code please place the below code.
int totalRecords = gridData.Count();
var totalPages = (int)Math.Ceiling((float)totalRecords / (float)rows);
var Data = new
{
total = totalPages,
page,
records = totalRecords,
rows = gridData
};
return Json(Data, JsonRequestBehavior.AllowGet);
推荐阅读
- git - 在已经存在的 gitlab 存储库中推送另一个项目
- docker - 识别 docker 主机名是否被传递或生成
- docker-compose - Spring Cloud Data Flow 微服务无法访问 Docker Compose Config Server
- angular - 角 | NgFor 显示数组内容
- java - MPAndroidChart - 长按显示 MarkerView
- javascript - JavaScript:将文本复制到剪贴板而不进行格式化
- html - 标签更改布局设计
- python - 使用 Apple Silicon M1 在 Docker 中出现 Discord.py 分段错误
- r - 如何创建和添加多个序列?
- javascript - 读取远程图像并在请求中返回