jquery easyUI datagrid自动计算两列的值

在网上找了一些自动计算两列的方法，全部都是只能修改已有的数据的时候自动计算，而不能在添加一行数据的时候自动计算，自己花时间研究了一下，可实现类似计算报价的功能。效果如下图：

HTML Code：

<table id="baojia" style="width:948px;height:auto" title="报价详细" iconCls="icon-edit" singleSelect="true" idField="itemid">   
        <thead>   
            <tr>   
                <th field="itemid" width="180" editor="text">设备名称</th>
                <th field="attr1" width="80" editor="text">型号</th>
                <th field="brand" width="100" editor="text">品牌</th>
                <th field="amount" width="80" align="right" editor="{type:'numberbox',options:{precision:0}}">数量</th>  
                <th field="listprice" width="80" align="right" editor="{type:'numberbox',options:{precision:2}}">单价</th>   
                <th field="unitcost" width="80" align="right" editor="{type:'numberbox',options:{precision:2}}">小计</th>
            </tr>
        </thead>
        <tfoot>
            <td colspan="6">总价：</td>
        </tfoot>
</table>

JS Code：

$(function(){
    var lastIndex;
    $('#baojia').datagrid({
        showFooter:true,
        fitColumns:true,
        toolbar:[{
            text:'添加',
            iconCls:'icon-add',
            handler:function(){
                $('#baojia').datagrid('endEdit', lastIndex);
                $('#baojia').datagrid('appendRow',{
                    itemid:'',
                    attr1:'',
                    amount:'',
                    brand:'',
                    unitcost:'',
                    listprice:''                      });
                lastIndex = $('#baojia').datagrid('getRows').length-1;
                $('#baojia').datagrid('selectRow', lastIndex);
                $('#baojia').datagrid('beginEdit', lastIndex);
                setEditing(lastIndex);//此句较为重要
            }
        },'-',{
            text:'删除',
            iconCls:'icon-remove',
            handler:function(){
                var row = $('#baojia').datagrid('getSelected');
                if (row){
                    var index = $('#baojia').datagrid('getRowIndex', row);
                    $('#baojia').datagrid('deleteRow', index);
                }
            }
        }],
        onBeforeLoad:function(){
            $(this).datagrid('rejectChanges');
        },
        onClickRow:function(rowIndex){

            if (lastIndex != rowIndex){
                $('#baojia').datagrid('endEdit', lastIndex);
                $('#baojia').datagrid('beginEdit', rowIndex);
                setEditing(rowIndex);
            }
            lastIndex = rowIndex;
        }
    })
        
        //计算报价小计
    function setEditing(rowIndex){
        var editors = $('#baojia').datagrid('getEditors', rowIndex);    
        var priceEditor = editors[4];
        var amountEditor = editors[3];    
        var costEditor = editors[5];    
        priceEditor.target.bind("change", function(){    
            calculate();
        });    
        amountEditor.target.bind("change", function(){    
            calculate();    
        });    
        function calculate(){    
            var cost = (priceEditor.target.val())*(amountEditor.target.val());
            console.log(cost);
            costEditor.target.numberbox("setValue",cost);    
        }    
    }
});

在添加按钮的handler里加入setEditing(rowIndex);可实现在新增的行里自动计算，如果没有加入这句，则需要再新增一行后，再回来点击此行编辑的时候才会自动计算。

参考资料：http://api.btboys.com/easyui/