如何计算自由jqgrid中用户输入的行总和

时间:2015-12-15 07:43:54

标签: javascript jquery jqgrid free-jqgrid

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

创建的

在内联和行编辑模式中,行总和不会更改。 行总和列是只读的,没有分配id。所以很难创建脚本来改变它。

如何解决此问题,以便在编辑时计算行总和? Testcase位于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>

1 个答案:

答案 0 :(得分: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/