实时计算

问题：在列表中需要根据 【sum】 列输入的值动态的计算主页面中【借款额度】值，而且【sum】编辑器要有数字输入框的效果且最大输入值为999999

解决办法：

模拟数字输入框效果函数

/**
 * 模拟实现数字输入功能
 * @param editor 当前获取的编辑器
 */
function numberInput(editor){
	editor.target.bind('keydown',function(e){
		/*
		 * 禁用除 【backspace】  【delete】  【上下左右】 【1234567890】 的所有按键
		 */
		if(!(e.keyCode == 8 || (e.keyCode >= 37 && e.keyCode <= 40) || e.keyCode == 46
				|| (e.keyCode >= 49 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 103))){
			return false;
		}
	});
}

关联实时计算函数

/**
 * 为借款申请明细列表中金额 【sum】 添加 onChange 监听事件，
 * 每次在 【sum】 validatebox 输入框中添加、删除、修改数字时都能动态计算【总金额sum】
 * 目的：实时计算借款申请总金额 【sum】
 * @param elementId 页面元素id
 * @param editor datagrid字段编辑器，即【sum】
 */
function sumBoxOnChangeListener(elementId,editor){
	/*
	 * 初始化上一次输入框中的数字值。
	 *    -->新增 ： oldSum 的值为空
	 *    -->修改：  oldSum 的值为原来的值
	 */
	var oldSum = editor.target.val();
	//为编辑对象绑定 onChange 事件
	editor.target.bind('input onChange',function(){
		var num = editor.target.val();
		//输入框中能够输入最大数值的位数为6
		if(num.length >= 7){
			num = editor.target.val().substring(0,num.length - 1);
			editor.target.val(num);
			return;
		}
		/*
		 * 调用 calculateSum 函数，计算【总金额sum】并为页面赋值
		 * 最后将本次的输入数字值重新赋值给 oldSum ，覆盖之前的值
		 */
		oldSum = calculateSum(elementId,oldSum,editor);
	});
	/*
	 * 为编辑对象的 【backspace】 和 【delete】 绑定 onkeyup 事件
	 * 注意 ： 不要用 onkeydown，因为删除后输入框中的新值只能在  onkeyup 事件中获取到
	 * 例如： 
	 * 输入框原输入值 ： 123456
	 * 删除  ： 6
	 * 输入框新输入值  ： 12345
	 * 如果是 onkeydown ： editor.target.val() 获取到的就是 123456
	 * 如果是 onkeyup ：  editor.target.val() 获取到的就是 12345
	 */
	editor.target.bind('keyup',function(e){
		/*
		 * keyCode : 8 --> backspace ; 46 --> delete
		 */
		if(e.keyCode == 8 || e.keyCode == 46){
			oldSum = calculateSum(elementId,oldSum,editor);
		}
	});
}

/**
 * 计算总金额
 * @param oldSum 用于记录上一次输入框中数字值【重要】
 * @param editor 当前获取的编辑器
 * @returns {Number} 返回这一次输入框中的数字值
 */
function calculateSum(elementId,oldSum,editor){
	//获取页面中【总金额sum】的值
	var totalSum = new Number($("#" + elementId).val());
	//获取 datagrid 编辑器中的【sum】输入值
	var newSum = new Number(editor.target.val());
	//从 【总金额sum】 中减去上一次【sum】输入值
	totalSum -= oldSum;
	//将的到的【总金额sum】加上本次【sum】输入值
	totalSum += newSum;
	//将得到的【总金额sum】赋值给页面元素
	$("#" + elementId).numberbox('setValue',totalSum);
	//返回本次【sum】输入值，为 oldSum 重新赋值
	return newSum;
}

在【新增】方法中调用 sumBoxOnChangeListener 方法，每次点击【新增】都会触发该函数

/**
 * 新增借款申请明细记录
 */
//为临时  eventId 赋值
var teamAddRowIndex = 0;

function addLoanApplyDetail(){
	
	if(!isLastRowEndEdited()){	
		return;
	}
	$("#loanApplyDetailsDatagrid").datagrid('appendRow',{
		eventId:'add' + teamAddRowIndex,
		loanId:'',
		loanType:'',
		projectId:'',
		projectName:'',
		sum:'',
	});
	teamAddRowIndex++;
	$("#loanApplyDetailsDatagrid").datagrid('unselectAll');
	var rows = $("#loanApplyDetailsDatagrid").datagrid('getRows');
	$("#loanApplyDetailsDatagrid").datagrid("endEdit",lastEditRowIndex);
	$("#loanApplyDetailsDatagrid").datagrid("beginEdit",rows.length-1);
	lastEditRowIndex = rows.length-1;
	
	var editor = $("#loanApplyDetailsDatagrid").datagrid('getEditor',{index : lastEditRowIndex,field : 'sum'});
	//模拟数字输入框
	numberInput(editor);
	//实时计算
	sumBoxOnChangeListener('sum',editor);
}

在【修改】方法中调用  sumBoxOnChangeListener 方法，每次点击【新增】都会触发该函数

		onClickRow:function(index,row){
			if(!isLastRowEndEdited()){
				return;
			}
			$("#loanApplyDetailsDatagrid").datagrid('unselectAll');
			$('#loanApplyDetailsDatagrid').datagrid('endEdit', lastEditRowIndex);
			$('#loanApplyDetailsDatagrid').datagrid('beginEdit', index);
			lastEditRowIndex = index;
			
			var editor = $("#loanApplyDetailsDatagrid").datagrid('getEditor',{index : lastEditRowIndex,field : 'sum'});
			//模拟数字输入框
			numberInput(editor);
			//实时计算
			sumBoxOnChangeListener('sum',editor);
		},

在【删除】方法中将删除的【sum】从【总金额sum】减去

/**
 * 删除借款申请明细记录
 */
function removeLoanApplyDetailsInfo(){
	var rows = $("#loanApplyDetailsDatagrid").datagrid("getSelections");
	if(rows.length > 0){
		$.messager.confirm("提示","确定要删除选中的记录？",function(r){
			if(r){
				var length = rows.length;
				var delEventIdString = '';
				for(var i=rows.length-1;i>=0;i--){
					var delRowIndex = $("#loanApplyDetailsDatagrid").datagrid("getRowIndex",rows[i]);
					/*
					 * 如果 eventId 长度大于10，说明该记录为数据库中已存在的记录，需要从数据库中删除记录
					 * 如果 eventId 长度小于等于10，说明为新增记录，只需要在界面中删除即可
					 */
					if(rows[i].eventId.length > 4){
						delEventIdString += rows[i].eventId + ',';
					}
					/*
					 * 如果删除行索引小于当前正在编辑行索引，将当前正在编辑行索引减1；
					 * 如果删除行索引等于当前正在编辑行索引，将当前正在编辑行索引置为undefined，并且结束当前行编辑；
					 * 如果删除行索引大于当前正在编辑行索引，将当前正在编辑行索引值不变；
					 */
					if(delRowIndex < lastEditRowIndex){
						lastEditRowIndex--;
					}else if(delRowIndex == lastEditRowIndex){
						$("#loanApplyDetailsDatagrid").datagrid("endEdit",lastEditRowIndex);
						lastEditRowIndex = undefined;
					}
					//将删除行的金额从借款额度中减去
					minusSumFromTotal(rows[i]);
					//删除行
					$("#loanApplyDetailsDatagrid").datagrid("deleteRow",delRowIndex);
				}
				if(delEventIdString != ''){
					$.ajax({
						type : 'post',
						data : {'delEventIdString':delEventIdString},
						url : rootPath + "/financems/receivables/deleteReceivablesRecordsByIds.do",
					});
				}
			}
		});
	}else{
		$.messager.alert('提示', '请选您要删除的记录！', 'info');
	}
}

/**
 * 删除：将删除行的金额 【sum】 从总金额中减去
 * @param rows 删除的行对象
 */
function minusSumFromTotal(row){
	var totalSum = new Number($("#sum").val());
	var sum = row.sum;
	totalSum -= sum;
	$("#sum").numberbox('setValue',totalSum);
}

效果图：

总结：

1. onkeydown 和 onkeyup 在获取输入值方面的区别：onkeydown在删除时无法获取最新的动态值

2.在删除记录时，应该注意