jquery – 如何从JqGrid中的单元格自定义格式化程序访问其他行数据

2023年7月18日 275次阅读

我有一个 XML数据源,如下所示,

<root>
    <item priceOri = "100" discount = "10"></item>
    <item priceOri = "200" discount = "110"></item>
    .
    .
    .
</root>

我正在使用JqGrid将这些数据填充到表中.
代码如下所示.

datatype : 'xml',
colModel: [ 
  ... 
  {name:'priceOri', index:'priceOri', width:60,xmlmap : "[priceOri]", align:"center"},
  {name:'discount', index:'discount', width:60,xmlmap : "[discount]", align:"center"},
  {name:'price', index:'price', width:60,xmlmap : "[price]", align:"center", editable: true, formatter:discountFmatter},
  ...
 ]

xmlReader: {
    root: "root",
    row: "item",
    repeatitems: false
},

格式化程序如下所示.

function discountFmatter (cellvalue, options, rowObject)
{
   var price;
   // do calculation based on other cell values in the same column
   //price = priceOri - discount;
   var new_format_value = price;
   return new_format_value
}

在代码中,我需要访问item标记中的其他值来计算price部分.所以基本上我想访问同一行中的其他单元格值.我怎样才能做到这一点.

我使用下面的代码片段,但结果是未定义的

rowObject[0]  // undefined
rowObject.priceOri //undefined

谁能告诉我实现这一目标的步骤.

更新：我有Tony Tomov的JqGrid版本4.4.0.由于我正在开发已经开发的应用程序,因此我无法更改或更新该库版本.所以我必须使用相同的JqGrid版本4.4.0.

看起来像Oleg的rowObject instanceof Element？ $(rowObject).attr(“priceOri”)：rowObject.priceOri正在满足此要求.

更新2 :(因为rowObject.rewards不会在下面的情况下工作)

新XML的格式如下,
       < item priceOri =“100”discount =“10”奖励=“20”>< / item>

所以新的格式化程序会像,

function discountFmatter (cellvalue, options, rowObject)
{
   var price;
   // do calculation based on other cell values in the same column
   //price = priceOri - discount - rewards;
   var new_format_value = price;
   return new_format_value
}

请注意,我没有在jQgrid表中显示值奖励.那么我怎样才能做到这一点.

Oleg的回答：如果使用旧的jqGrid,你将不得不添加新的列奖励.您可以在列中使用hidden：true属性.免费的jqGrid允许您使用additionalProperties

最佳答案 在 custom formatter内部处理数据时存在一个重要问题.rowObject的格式与输入数据项相同.因此,必须使用rowObject [0]或rowObject.priceOri来处理JSON数据,这取决于是否使用了repeatitems：false.同样,自定义格式化程序的代码应该是另一个处理JSON数据的代码,它使用下一个节点或属性.一个必须使用$(rowObject).find(“> priceOri”)或$(rowObject).attr(“priceOri”)(最后一个对应于数据的格式).

事件更复杂(理解)必须是代码,如果使用loadonce：true另外.只有在处理从服务器加载的数据时,才必须使用上述表达式.下一个处理(在本地排序,分页或过滤之后)必须使用rowObject.priceOri表示法.

在Tony改变了jqGrid的许可协议(见the post)之后,我开发了jqGrid的free jqGrid分叉,使产品商业化(见the prices)并将jqGrid重命名为“Guriddo jqGrid JS”.由于免费jqGrid开发了大约一年,我实现了许多功能(最多来自于the wiki和自述版本的自述文件).

free jqGrid保持rowObject参数的格式与以前相同,以保持与先前版本的兼容性,但扩展了参数选项.它包含带解析数据的rowData属性.要在free jqGrid中访问自定义格式化程序中的priceOri,可以使用options.rowData.priceOri.因此你可以使用

function discountFmatter (cellvalue, options, rowObject) {
    return parseFloat(options.rowData.priceOri) -
           parseFloat(options.rowData.discount);
}

在使用loadonce：true的情况下,格式化程序的代码以相同的方式工作,即使您将返回的数据格式从XML更改为JSON(例如,以提高代码的性能),它也将保持工作.

The demo使用GitHub的免费jqGrid的最新代码并显示

《jquery – 如何从JqGrid中的单元格自定义格式化程序访问其他行数据》

它使用以下代码

$(function () {
    "use strict";
    function discountFmatter (cellvalue, options, rowObject) {
        return parseFloat(options.rowData.priceOri) -
                parseFloat(options.rowData.discount);
    }

    $("#grid").jqGrid({
        url: "prime.xml",
        datatype: "xml",
        colModel: [ 
            { name: "priceOri", xmlmap: "[priceOri]" },
            { name: "discount", xmlmap: "[discount]" },
            { name: "price", xmlmap: "[price]", editable: true,
                formatter: discountFmatter }
        ],
        cmTemplate: { width: 60, align: "center" },
        iconSet: "fontAwesome",
        xmlReader: {
            root: "root",
            row: "item",
            repeatitems: false
        },
        loadonce: true,
        viewrecords: true,
        rownumbers: true,
        caption: "Stack Overflow Example"
    });
});
点赞