javascript - 如何计算免费 jqgrid 中用户输入的行总和

Question

如果价格或数量发生变化，则应计算行总和。 Formatter是根据How to access other row data from a cell's custom formatter in JqGrid创建的

在内联和行编辑模式下，行总和不会改变。 行总和列是只读的，并且没有分配 id。因此很难创建脚本来更改它。

如何修复此问题以便在编辑时计算行总和？ 测试用例位于 http://jsfiddle.net/ex6158L1/4/包含

JavaScript

var serverResponse = {
        "page": "1",
        "records": "3",
        "rows": [
            { "Id": "1", Quantity:4, Price : 23.33 },
            { "Id": "2", Quantity:4.55, Price : 76.66 }

        ]
    },
    $grid = $("#categorysummary");

    function sumFmatter (cellvalue, options, rowObject) {
        return options.rowData.Quantity *
                options.rowData.Price;
    }

$grid.jqGrid({
    url: "/echo/json/", // use JSFiddle echo service
    datatype: "json",
    mtype: "POST", // needed for JSFiddle echo service
    pager: '#pager',
    postData: {
        json: JSON.stringify(serverResponse) // needed for JSFiddle echo service
    },
    //colNames: ["Quantity", "Price"],
    colModel: [
        { name: 'Id', hidden: true },
        { name: 'Quantity', editable: true},
        { name: 'Price', editable: true },
        { name: "Sum", formatter: sumFmatter,  editable: "readonly" }
    ],
    jsonReader: {
        id: 'Id',
        repeatitems: false
    },
    sortname: 'Id',
    viewrecords: true
})
.jqGrid("navGrid",'#pager')
.jqGrid("inlineNav",'#pager');

和CSS

<div class="container">
    <div id="pager"></div>
    <table id="categorysummary"></table>
</div>

Answer 1

您遇到的第一个问题是免费 jqGrid 中的错误，导致 options.rowData 未填充在 setRowData 内部。我发了the corresponding fix到 GitHub 来消除问题。

下一个问题是需要重新格式化editable: "readonly"的数据。表单编辑可以执行此操作，但不能进行内联编辑。可以使用 editable: "hidden" 或添加选项

inlineEditing: {
    extraparam: { Sum: "" }
}

它使用 Sum 列的虚拟值 "" 扩展内联编辑的结果。它强制重新格式化 Sum 列中的值。

我建议您另外更改您使用的格式化程序sumFmatter

function sumFmatter (cellvalue, options, rowObject) {
    var quantity = parseFloat(options.rowData.Quantity || 0),
                    price = parseFloat(options.rowData.Price || 0);
    return (quantity * price).toFixed(2);
}

查看演示 http://jsfiddle.net/OlegKi/ex6158L1/7/或至

function sumFmatter (cellvalue, options, rowObject, action) {
    var quantity = parseFloat(options.rowData.Quantity || 0),
        price = parseFloat(options.rowData.Price || 0);

    return $.fn.fmatter.call(this, "number", quantity * price,
                             options, rowObject, action);
}

我在其中调用了formatter: "number"来格式化乘法结果(数量 * 价格)。

查看生成的演示 http://jsfiddle.net/OlegKi/ex6158L1/10/