根据两行或多列值，实时计算另一列得

在easyui-datagrid中，我们如何实现根据两列或多列来动态计算另一列的值？

<table id="invoiceDetailDatagrid"></table>

/**
* 方法描述：初始化发票明细表
*/
function initInvoiceDetail(){
$("#invoiceDetailDatagrid").datagrid({
idField : "eventId",
loadMsg : '数据装载中......',
rownumbers:true,
pagination:false,
fitColumns:true,
striped : true,
autoRowHeight : true,
nowrap: false,
collapsible:false,
showFooter:false,
toolbar : '#toolbar',
columns:[[
{field:'ck',checkbox:true},
{field:'invoiceDetailId',title:"eventId",hidden:true},
{field:'commodity',title:'<span style="color:red">*</span> 商品名称',width:100,editor:{type:'validatebox',options:{required:true}}},
{field:'specifications',title:'<span style="color:red">*</span> 规格型号',width:100,editor:{type:'validatebox',options:{required:true}}},
{field:'unit',title:'<span style="color:red">*</span> 单位[个/升(L)等]',width:100,editor:{type:'validatebox',options:{required:true}}},
{field:'quantity',title:'<span style="color:red">*</span> 数量',width:100,editor:{type:'validatebox',options:{required:true}}},
{field:'unitPrice',title:'<span style="color:red">*</span> 单价',width:100,editor:{type:'validatebox',options:{required:true}}},
{field:'sum',title:'<span style="color:red">*</span> 金额',width:100,
editor:{
type:'numberbox',
options:{readonly : true}
}
}
]],
onClickRow:function(index,row){
if(!isLastRowEndEdited()){
return;
}
$('#invoiceDetailDatagrid').datagrid('beginEdit', index);
$('#invoiceDetailDatagrid').datagrid('endEdit', lastEditRowIndex);
lastEditRowIndex = index;
}
});
//页面自适应
initDatagrigHeight('invoiceDetailDatagrid','queryDiv','100');
}

/**
* 新增发票明细记录
*/
//为临时  eventId 赋值
var teamAddRowIndex = 0;

function addTeamMembersInfo(){
if(!isLastRowEndEdited()){
return;
}
$("#invoiceDetailDatagrid").datagrid('appendRow',{
eventId:'add' + teamAddRowIndex,
commodity:'',
specifications:'',
unit:'',
quantity:'',
unitPrice:'',
sum:'',
});
teamAddRowIndex++;
var rows = $("#invoiceDetailDatagrid").datagrid('getRows');
$("#invoiceDetailDatagrid").datagrid("beginEdit",rows.length-1);
$("#invoiceDetailDatagrid").datagrid("endEdit",lastEditRowIndex);
lastEditRowIndex = rows.length-1;
calTotalSum(rows.length-1);
}

/**
* 方法描述：实时计算 【金额】
* @param editingRowIndex 正在编辑行
*/
function calTotalSum(editingRowIndex){
var editors = $("#invoiceDetailDatagrid").datagrid('getEditors',editingRowIndex);
var quantityEditor = editors[3];
var unitPriceEditor = editors[4];
var sumEditor = editors[5];
//设置sum字段为只读属性
$(sumEditor.target).attr({'readonly':true,'unselectable':'on'});
//设置sum字段的背景颜色为灰色
$(sumEditor.target).css('background','#DCDCDC');

quantityEditor.target.bind('input onChange',function(){
//只能输入数字
if(isNaN(quantityEditor.target.val())){
var num = quantityEditor.target.val();
num = num.substring(0,num.length-1);
quantityEditor.target.val(num);
}
calculate();
});
unitPriceEditor.target.bind('input onChange',function(){
if(isNaN(unitPriceEditor.target.val())){
var num = unitPriceEditor.target.val();
num = num.substring(0,num.length-1);
unitPriceEditor.target.val(num);
}
calculate();
});
function calculate(){
var totalSum = quantityEditor.target.val() * unitPriceEditor.target.val();
return $(sumEditor.target).val(totalSum);
}
}

总结：

1） 当将列 quantiy 和 unitPrice 的 editor 属性定义为  numberbox  时，实时计算就会无效，之所以会这样是因为  numberbox  是一个复合的输入框



如上图  numberbox 实际上是由 span 和两个 input  组成的，这样 quantityEditor.target (这里是指 span 不是 input)等就无法绑定 onChange 事件，解决：quantityEditor.target.children('input')[0].bind