个人中心
gpt4 book ai didi

javascript - jqgrid : row multiplication not working

转载 作者：行者123 更新时间：2023-12-03 07:15:09 25 4
gpt4 key购买 nike

我的 jqgrid 表有两个问题，首先，当您单击列标题时，它不会按升序或降序排序。

我遇到的问题是我想将 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"
              }
   ]
}

最佳答案

它看起来像您之前的问题，但“数量”仍然包含逗号，并且 3 列“数量”、“值”和“值”中的值包含不需要的空格。所有整数和 float 都作为字符串而不是数字包含在 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 将返回的数据保存在本地(作为 JavaScript 对象保存在内部参数 data 和 _index 中)。第一次加载后，jqGrid 会将初始datatype更改为“local”，所有接下来的分页和排序请求将在本地完成，无需与服务器通信。

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

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

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

关于javascript - jqgrid : row multiplication not working，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36459572/

25 4 0
文章推荐： javascript - 如何降低弹丸速度变量的计算成本？
文章推荐： wordpress - the_content() 之前没有

- WordPress

文章推荐： wpf - 如何使窗口最大化时所有控件按比例相应调整大小？
文章推荐： javascript - 在 PHP 中获取 HTML 页面的 OnLoad HTML/DOM
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com