如何在jqgrid中使用页脚数据乘以行和求和

Question

我有一个名为价格和价值的列。我正在使用页脚 jqgrid 的值。

例如这是 2 列价格和价值

Price      
.00000
.82000
.00000
.87125
 .49000
......


Value 
,000.00 
,107.87
,344.00
,769.01
,372.00 
...

如何获得 Price 和 Value 行的总和使用页脚数据。

另外，如何将每个 row num1 x row num2 的值相乘并显示在 Num1xNum2

中

即

Num1  Num2   RESULT
   4     20      80

这是我的代码。注意：如果我使用 'sum' 它会给我 'NaN' 值

 <!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":" 1,000.0000 ",
                "Price":" .00000 ",
                "Value":" ,000.00 ",
                "Pledged":"Y",
                "Num1":"4",
                "Num2":"20",
                "RESULT":""
              },
              {
                "Id":"C14999",
                "Symbol":"IRTX",
                "Quantity":" 25,343.2250 ",
                "Price":" 000 ",
                "Value":" 7,107.87 ",
                "Pledged":"Y",
                "Num1":"12",
                "Num2":"31",
                "RESULT":""
              },
              {
                "Id":"C14999",
                "Symbol":"MMM",
                "Quantity":" 14,344.0000 ",
                "Price":" .00000 ",
                "Value":" ,344.00 ",
                "Pledged":"Y",
                "Num1":"22",
                "Num2":"20",
                "RESULT":""
              },
              {
                "Id":"C14999",
                "Symbol":"FMCX",
                "Quantity":" 28,565.7660 ",
                "Price":" .87125 ",
                "Value":" ,769.01 ",
                "Pledged":"N",
                "Num1":"232",
                "Num2":"20"  ,
                "RESULT":""
              },
              {
                "Id":"C14999",
                "Symbol":"CEB",
                "Quantity":" 122,800.0000 ",
                "Price":" .49000 ",
                "Value":" ,372.00 ",
                "Pledged":"Y",
               "Num1":"2",
                "Num2":"10",
                "RESULT":""
              },
              {
                "Id":"C23456",
                "Symbol":"VETF",
                "Quantity":" 1,398,400.0000 ",
                "Price":" .56000 ",
                "Value":" ,904.00 ",
                "Pledged":"Y",
                 "Num1":"14",
                "Num2":"20",
                "RESULT":""
              }
   ]
}

Answer 1

问题出在 JSON 数据的错误格式上。您 returns 字符串的格式接近 en-US（" 7,107.87 " 应解释为数字 857107.87）。此外，数据 prepended/appended 带有附加符号（$，空格）。无法计算此类错误格式数据的总和，如果您使用 loadonce: true（本地数据排序），属性 sorttype: 'integer 也会出错。

通常使用 857107.87 或 "857107.87" 之类的输入而不是 " 7,107.87 "，并在客户端使用 formatters 格式化数据 *。例如可以使用

{ label: 'Price', name: 'Price', width: 180, sorttype: 'number', align: "right",
    formatter: 'currency', formatoptions: { prefix: " $", suffix: " "} }

作为结果，输入数据 857107.87 或 "857107.87" 将以 " 7,107.87 " 的形式显示，但 jqGrid 可以计算列中的总和。

最后一句话。我不建议您使用旧的 4.4.5 版本的 jqGrid，并从 URL http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.5/js/jquery.jqGrid.src.js 下载它。我在 GitHub, CDNs (see the wiki article, for example https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.1/js/jquery.jqgrid.min.js or https://cdn.jsdelivr.net/free-jqgrid/4.13.1/js/jquery.jqgrid.min.js), npm, NuGet, bower and Maren central 上可用的当前版本 4.13.1 中开发 free jqGrid 分支。您可以从来源中选择任何一个。

如何在jqgrid中使用页脚数据乘以行和求和

howto multiply rows and sum using footerdata on jqgrid

jquery

jqgrid