Jqgrid：行乘法不起作用

Question

我的 jqgrid table 有两个问题，首先，当您单击 headers.

列时，它不会按升序或降序排序

我遇到的问题是我想将 Num1 和 Num2 相乘并在虚拟结果列中显示输出，如何将 Num1 和 Num2 相乘并在虚拟列中显示输出

我用的是这个例子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"
              }
   ]
}

Answer 1

它看起来像你之前的问题，但数量仍然包含逗号，并且来自 Quantity、Value 和 Value 3 列的值包含不需要的空格。所有整数和浮点数都作为字符串而不是数字包含在 JSON 中。它会产生额外的问题并增加不必要的传输数据的大小。将数字像数字一样序列化是可行的。我的意思是 return 项目

会更好

{
    "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 回调内部进行更改，但效果会较差。

现在关于排序的问题。来自服务器的数据 return 的格式看起来很奇怪。就像

{
    "rows": [
        {...},
        {...},
        ...
        {...}
    ]
}

而不只是

[
    {...},
    {...},
    ...
    {...}
]

无论如何，响应不提供有关总页数的任何信息。因此我可以假设您没有实现任何服务器端数据排序、分页或过滤。在这种情况下，您应该使用 loadonce: true 选项。它通知 jqGrid 将 returned 数据 保存在本地 （作为 JavaScript 对象保存在内部参数 data 和 _index 中）。第一次加载后，jqGrid 会将初始 datatype 更改为 "local"，所有下一个分页和排序请求将在本地完成，无需与服务器通信。

您的网格使用 sortname: "invdate", sortorder: "desc" 选项，但网格中不存在名称为 invdate 的列。

我写了我的建议（在我对你上一个问题的回答中）使用来自 CDN 的免费 jqGrid 而不是从我的服务器加载的旧 jqGrid。免费的 jqGrid 允许指定 forceClientSorting: true 选项，这意味着客户端在第一次加载时对数据进行排序。

我可以继续，但我创建了演示 https://jsfiddle.net/OlegKi/mnf72611/3/。我认为它应该接近你想要实现的。

Jqgrid：行乘法不起作用

Jqgrid : row multiplication not working

javascript

jquery

jqgrid