我正在制作发票表单,我使用jqGrid 7.8在发票的细节中添加新行,用户可以添加和删除行,我需要对某些特定列的值进行求和,列{{1 }},price
,tax
和discount
,问题是我需要在两个不同的时刻相加,第一个是用户添加新行时,另一个是他删除一行。总结这些列的最佳方法是什么?
如果这很重要,我的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;在对话框中,我需要这样做,因为如果用户选择了“是”,我必须提取最终总数的这些值。