JQGrid loadonce：真正的排序不起作用
JQGrid loadonce: true sort not working
我对 javascript、jqgrid 和 JSON 数据比较陌生。我一直在这里搜索并设法弄清楚了很多（谢谢！）。但是在已经查看了所有类似的问题之后，恐怕我仍然无法弄清楚我目前正在处理的网格还没有完全正确的地方。
我可以使用 ASP 程序中的查询生成的 JSON 数据填充网格，但是如果我将网格设置为 loadonce: true 因为我想 sort/re-sort 初始检索后本地的网格数据，当单击指向 re-sort 网格数据的列标题时，我 "lose" 我所有的网格数据。
我有一个名为 getsalesdata.asp 的程序可以生成以下格式的文本：
{
"total": "1",
"page": "1",
"records": "2",
"rows": [
{
"RowID": "1",
"ParentCustName": "ABCCompany",
"YTDSales": "11173.76",
"YTDBudget": "11789.84",
"YTDDiff": "-616.08",
"YTDDiffPct": "95",
"Sales3": "11173.76",
"Budget3": "11789.84",
"Diff3": "-616.08",
"Diff3Pct": "95",
"FYearSales": "11173.76",
"FYearBudget": "11789.84",
"FYearDiff": "-616.08",
"FYearDiffPct": "95"
},
{
"RowID": "2",
"ParentCustName": "XYZ Company",
"YTDSales": "51395.46",
"YTDBudget": "35147.52",
"YTDDiff": "16247.94",
"YTDDiffPct": "146",
"Sales3": "51395.46",
"Budget3": "43934.4",
"Diff3": "7461.06",
"Diff3Pct": "117",
"FYearSales": "51395.46",
"FYearBudget": "57114.72",
"FYearDiff": "-5719.26000000001",
"FYearDiffPct": "90"
}
]
}
我已经使用在线工具来确保数据是有效的 JSON 字符串，而且我不仅仅是遗漏了一些引号或其他东西，所以这似乎不是问题所在。
任何人都可以指出正确的方向来解决我的问题吗？
我的 JQGrid 代码如下所示：
$(document).ready(function () {
jQuery("#customer_grid").jqGrid({
datatype: "json",
url: "getsalesdata.asp",
colNames: ["", "<b>Customer</b>", "<b>Sales</b>", "<b>Budget</b>", "<b>Difference</b>", "<b>% of Goal</b>", "<b>Sales + Forecast</b>", "<b>Budget</b>", "<b>Difference</b>", "<b>% of Goal</b>", "<b>Sales + Forecast</b>", "<b>Budget</b>", "<b>Difference</b>", "<b>% of Goal</b>", ""],
colModel: [
{ name: "ID", hidden: true, frozen: true, index: "ID" },
{ name: "ParentCustName", width: 225, sorttype: "text", sortable: true, frozen: true },
{ name: "YTDSales", formatter:'currency', sorttype: "number", width: 140, align: "right", sortable: true },
{ name: "YTDBudget", formatter:'currency', width: 140, sorttype: "number", align: "right", sortable: true },
{ name: "YTDDiff", formatter: 'currency', width: 140, sorttype: "number", align: "right", sortable: true,
cellattr: function (rowId, val, rawObject) {
if (parseFloat(val) < 0) {
return " class='myAlertRowClass'";
}
if (parseFloat(val) > 0) {
return " class='myGoalRowClass'";
}
}
},
{ name: "YTDDiffPct", width: 70, sorttype: "int", align: "right",
cellattr: function (rowId, val, rawObject) {
if (parseFloat(val) < 85) {
return " class='myAlertRowClass'";
}
if (parseFloat(val) > 85) {
return " class='myGoalRowClass'";
}
}
},
{ name: "Sales3", formatter:'currency', width: 140, sorttype: "number", align: "right" },
{ name: "Budget3", formatter:'currency', width: 140, sorttype: "number", align: "right" },
{ name: "Diff3", formatter: 'currency', width: 140, sorttype: "number", align: "right", sortable: true,
cellattr: function (rowId, val, rawObject) {
if (parseFloat(val) < 0) {
return " class='myAlertRowClass'";
}
if (parseFloat(val) > 0) {
return " class='myGoalRowClass'";
}
}
},
{ name: "Diff3Pct", width: 70, sorttype: "int", align: "right",
cellattr: function (rowId, val, rawObject) {
if (parseFloat(val) < 85) {
return " class='myAlertRowClass'";
}
if (parseFloat(val) > 85) {
return " class='myGoalRowClass'";
}
}
},
{ name: "FYearSales", formatter:'currency', width: 140, sorttype: "number", align: "right" },
{ name: "FYearBudget", formatter:'currency', width: 140, sorttype: "number", align: "right" },
{ name: "FYearDiff", formatter: 'currency', width: 140, sorttype: "number", align: "right", sortable: true,
cellattr: function (rowId, val, rawObject) {
if (parseFloat(val) < 0) {
return " class='myAlertRowClass'";
}
if (parseFloat(val) > 0) {
return " class='myGoalRowClass'";
}
}
},
{ name: "FYearDiffPct", width: 70, sortype: "int", align: "right",
cellattr: function (rowId, val, rawObject) {
if (parseFloat(val) < 85) {
return " class='myAlertRowClass'";
}
if (parseFloat(val) > 85) {
return " class='myGoalRowClass'";
}
}
},
{ name: "Ghost", width: 20}
],
rowNum: "records",
jsonReader: {
repeatitems: false,
id: "RowID"
},
gridview: true,
footerrow: true,
loadComplete: function(){
var $self = $(this);
sumSales = $self.jqGrid("getCol", "YTDSales", true, "sum");
sumBudget = $self.jqGrid("getCol", "YTDBudget", false, "sum");
sumDiff = $self.jqGrid("getCol", "YTDDiff", false, "sum");
sumSales3 = $self.jqGrid("getCol", "Sales3", false, "sum");
sumBudget3 = $self.jqGrid("getCol", "Budget3", false, "sum");
sumDiff3 = $self.jqGrid("getCol", "Diff3", false, "sum");
sumFYearSales = $self.jqGrid("getCol", "FYearSales", false, "sum");
sumFYearBudget = $self.jqGrid("getCol", "FYearBudget", false, "sum");
sumFYearDiff = $self.jqGrid("getCol", "FYearDiff", false, "sum");
$self.jqGrid("footerData", "set", { ParentCustName: "Grand Totals:", YTDSales: sumSales, YTDBudget: sumBudget, YTDDiff: sumDiff, Sales3: sumSales3, Budget3: sumBudget3, Diff3: sumDiff3, FYearSales: sumFYearSales, FYearBudget: sumFYearBudget, FYearDiff: sumFYearDiff });
},
altRows: true,
altclass: "myAltRowClass",
autoencode: true,
loadonce: true,
sortorder: "asc",
sortable: true,
sortname: "ParentCustName",
viewrecords: true,
emptyrecords: "No records to view...",
caption: "Customer Sales Performance Summary",
loadtext: "Loading data, please wait...",
height: "auto",
onSelectRow: function (RowID) {
var rowId = $('#customer_grid').jqGrid('getGridParam', 'selrow');
var colData = $('#customer_grid').jqGrid('getCell', rowId, 'ParentCustName');
var ParentName = colData.replace("(Tooling)", "");
var ParentStr = "SalesPerformance2New.asp?Parent=" + (ParentName);
window.location.href = ParentStr;
}
});
如有任何帮助，我们将不胜感激！
我调试了你的代码，发现非常简单但有点有趣的原因：你使用 rowNum: "records"，但 rowNum 必须是整数值。因为网格没有 pager 或 toppager: true 参数，所以我建议为 rowNum 使用任何足够大的值，例如 rowNum: 10000.
将 rowNum: "records" 替换为 rowNum: 10000 应该可以解决您的主要问题。
此外，您应该将代码中的一些 ; 更改为 , 以 loadComplete 声明您使用的变量 sumSales、sumBudget 和其他变量.代码如下所示：
loadComplete: function(){
var $self = $(this),
sumSales = $self.jqGrid("getCol", "YTDSales", true, "sum"),
sumBudget = $self.jqGrid("getCol", "YTDBudget", false, "sum"),
sumDiff = $self.jqGrid("getCol", "YTDDiff", false, "sum"),
sumSales3 = $self.jqGrid("getCol", "Sales3", false, "sum"),
sumBudget3 = $self.jqGrid("getCol", "Budget3", false, "sum"),
sumDiff3 = $self.jqGrid("getCol", "Diff3", false, "sum"),
sumFYearSales = $self.jqGrid("getCol", "FYearSales", false, "sum"),
sumFYearBudget = $self.jqGrid("getCol", "FYearBudget", false, "sum"),
sumFYearDiff = $self.jqGrid("getCol", "FYearDiff", false, "sum");
$self.jqGrid("footerData", "set", { ParentCustName: "Grand Totals:", YTDSales: sumSales, YTDBudget: sumBudget, YTDDiff: sumDiff, Sales3: sumSales3, Budget3: sumBudget3, Diff3: sumDiff3, FYearSales: sumFYearSales, FYearBudget: sumFYearBudget, FYearDiff: sumFYearDiff });
}
我对 javascript、jqgrid 和 JSON 数据比较陌生。我一直在这里搜索并设法弄清楚了很多（谢谢！）。但是在已经查看了所有类似的问题之后，恐怕我仍然无法弄清楚我目前正在处理的网格还没有完全正确的地方。
我可以使用 ASP 程序中的查询生成的 JSON 数据填充网格，但是如果我将网格设置为 loadonce: true 因为我想 sort/re-sort 初始检索后本地的网格数据，当单击指向 re-sort 网格数据的列标题时，我 "lose" 我所有的网格数据。
我有一个名为 getsalesdata.asp 的程序可以生成以下格式的文本：
{
"total": "1",
"page": "1",
"records": "2",
"rows": [
{
"RowID": "1",
"ParentCustName": "ABCCompany",
"YTDSales": "11173.76",
"YTDBudget": "11789.84",
"YTDDiff": "-616.08",
"YTDDiffPct": "95",
"Sales3": "11173.76",
"Budget3": "11789.84",
"Diff3": "-616.08",
"Diff3Pct": "95",
"FYearSales": "11173.76",
"FYearBudget": "11789.84",
"FYearDiff": "-616.08",
"FYearDiffPct": "95"
},
{
"RowID": "2",
"ParentCustName": "XYZ Company",
"YTDSales": "51395.46",
"YTDBudget": "35147.52",
"YTDDiff": "16247.94",
"YTDDiffPct": "146",
"Sales3": "51395.46",
"Budget3": "43934.4",
"Diff3": "7461.06",
"Diff3Pct": "117",
"FYearSales": "51395.46",
"FYearBudget": "57114.72",
"FYearDiff": "-5719.26000000001",
"FYearDiffPct": "90"
}
]
}
我已经使用在线工具来确保数据是有效的 JSON 字符串，而且我不仅仅是遗漏了一些引号或其他东西，所以这似乎不是问题所在。
任何人都可以指出正确的方向来解决我的问题吗？
我的 JQGrid 代码如下所示：
$(document).ready(function () {
jQuery("#customer_grid").jqGrid({
datatype: "json",
url: "getsalesdata.asp",
colNames: ["", "<b>Customer</b>", "<b>Sales</b>", "<b>Budget</b>", "<b>Difference</b>", "<b>% of Goal</b>", "<b>Sales + Forecast</b>", "<b>Budget</b>", "<b>Difference</b>", "<b>% of Goal</b>", "<b>Sales + Forecast</b>", "<b>Budget</b>", "<b>Difference</b>", "<b>% of Goal</b>", ""],
colModel: [
{ name: "ID", hidden: true, frozen: true, index: "ID" },
{ name: "ParentCustName", width: 225, sorttype: "text", sortable: true, frozen: true },
{ name: "YTDSales", formatter:'currency', sorttype: "number", width: 140, align: "right", sortable: true },
{ name: "YTDBudget", formatter:'currency', width: 140, sorttype: "number", align: "right", sortable: true },
{ name: "YTDDiff", formatter: 'currency', width: 140, sorttype: "number", align: "right", sortable: true,
cellattr: function (rowId, val, rawObject) {
if (parseFloat(val) < 0) {
return " class='myAlertRowClass'";
}
if (parseFloat(val) > 0) {
return " class='myGoalRowClass'";
}
}
},
{ name: "YTDDiffPct", width: 70, sorttype: "int", align: "right",
cellattr: function (rowId, val, rawObject) {
if (parseFloat(val) < 85) {
return " class='myAlertRowClass'";
}
if (parseFloat(val) > 85) {
return " class='myGoalRowClass'";
}
}
},
{ name: "Sales3", formatter:'currency', width: 140, sorttype: "number", align: "right" },
{ name: "Budget3", formatter:'currency', width: 140, sorttype: "number", align: "right" },
{ name: "Diff3", formatter: 'currency', width: 140, sorttype: "number", align: "right", sortable: true,
cellattr: function (rowId, val, rawObject) {
if (parseFloat(val) < 0) {
return " class='myAlertRowClass'";
}
if (parseFloat(val) > 0) {
return " class='myGoalRowClass'";
}
}
},
{ name: "Diff3Pct", width: 70, sorttype: "int", align: "right",
cellattr: function (rowId, val, rawObject) {
if (parseFloat(val) < 85) {
return " class='myAlertRowClass'";
}
if (parseFloat(val) > 85) {
return " class='myGoalRowClass'";
}
}
},
{ name: "FYearSales", formatter:'currency', width: 140, sorttype: "number", align: "right" },
{ name: "FYearBudget", formatter:'currency', width: 140, sorttype: "number", align: "right" },
{ name: "FYearDiff", formatter: 'currency', width: 140, sorttype: "number", align: "right", sortable: true,
cellattr: function (rowId, val, rawObject) {
if (parseFloat(val) < 0) {
return " class='myAlertRowClass'";
}
if (parseFloat(val) > 0) {
return " class='myGoalRowClass'";
}
}
},
{ name: "FYearDiffPct", width: 70, sortype: "int", align: "right",
cellattr: function (rowId, val, rawObject) {
if (parseFloat(val) < 85) {
return " class='myAlertRowClass'";
}
if (parseFloat(val) > 85) {
return " class='myGoalRowClass'";
}
}
},
{ name: "Ghost", width: 20}
],
rowNum: "records",
jsonReader: {
repeatitems: false,
id: "RowID"
},
gridview: true,
footerrow: true,
loadComplete: function(){
var $self = $(this);
sumSales = $self.jqGrid("getCol", "YTDSales", true, "sum");
sumBudget = $self.jqGrid("getCol", "YTDBudget", false, "sum");
sumDiff = $self.jqGrid("getCol", "YTDDiff", false, "sum");
sumSales3 = $self.jqGrid("getCol", "Sales3", false, "sum");
sumBudget3 = $self.jqGrid("getCol", "Budget3", false, "sum");
sumDiff3 = $self.jqGrid("getCol", "Diff3", false, "sum");
sumFYearSales = $self.jqGrid("getCol", "FYearSales", false, "sum");
sumFYearBudget = $self.jqGrid("getCol", "FYearBudget", false, "sum");
sumFYearDiff = $self.jqGrid("getCol", "FYearDiff", false, "sum");
$self.jqGrid("footerData", "set", { ParentCustName: "Grand Totals:", YTDSales: sumSales, YTDBudget: sumBudget, YTDDiff: sumDiff, Sales3: sumSales3, Budget3: sumBudget3, Diff3: sumDiff3, FYearSales: sumFYearSales, FYearBudget: sumFYearBudget, FYearDiff: sumFYearDiff });
},
altRows: true,
altclass: "myAltRowClass",
autoencode: true,
loadonce: true,
sortorder: "asc",
sortable: true,
sortname: "ParentCustName",
viewrecords: true,
emptyrecords: "No records to view...",
caption: "Customer Sales Performance Summary",
loadtext: "Loading data, please wait...",
height: "auto",
onSelectRow: function (RowID) {
var rowId = $('#customer_grid').jqGrid('getGridParam', 'selrow');
var colData = $('#customer_grid').jqGrid('getCell', rowId, 'ParentCustName');
var ParentName = colData.replace("(Tooling)", "");
var ParentStr = "SalesPerformance2New.asp?Parent=" + (ParentName);
window.location.href = ParentStr;
}
});
如有任何帮助，我们将不胜感激！
我调试了你的代码，发现非常简单但有点有趣的原因：你使用 rowNum: "records"，但 rowNum 必须是整数值。因为网格没有 pager 或 toppager: true 参数，所以我建议为 rowNum 使用任何足够大的值，例如 rowNum: 10000.
将 rowNum: "records" 替换为 rowNum: 10000 应该可以解决您的主要问题。
此外，您应该将代码中的一些 ; 更改为 , 以 loadComplete 声明您使用的变量 sumSales、sumBudget 和其他变量.代码如下所示：
loadComplete: function(){
var $self = $(this),
sumSales = $self.jqGrid("getCol", "YTDSales", true, "sum"),
sumBudget = $self.jqGrid("getCol", "YTDBudget", false, "sum"),
sumDiff = $self.jqGrid("getCol", "YTDDiff", false, "sum"),
sumSales3 = $self.jqGrid("getCol", "Sales3", false, "sum"),
sumBudget3 = $self.jqGrid("getCol", "Budget3", false, "sum"),
sumDiff3 = $self.jqGrid("getCol", "Diff3", false, "sum"),
sumFYearSales = $self.jqGrid("getCol", "FYearSales", false, "sum"),
sumFYearBudget = $self.jqGrid("getCol", "FYearBudget", false, "sum"),
sumFYearDiff = $self.jqGrid("getCol", "FYearDiff", false, "sum");
$self.jqGrid("footerData", "set", { ParentCustName: "Grand Totals:", YTDSales: sumSales, YTDBudget: sumBudget, YTDDiff: sumDiff, Sales3: sumSales3, Budget3: sumBudget3, Diff3: sumDiff3, FYearSales: sumFYearSales, FYearBudget: sumFYearBudget, FYearDiff: sumFYearDiff });
}