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

在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