在jqGrid中对特定列的值求和的最佳方法是什么?

时间:2015-04-17 21:03:04

标签: javascript jquery jqgrid

我正在制作发票表单,我使用jqGrid 7.8在发票的细节中添加新行,用户可以添加和删除行,我需要对某些特定列的值进行求和,列{{1 }},pricetaxdiscount,问题是我需要在两个不同的时刻相加,第一个是用户添加新行时,另一个是他删除一行。总结这些列的最佳方法是什么?

如果这很重要,我的jqGrid工作在本地,添加本地和删除本地,我不需要在服务器端添加或删除这些。

这是我的HTML代码:

total

这是我的jqgrid:

<table>
    <tbody>
        <tr>
            <td style="width: 60px;">Codigo</td>
            <td style="width: 150px;">Descripcion</td>
            <td style="width: 50px;">Cantidad</td>
            <td style="width: 50px;">Precio</td>
            <td style="width: 50px;">Impuesto</td>
            <td style="width: 50px;">Total</td>
        </tr>
        <tr>
            <td style="width: 60px;">
                <input type="text" id="txtCodigo" maxlength="100" value="" style="width: 60px;" />
            </td>
            <td style="width: 150px;">
                <input type="text" id="txtDescripcion" maxlength="100" value="" style="width: 150px;" />
            </td>
            <td style="width: 50px;">
                <input type="text" id="txtCantidad" maxlength="100" value="" style="width: 50px;" />
            </td>
            <td style="width: 50px;">
                <input type="text" id="txtPrecio" maxlength="100" value="" style="width: 50px;" />
            </td>
            <td style="width: 50px;">
                <input type="text" id="txtImpuesto" maxlength="100" value="" style="width: 50px;" />
            </td>
            <td style="width: 50px;">
                <input type="text" id="txtTotal" maxlength="100" value="" style="width: 50px;" />
            </td>
        </tr>
    </tbody>
</table>

<input type="button" id="add" value="Add" />
<input type="button" id="delete" value="Add" />
<table id="grid"></table>

<table>
    <tbody>
        <tr>
            <td style="width: 120px;">Subtotal</td>
            <td style="width: 120px;">Impuesto</td>
            <td style="width: 120px;">Total</td>
        </tr>
        <tr>
            <td style="width: 120px;">
                <input type="text" id="txtSubtotalGeneral" maxlength="100" value="" style="width: 120px;" />
            </td>
            <td style="width: 120px;">
                <input type="text" id="txtImpuestoGeneral" maxlength="100" value="" style="width: 120px;" />
            </td>
            <td style="width: 120px;">
                <input type="text" id="txtTotalGeneral" maxlength="100" value="" style="width: 120px;" />
            </td>
        </tr>
    </tbody>
</table>

我正在使用一个名为&#34的按钮;添加&#34;将值添加到网格中的新行:

<script type="text/javascript">
var mydata = [
        { codigo: '0001', descripcion: 'Spoon', cantidad: '10', precio: '100',
            impuesto: '13', total: '100' }
    ];

$("#grid").jqGrid({
    data: mydata,
    datatype: 'local',
    editurl: "clientArray",
    //gridview: true,
    height: 'auto',
    //autoencode: true,
    rowNum: 3,
    colNames: ['Codigo', 'Descripcion', 'Cantidad', 'Precio', 'Impuesto', 'Total'],
    colModel: [
        { name: 'codigo', index: 'codigo', width: 60, sortable: false },
        { name: 'descripcion', index: 'descripcion', width: 60, sortable: false },
        { name: 'cantidad', index: 'cantidad', width: 60, formatter: 'integer', sortable: false },
        { name: 'precio', index: 'precio', width: 60, formatter: 'currency', sortable: false },
        { name: 'impuesto', index: 'impuesto', width: 60, formatter: 'currency', sortable: false },
        { name: 'total', index: 'total', width: 60, formatter: 'currency', sortable: false }
    ],
    caption: "Productos",
    formatter: {
        integer: { thousandsSeparator: " ", defaultValue: '0' },
        number: { decimalSeparator: ".", thousandsSeparator: " ", decimalPlaces: 2, defaultValue: '0.00' },
        currency: { decimalSeparator: ".", thousandsSeparator: " ", decimalPlaces: 2, prefix: "", suffix: "", defaultValue: '0.00' }
    }
});
</script>

我正在使用一个名为&#34的按钮;删除&#34;删除网格中的特定行:

<script type="text/javascript">
$('#add').click(function () {
    var Codigo = $("#txtCodigo").val();
    var Descripcion = $("#txtDescripcion").val();
    var Cantidad = $("#txtCantidad").val();
    var Precio = $("#txtPrecio").val();
    var Impuesto = $("#txtImpuesto").val();
    var Total = $("#txtTotal").val();
    var newData = {
        codigo: Codigo,
        descripcion: Descripcion,
        cantidad: Cantidad,
        precio: Precio,
        impuesto: Impuesto,
        total: Total
    };
    var rowId = $.jgrid.randId();
    $("#grid").jqGrid('addRowData', rowId, newData);
    var impuesto = $("#grid").jqGrid('getCol', 'impuesto', false,'sum');
    var total = $("#grid").jqGrid('getCol', 'total', false, 'sum');
    $("#txtSubtotalGeneral").val(total - impuesto);
    $("#txtImpuestoGeneral").val(impuesto);
    $("#txtTotalGeneral").val(total);
});
</script>

<script type="text/javascript"> $("#delete").click(function () { var selRowId = $("#grid").jqGrid('getGridParam', 'selrow'); if (selRowId != null) { $("#grid").jqGrid('delGridRow', selRowId, { reloadAfterSubmit: false }); celValue = $("#grid").jqGrid('getCell', selRowId, 'total'); } else alert("Please Select Row to delete!"); }); </script> 中的问题是,此方法$("#delete").click(function () { })会显示一条消息&#39;删除所选记录?&#39;并且我不知道如何知道用户是否选择了“是”&#39;或者&#39;取消&#39;在对话框中,我需要这样做,因为如果用户选择了“是”,我必须提取最终总数的这些值。

0 个答案:

没有答案