我的jqgrid表有两个问题， 首先，当您单击列标题时，它不会按升序或降序排序。
我遇到的问题是我想要将Num1和Num2相乘并在虚拟结果列中显示输出，如何对Num1和Num2进行mutilpy并在虚拟列中显示输出
我正在使用此示例How do I make a non database column in jqGrid?
这是我的代码。 我的结果列不显示Num1 x Num2
的任何结果 <!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.2/themes/redmond/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.5/css/ui.jqgrid.css" />
<style type="text/css">
html, body { font-size: 75%; }
</style>
<script type="text/ecmascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.5/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.5/js/jquery.jqGrid.src.js"></script>
<title>Jqgrid data </title>
</head>
<body>
<div style="margin-left:20px">
<table id="nplGrid"></table>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#nplGrid").jqGrid({
url: 'json/data-bcp2.json',
datatype: "json",
colModel: [
{ label: 'Id', name: 'Id', width: 145 },
{ label: 'Symbol', name: 'Symbol', width: 90 },
{ label: 'Quantity', name: 'Quantity', width: 100, align: "right" },
/*{ label: 'Value1',
name: 'Value1',
width: 80,
sorttype: 'number',
formatter: 'number',
align: 'right'
}, */
{ label: 'Price', name: 'Price', width: 180, sorttype: 'number' , align: "right",formatter: 'currency', formatoptions: { prefix: " $", suffix: " "}},
{ label: 'Value', name: 'Value', width: 180, sorttype: 'number', align: "right",formatter: 'currency', formatoptions: { prefix: " $", suffix: " "} },
{ label: 'Pledged', name: 'Pledged', width: 80, sorttype: 'integer' } ,
{ label: 'Num2', name: 'Num2', width: 80, formatter:'currency' },
{ label: 'Result', name: 'Result', width: 80,formatter:'currency',
formatter:function(cellvalue, options, rowObject) {
var amount = parseInt(rowObject.Num1,10),
tax = parseInt(rowObject.Num12,10);
return $.fmatter.util.NumberFormat(amount*tax,$.jgrid.formatter.currency);
}
}
],
gridview: true,
rownumbers: true,
sortname: "invdate",
viewrecords: true,
sortorder: "desc",
caption: "Just simple local grid",
height: "100%",
footerrow: true,
loadComplete: function () {
var $self = $(this),
sum = $self.jqGrid("getCol", "Price", false, "sum");
$self.jqGrid("footerData", "set", {invdate: "Total:", Price: sum});
sum1 = $self.jqGrid("getCol", "Value", false, "sum");
$self.jqGrid("footerData", "set", {invdate: "Total:", Value: sum1});
}
});
});
</script>
</body>
</html>
以下JSON数据：
{
"rows":[
{
"Id":"C14999",
"Symbol":"AA",
"Quantity":"10000000 ",
"Price":"2500000",
"Value":"2500000",
"Pledged":"Y",
"Num1":"4",
"Num2":"20"
},
{
"Id":"C14999",
"Symbol":"IRTX",
"Quantity":"253432250",
"Price":"3382000",
"Value":"857107.87",
"Pledged":"Y",
"Num1":"12",
"Num2":"31"
},
{
"Id":"C14999",
"Symbol":"MMM",
"Quantity":"143440000",
"Price":"100000",
"Value":"1434400",
"Pledged":"Y",
"Num1":"22",
"Num2":"20"
},
{
"Id":"C14999",
"Symbol":"FMCX",
"Quantity":"285657660",
"Price":"187125",
"Value":"62476901 ",
"Pledged":"N",
"Num1":"232",
"Num2":"20"
},
{
"Id":"C14999",
"Symbol":"CEB",
"Quantity":"1228000000",
"Price":"949000",
"Value":"116537200 ",
"Pledged":"Y",
"Num1":"2",
"Num2":"10"
},
{
"Id":"C23456",
"Symbol":"VETF",
"Quantity":"13984000000",
"Price":"256000",
"Value":"357990400",
"Pledged":"Y",
"Num1":"14",
"Num2":"20"
}
]
}
答案 0 :(得分：1)
它看起来像您之前的问题，但数量仍然包含逗号，3列数量，值和值中的值包含不需要的空格。所有整数和浮点数都作为字符串而不是数字包含在JSON中。它会产生其他问题并增加传输数据的大小。将数字序列化为数字是切实可行的。我的意思是返回项目
会更好{
"Id":"C14999",
"Symbol":"AA",
"Quantity":" 1,000.0000 ",
"Price":" 25.00000 ",
"Value":" 25000.00 ",
"Pledged":"Y",
"Num1":"4",
"Num2":"20"
}
像
{
"Id":"C14999",
"Symbol":"AA",
"Quantity":1000.0000,
"Price":25.00000,
"Value":25000.00,
"Pledged":"Y",
"Num1":4,
"Num2":20
}
顺便说一下，您可以在服务器端使用的大多数标准序列化库将自动删除数字小数点后不需要的0值。因为可以在jqGrid的beforeProcessing回调中进行更改，但效果会更差。
现在关于排序的问题。从服务器返回的数据格式看起来很奇怪。就像
{
"rows": [
{...},
{...},
...
{...}
]
}
而不仅仅是
[
{...},
{...},
...
{...}
]
无论如何，回复都不会提供有关总页数的任何信息。因此，我可以假设您没有实现任何服务器端排序，分页或过滤数据。您应该在案例中使用loadonce: true选项。它通知jqGrid保存返回的数据本地（作为保存在内部参数data和_index中的JavaScript对象）。第一次加载后，jqGrid会将初始datatype更改为"local"，并且所有下一个分页和排序请求都将在本地完成，而不与服务器进行通信。
您使用sortname: "invdate", sortorder: "desc"选项，但网格中不存在名称为invdate的列。
我写了我的建议（在我之前的问题的答案中）使用CDN的免费jqGrid而不是从我的服务器加载的旧jqGrid。免费的jqGrid允许指定forceClientSorting: true选项，这意味着客户端在第一次加载时对数据进行排序。
我可以继续，但我创建了演示https://jsfiddle.net/OlegKi/mnf72611/3/。我认为它应该接近你想要实现的目标。