2016-04-05 129 views
0

我有一個名稱的價格和價值。 而我正在使用jqgrid的頁腳 的值。howto multiply rows and sum using footerdata on jqgrid

例如,這是第2列價格與價值的

Price  
$25.00000 
$33.82000 
$1.00000 
$21.87125 
$9.49000 
...... 


Value 
$5,000.00 
$8,107.87 
$1,344.00 
$4,769.01 
$5,372.00 
... 

我怎樣才能使用頁腳數據價格價值行 的總和。

也是,我怎麼多各row num1 x row num2和顯示的Num1xNum2

Num1 Num2 RESULT 
    4  20  80 

值這裏是我的代碼。 注:如果我使用「和」它給了我「男」值

<!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":" $25.00000 ", 
       "Value":" $5,000.00 ", 
       "Pledged":"Y", 
       "Num1":"4", 
       "Num2":"20", 
       "RESULT":"" 
       }, 
       { 
       "Id":"C14999", 
       "Symbol":"IRTX", 
       "Quantity":" 25,343.2250 ", 
       "Price":" $82000 ", 
       "Value":" $857,107.87 ", 
       "Pledged":"Y", 
       "Num1":"12", 
       "Num2":"31", 
       "RESULT":"" 
       }, 
       { 
       "Id":"C14999", 
       "Symbol":"MMM", 
       "Quantity":" 14,344.0000 ", 
       "Price":" $1.00000 ", 
       "Value":" $4,344.00 ", 
       "Pledged":"Y", 
       "Num1":"22", 
       "Num2":"20", 
       "RESULT":"" 
       }, 
       { 
       "Id":"C14999", 
       "Symbol":"FMCX", 
       "Quantity":" 28,565.7660 ", 
       "Price":" $21.87125 ", 
       "Value":" $4,769.01 ", 
       "Pledged":"N", 
       "Num1":"232", 
       "Num2":"20" , 
       "RESULT":"" 
       }, 
       { 
       "Id":"C14999", 
       "Symbol":"CEB", 
       "Quantity":" 122,800.0000 ", 
       "Price":" $9.49000 ", 
       "Value":" $5,372.00 ", 
       "Pledged":"Y", 
       "Num1":"2", 
       "Num2":"10", 
       "RESULT":"" 
       }, 
       { 
       "Id":"C23456", 
       "Symbol":"VETF", 
       "Quantity":" 1,398,400.0000 ", 
       "Price":" $2.56000 ", 
       "Value":" $9,904.00 ", 
       "Pledged":"Y", 
       "Num1":"14", 
       "Num2":"20", 
       "RESULT":"" 
       } 
    ] 
} 

回答

1

的問題是在JSON數據的格式錯誤。您返回的字符串格式設置接近en-US(" $857,107.87 "應被解釋爲編號857107.87)。此外,數據前綴/附加附加符號($,空格)。如果您使用loadonce: true(本地數據排序),則無法計算此類錯誤格式化數據的總和,並且屬性sorttype: 'integer也會出錯。

一個通常使用的輸入等857107.87"857107.87"代替" $857,107.87 "和格式化使用formatters客戶機側的數據*。例如人們可以使用

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

其結果輸入數據857107.87"857107.87"將顯示在形式" $857,107.87 ",但可能的jqGrid在列計算的總和。

最後一句話。我不建議您使用jqGrid的舊4.4.5版本,並從URL http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.5/js/jquery.jqGrid.src.js下載它。我開發在當前版本4.13.1可在GitHub,CDN的免費的jqGrid叉(見the wiki article,例如https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.1/js/jquery.jqgrid.min.jshttps://cdn.jsdelivr.net/free-jqgrid/4.13.1/js/jquery.jqgrid.min.js),npmNuGetbowerMaren central。你可以選擇任何來源。