关于查询界面渲染问题

需求背景

前台查询划款指令信息,对于收款人大额号为空的情况,需要调用大数据接口,根据行名模糊匹配行号,对于匹配一条的情况,直接反显为文本框,并可编辑;对于匹配到多条的,将作为下拉选供业务选择;若未匹配到,则显示为空白文本框,可手动填写.

需求实现

后台查询到数据后,当大额号为空时,即调用大数据接口,将匹配数据作为对象的属性进行赋值,待传到前台后,根据匹配到的数据条数进行渲染.

1. 前台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);
			
		}
		
	});
}