需求背景
前台查询划款指令信息,对于收款人大额号为空的情况,需要调用大数据接口,根据行名模糊匹配行号,对于匹配一条的情况,直接反显为文本框,并可编辑;对于匹配到多条的,将作为下拉选供业务选择;若未匹配到,则显示为空白文本框,可手动填写.
需求实现
后台查询到数据后,当大额号为空时,即调用大数据接口,将匹配数据作为对象的属性进行赋值,待传到前台后,根据匹配到的数据条数进行渲染.
- 前台jsp代码部分展示:
<c:column align="center" width="100" text="收款银行" dataBind="bankName" />
<c:column align="center" width="100" text="收款银行行号" dataBind="bankCode" editorType="stringfield" renderer="payeeBankCodeRenderer"/>
2.js代码部分展示:
//渲染收款方大额号
function payeeBankCodeRenderer(value, meta, record){
var recdata=record.data;
//入库的直接展示
var bankCode = recdata.bankCode;
if(!Ext.isEmpty(bankCode)){
return bankCode;
}
//获取匹配结果
var bankCodeAndNameList =recdata.bankNameAndNoList;
// 渲染编辑
return createDetailEdit(value, meta, recdata, bankNameAndNoList);
}
/**
* 渲染数据列表结构
*
*
*/
function createDetailEdit(value, meta, data, bankCodeAndNameList){
//未入库但已选择的
var bankidSelect=changeData.get(data['payserialno']);
if (!Ext.isEmpty(bankCodeAndNameList)) {//匹配结果不为空
if(bankCodeAndNameList.length == 1){//当匹配结果只有一条
var num=bankCodeAndNameList[0].split("_")[1];
if(!Ext.isEmpty(bankidSelect)){
num=bankidSelect;
}
return "<input type='text' name='value' id='"+ data['payserialno']+ "' value='"+num+"' onChange='selectRow(this)' />";
}
var selects = "<select id='" + data['payserialno'] + "' name='value' onChange='selectRow(this)'>";
//增加一个空行
selects += "<option></option>";
for (var i = 0; i < bankCodeAndNameList.length; i++) {
var nameAndNum = bankCodeAndNameList[i];
selects += "<option value='" + nameAndNum.split("_")[1] + "'";
if(nameAndNum.split("_")[1]==bankidSelect){//如果有选择的,则赋值为已选择
selects +=" selected='selected' ";
}
selects += ">" + nameAndNum + "</option>";
}
selects += "</select>";
return selects;
} else {//匹配结果为空
if(!Ext.isEmpty(bankidSelect)){//手动输入新值
// 渲染文本框并赋值
return "<input type='text' name='value' id='"+ data['payserialno']+ "' value='"+bankidSelect+"' onChange='selectRow(this)' />";
}else{//未输入新值
// 渲染文本框
return "<input type='text' name='value' id='"+ data['payserialno'] + "' onChange='selectRow(this)' />";
}
}
}
//定义全局map,用于存储业务修改后,或已选的数据,
//payserialno为查询数据的唯一性约束,可作为map中的key值
var changeData=new Map();
//渲染单条数据
function selectRow(obj) {
var serino=obj.id;//流水号
var bankCode= obj.value;//大额号
if(!Ext.isEmpty(bankCode)){
changeData.set(serino,bankCode);
}
}
//保存行号
function savebankCode() {
var jsonArr=[];
var json;
var records = grid1.getSelected();
if(Ext.isEmpty(records)){
sofa.alert("请选择要保存的数据!");
return false;
}
for ( var i = 0; i < records.length; i++) {
var dbNum=records[i].data.bankCode;
var serino=records[i].data.payserialno;
var bankNos=records[i].data.bankCodeAndNameList;
json={};
json.payserialno=serino;
if(!Ext.isEmpty(bankNos)){//匹配结果不为空,证明bankCode数据库为空
if(bankNos.length == 1){//匹配到唯一大额号
var num=bankNos[0].split("_")[1];
//未进行修改时,直接取匹配结果;否则取修改后结果
json.bankNum=Ext.isEmpty(changeData.get(serino))?num:changeData.get(serino);
}else{//大额号下拉选
json.bankNum=changeData.get(serino);//下拉选取全局变量的值
}
}else{//匹配结果为空,要么bankCode有值未进行匹配查询,要么匹配结果是空;未进行修改时,取数据库bankCode,修改后,取修改后值
json.bankNum=Ext.isEmpty(changeData.get(serino))?dbNum:changeData.get(serino);
}
jsonArr.push(json);
}
Ext.Ajax.request({
url : "./paymentManage.ctrl?method=matchResultSave",
method : 'POST',
timeout : 1000 * 20,
async : false,
params : {
jsonArr:JSON.stringify(jsonArr)
},
success : function(res) {
sofa.alert("保存成功");
changeData.clear();//清空map
searchSubmitDetial();
},
failure : function(res) {
sofa.error(res.responseText);
}
});
}