如何设置从编辑表单动态计算的 jqgrid 值

Question

我有jqgrid，其中有交易ID，借方，贷方和余额列。借方和贷方从数据库中填充，余额通过贷方差额 - 借方的计算来设置。编辑以编辑形式完成。一旦用户更改了借方或贷方的值之一，我需要在网格的选定行中更新余额列。

任何帮助将不胜感激。

$myGrid.jqGrid({                
url: myURL + '?method=GetTranactions', 
postData: { 
    prID: function() { return getProv(); },
    mn: function() { return $("#month option:selected").val(); },
    yr: function() { return $("#year option:selected").val(); }
},
datatype: 'json', 
mtype: 'POST',
colNames:['Trx ID','Debit','Credit','Balance',],
colModel :[
    {name:'accttrx_id',index:'accttrx_id', width:75, sorttype:"int", editable:true},
    {name:'debit',index:'debit', 
        width:70, 
        align:"right",
        formatter:'number',
        sorttype:"number",
        editable:true,
        edittype:"text",
        editoptions:{
            size:20,
            defaultValue:'0',                                       
            dataEvents: [   
                {
                    type: 'change',
                    fn: function(e) {
                        var db = $(e.target).val();
                        var cr = $('#credit').val();
                        bal = cr - db;  // got the balance 
                        alert(bal); // how to update balance column for current row?
                        }
                    }
                ]
            },
        editrules:{required:true},
        formoptions:{elmprefix:"(*)"}
        },
    {name:'balance',index:'balance',
        width:70, 
        align:"right",
        formatter:'number',
        sorttype:"number",
        editable:false},....

.......

$myGrid.navGrid('#pager', {
search:false,
edit:true,edittitle:"Edit Transation",
add:true,addtitle:"Add Transaction",
refresh:true,
del:true,deltitle:"Delete Transaction"
},
{
beforeShowForm: 
    function(form) { 
        $('#tr_accttrx_id', form).hide();                           
    },
    afterSubmit:
    ..... update balance after submit?

Answer 1

对于 editForm 中的自定义计算，就像您在此处描述的那样，我通常将代码放在 beforeShowForm 函数中，就像您在此处描述的那样。 请使用类似以下内容：

beforeShowForm: function() {
    $('#debit,#credit').change(function(){
        $('#balance').val( parseFloat($('#credit').val()) - parseFloat($('#debit').val()) );
    });
},
reloadAfterSubmit: true,
...

jQuery 选择器（例如$('#balance')）使用 jqGrid 列的名称作为 ID 选择器。 我这样做是因为我知道 jqGrid 将列名制作成编辑表单中的输入元素 ID。

提交后重新加载（在网格中显示更新的信息）

要查看新的余额值显示在网格中，请使用编辑表单的 reloadAfterSubmit 属性，我在上面的示例中包含了该属性。 请验证您使用的是表单编辑还是内联编辑？ 如果您使用的是表单编辑，那么我的答案中的代码应该可以工作，如果应该与editGridRow方法一起使用。 看这里： http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing

parseFloat和金钱的小问题

虽然上面的代码应该在大多数情况下有效，但请不要使用 parseFloat 命令来计算金钱。 我以前遇到过四舍五入的问题。 相反，您可以使用BigDeciaml软件包。