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

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

在内联和行编辑模式下，行和不变。 行和列为只读，未分配id。所以很难创建脚本来更改它

如何解决此问题，以便在编辑时计算行和？ Testcase处于包含状态

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>

---

您遇到的第一个问题是免费jqGrid中的bug，它紧随其后的是

选项。rowData

未填充在

setRowData

中。我发布到GitHub以消除该问题

下一个问题是要求重新格式化

可编辑的数据：“只读”

。表单编辑可以执行此操作，但不能执行内联编辑。可以使用

可编辑：“隐藏”

或添加选项

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

它使用

Sum

列的虚拟值

扩展了内联编辑的结果。它强制重新格式化
Sum
列中的值

另外，我建议您更改用于

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

查看演示或

其中我调用了
格式化程序：“number”
来格式化乘法结果（
quantity*price
）

查看结果演示
如何在不保存行的情况下显示总和？我试过了。行总和仅在内联编辑中计算，并且仅在保存行时计算。即使按下“提交”按钮，表单中的“编辑行总和”也不会显示。如果在内联和表单编辑中输入了一些数字，如何立即显示正确的行和？@Andrus：我建议您使用
可编辑：“隐藏”
，而不是
可编辑：“只读”
。您可以通过使用
closeAfterAdd:true
或
closeAfterEdit:true
来解决此问题。或者，您可以将
“更改”
事件绑定到两个字段
“数量”
和
“价格”
，并在数量或价格更改时刷新
总和。我个人不会使用最后一个选项。
editable:hidden
删除表单编辑中的总和字段。如何在不关闭编辑表单的情况下在表单编辑中显示和刷新总和字段？
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);
}