如何计算免费 jqgrid 中用户条目的行总和

Question

如果价格或数量发生变化，则应计算行总和。 Formatter 根据

创建

在内联和行编辑模式下，行总和不会改变。行和列是只读的，没有分配 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" 格式化乘法结果 (quantity * price) 的地方。

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

如何计算免费 jqgrid 中用户条目的行总和

How to calculate row sum on user entry in free jqgrid

javascript

jquery

jqgrid

free-jqgrid