BJUI实现点击按钮弹窗，提交到后台action后回显数据流程整理

场景

当我们点击页面的某个按钮去执行某个业务时，需要弹出一个dialog窗口，然后再点击提交或者保存，提及

给后台action，后台回显结果。

效果

点击某个按钮

弹出窗口dialog

点击提交按钮回显消息

实现

点击按钮页面

<label for="name" class="control-label x90">销账：</label> <button type="button" class="btn btn-default"data-toggle="dialog"data-options="{id:'toRecharge',url:'${ctx}/sys/cooperativePartnersManageAction/toWriteOff',type:'post',data:{id:${partner.id}}}"data-width="300" data-height="200"data-id="dialog-user-role"data-title="${partner.partnerName}销账">销账</button>

注：data-toggle要设置为dialog；

data-options中设置后台提交的action的url,以及要提交的参数等；

data-width="300" data-height="200"设置弹窗的宽度和高度；

data-title设置弹窗的标题；

后台action

@RequestMapping(value="/toWriteOff")public ModelAndView toWriteOff(Integer id) {ModelAndView mv = null;try {mv = new ModelAndView();mv.addObject("partnerId", id);SysPartners sysPartner = sysPartnersService.getByPrimaryKey(id);//传递对象，防止对象错误mv.addObject("partnerName", sysPartner.getPartnerName());mv.setViewName(ModelAndViewConstants.PARTNER_WRITEOFF_VIEW);LogService.getInstance(this).debug("获取销账数据成功："+ModelAndViewConstants.PARTNER_WRITEOFF_VIEW);}catch(Exception ex) {LogService.getInstance(this).error("获取销账数据失败：" + ex.getMessage(), ex);mv = new ModelAndView(ModelAndViewConstants.ERROR_VIEW);}return mv;}

此action作用是获取要销账的对象并传递过去，执行跳转的jsp页面，也就是下面的弹窗。

弹窗jsp页面

<div class="bjui-pageContent" style="background: #FFF;"><form id="WriteOffRecordForm" action="${ctx}/sys/cooperativePartnersManageAction/doWriteOff"data-toggle="validate" enctype="multipart/form-data"><input type="hidden" name="partnerId" id="partnerId" value="${partnerId }"><input type="hidden" name="status" id="status" value="${dataResult.status}"><table class="table table-condensed table-hover"><tbody><tr style="height: 30px;"><td><label for="partnerName" class="control-label x90">销账对象：</label><label for="partnerName" class="control-label x90">${partnerName}</label></td></tr><tr style="height: 30px;"><td><label for="name" class="control-label x90">确定要销账吗？</label></td></tr></table></form>
</div>
<div class="bjui-pageFooter"><ul><li><button type="button" class="btn-close" data-icon="close">关闭</button></li><li><button type="submit" class="btn-default" data-icon="save" >销账</button></li></ul>
</div>

弹窗点击提交后的action

@ResponseBody@RequestMapping(value="/doWriteOff")public Map<String, Object> doWriteOff(Integer partnerId) {Map<String, Object> jsonResult = null;try {//与配置权限管理中相对应，实现添加或编辑完实时更新String tabid = tabid(ModelAndViewConstants.PARTNER_SYS_ID);String msg = "销账成功";int result;SysPartners sysPartner = sysPartnersService.getByPrimaryKey(partnerId);if(sysPartner.getCurrentAdvanceMoney().compareTo(new BigDecimal("0.00"))==0 ) {msg="此用户当前预付款为0";}else {result =passPartnersBillseriaService.doWriteOff(partnerId,sysPartner);msg = "销账成功";}Integer statusCode = 200;jsonResult = JsonResult.jsonReturn(statusCode, msg, tabid);}catch(Exception ex) {LogService.getInstance(this).error("销账失败：" + ex.getMessage(), ex);String msg =  "销账失败：" + ex.getMessage();jsonResult = JsonResult.jsonReturnErr(msg);}return jsonResult;}

BJUI实现点击按钮弹窗，提交到后台action后回显数据流程整理相关推荐

BJUI使用ajax异步表单提交时后台action要加@ResponseBody
场景在使用BJUI的ajaxform异步表单提交时,后台直接使用 @RequestMapping时不能正常回显消息. 知识储备 ajaxform异步表单提交通过data属性使用(带验证): < ...
华为手表开发：WATCH 3 Pro（5）点击按钮弹窗
华为手表开发:WATCH 3 Pro(5)点击按钮弹窗初环境与设备创建项目认识目录结构修改首页 -> 新建按钮 " 按钮 " 文件名:**index.hml** 引 ...
如何点击按钮弹出新窗口，输入数据后返回并刷新页面
如何点击按钮弹出新窗口,输入数据后返回并刷新页面? 作者:孟宪会出自:[孟宪会之精彩世界] 发布日期:2003年7月8日 4点0分13秒在一些.NET论坛中有人经常会问:如何在页面中点击按钮打开新 ...
html中searchbutton点击没有反应,点击按钮加载完整的HTML后，使用Selenium加载其他元素...
我想刮一页并收集所有链接.该页面显示30个条目并查看完整列表,点击全部加载按钮是必要的.点击按钮加载完整的HTML后,使用Selenium加载其他元素我使用下面的代码: from selenium ...
vue点击按钮弹窗显示图片
需求是根据当前表格的行数据来获取对应的图片.然后我的行数据里已经有了id值,图片的名称也是id值.所以先通过按钮点击获取对应行的数据.这是写在表格里的按钮. <template slot-sco ...
Winform中实现点击按钮弹窗输入密码验证通过后执行相应逻辑
场景在Winform上添加了一些按钮,但是不想让按钮随意被点击,点击按钮后会提示你输入密码. 输入正确密码才能执行相应的逻辑. 实现效果如下: 注: 博客: BADAO_LIUMANG_QIZHI的 ...
[导入]如何点击按钮弹出新窗口，输入数据后返回并刷新页面？（老孟）
在一些.NET论坛中有人经常会问:如何在页面中点击按钮打开新页面,输入数据,然后返回到初始页面并进行更新?要解决这个问题,应该弄清楚window.showModalDialog()的用法,本人在htt ...
微信页面关于点击按钮关注公众号被封后的一点变通
项目jsp上遇到了这个问题,Boss要求在微信页面打开时点击按钮关注公众号.开始时使用 <ahref="weixin://profile/你的微信Id">点击关注< ...
vue 实现el-select组件配合 el-tabs 完成动态tabs然后有勾选全选，还有模拟提交，回显数据
cv即可使用 <!DOCTYPE html> <!DOCTYPE html> <html lang="en"><head><m ...