需求背景

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

需求实现

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

前台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();//清空mapsearchSubmitDetial();},failure : function(res) {sofa.error(res.responseText);}});
}

关于查询界面渲染问题相关推荐

python3.7界面_Python3.7+tkinter实现查询界面功能
Tkinter 是 Python 的标准 GUI 库.Python 使用 Tkinter 可以快速的创建 GUI 应用程序. 这篇文章使用tkinter实现一个简单的查询界面 #!/usr/bin/p ...
C#实现图书管理系统（课程设计）——第五步、查询界面及操作
C#实现图书管理系统(课程设计)--第五步.查询界面及操作上一篇:借书界面 (1)界面设计: 前三个框为DataGridView控件,具体的使用方法自行百度,以下简单讲解: 1.创建后点击,右上角会 ...
python 数据录入窗口_干货！用Tkinter实现简单的信息录入和查询界面！
由于工作需要,最近完成了一个简单的小软件,主要用于信息的录入和查询. 程序主要使用的是Tkinter, Python 的标准 GUI 库.Tkinter相对比较简单,可以制作出精美的界面,信息的录入和 ...
Android渲染画面,Android界面渲染优化
上篇介绍了android界面渲染主要是Display的过程,只要在一个时间段也就是16ms中,CPU和GPU不能正常处理完数据就会产生卡顿. 而 CPU(中央处理器) :多缓存多分支,适用于复杂的逻辑 ...
C#sql帮助类(登录查询界面)语句实例
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
wpf page 界面渲染完成后执行自动操作_Vue项目骨架屏自动生成方案（dps）
什么是骨架屏什么是骨架屏呢?骨架屏(Skeleton Screen)是指在页面数据加载完成前,先给用户展示出页面的大致结构(灰色占位图),在拿到接口数据后渲染出实际页面内容然后替换掉.Skeleto ...
Python_模拟登录（爬取教务系统信息并制作查询界面）
采用模块: (1)urllib,urllib2,cookielib,BeautifulSoup (2)wx,py2exe 工作步骤: (1)解析网站原理,主要获取post数据.密码加密方式相关信息所在 ...
react 界面渲染完成立即执行_React原理解析fiber、diff
资源 1. React中文网:https://react.docschina.org 2. React源码:https://github.com/facebook/react 学习目标 1. 掌握虚拟 ...
地图大量数据查询与渲染——bug及解决方案
本文记录大数据可视化项目中信息查询过程遇到的实际问题及解决方案,用到了Vue自定义组件.Promise.all.DocumentFragment.event loop等. 项目需求项目使用的arcg ...
小程序界面渲染数据计算小程序界面渲染保留小数
新建一个wxs文件 var Fix= {toFix: function (value) {return value.toFixed(1)//此处1为保留一位小数} } module.exports = ...

关于查询界面渲染问题

关于查询界面渲染问题

需求背景

需求实现

关于查询界面渲染问题相关推荐

最新文章

热门文章