问题:在列表中需要根据 【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.在删除记录时,应该注意