modal--5.修改（子页面）

1      格式化按钮

1.1  图片

 

 

1.2  代码

'<aclass="green" href="#" onclick="openModal(\'update\','+id+',\''+value+'\''+')">'+'<i class="icon-pencilbigger-130"></i>'+'</a>' 

2      弹出框并初始化数据

2.1  Ajax

 

  //打开新增或者是更新模态框    function openModal(type,id,value){        globalType=type;        globalId=id;        if(type=='add'){            $('#bank_a').modal('show');        }        else if(type=='update'){            //根据id获取相应信息            $.ajax({                url : "${path}/financial/getBankById.do",                type : "get",                data : {                    fbId:id                },                timeout: 20000,                success : function(data) {                    $('#bank_u .profile-user-info.profile-user-info-striped').html(data);                    $('#bank_u').modal('show');                },                error: function (XMLHttpRequest, textStatus, errorThrown) {                    alert("访问后台发生错误:" + XMLHttpRequest.status)                }            });        }    }

 

2.2  弹出框

 

<!--修改弹出框--><div id="bank_u" class="modal" tabindex="-1">    <div class="modal-dialog">        <div class="modal-content">            <div class="modal-header">                <button type="button" class="close" data-dismiss="modal">×</button>                <h4 class="blue bigger" >更新银行卡信息</h4>            </div>            <div class="profile-user-infoprofile-user-info-striped">                <!--列表形式显示详细信息,内容动态生成-->            </div>            <div class="modal-footer">                <button class="btn btn-sm" data-dismiss="modal">                    <i class="icon-remove"></i>                    取消                </button>                <button class="btn btn-sm btn-primary" onclick="updateBank()">                    <i class="icon-ok"></i>                    提交审核                </button>            </div>        </div>    </div></div><!-- PAGE CONTENT ENDS -->

2.3  Java初始化数据

2.3.1  Controller

 

2.3.2  Service

 

2.3.3  Dao

2.4  子页面

 

<%@ page contentType="text/html;charset=UTF-8" language="java" %><%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %><%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %><c:set value="${pageContext.request.contextPath}" var="path" scope="page"/><div class="row">    <div class="col-xs-12">        <input type="hidden" id="fbId_u" value="${finaBank.id}">        <div class="form-group">            <label class="col-sm-3 control-label no-padding-right" for="bankName_u"> 选择银行: </label>            <div class="col-sm-9">                <input type="text" value="${finaBank.bankName}" id="bankName_u">            </div>        </div>        <div style="height:25px"></div>        <div class="form-group">            <label class="col-sm-3 control-label no-padding-right" for="realName_u"> 真实姓名： </label>            <div class="col-sm-9">                <input type="text" class="col-xs-10 col-sm-12" id="realName_u" value="${finaBank.realName}" placeholder="请输入真实姓名" />            </div>        </div>        <div style="height:25px"></div>        <div class="form-group">            <label class="col-sm-3 control-label no-padding-right" for="bankIdcard_u"> 身份证号： </label>            <div class="col-sm-9">                <input type="text" value="${finaBank.bankIdcard}" class="col-xs-10 col-sm-12" id="bankIdcard_u" />            </div>        </div>        <div style="height:25px"></div>        <div class="form-group">            <label class="col-sm-3 control-label no-padding-right" for="bankNumber_u"> 银行卡号： </label>            <div class="col-sm-9">                <input type="text"  value="${finaBank.bankNumber}" class="col-xs-10 col-sm-12" id="bankNumber_u" />            </div>        </div>        <div style="height:25px"></div>        <div class="form-group">            <label class="col-sm-3 control-label no-padding-right" for="bankNameZhi_u"> 开发支行： </label>            <div class="col-sm-9">                <input type="text" value="${finaBank.bankNameZhi}" class="col-xs-10 col-sm-12" id="bankNameZhi_u" />            </div>        </div>        <div style="height:25px"></div>        <div class="form-group">            <label class="col-sm-3 control-label no-padding-right" for="bankPhone_u"> 银行卡预留电话： </label>            <div class="col-sm-9">                <input type="text"  value="${finaBank.bankPhone}"  class="col-xs-10 col-sm-12" id="bankPhone_u" />            </div>        </div>    </div></div>

3      提交修改数据

3.1  Html

 

3.2  Js

 

  //修改银行    function updateBank(){        var fbId = $('#fbId_u').val().trim();        var bankName = $('#bankName_u').val().trim();        var realName = $('#realName_u').val().trim();        var bankIdcard = $('#bankIdcard_u').val().trim();        var bankNumber = $('#bankNumber_u').val().trim();        var bankNameZhi = $('#bankNameZhi_u').val().trim();        var bankPhone = $('#bankPhone_u').val().trim();        //进行验证        //将数据封装成json        var json={};        json['fbId'] = fbId;        json['userId'] = ${existUser.id};        json['hotelId'] = ${existUser.hotelId};        json['bankName'] = bankName;        json['realName'] = realName;        json['bankIdcard'] = bankIdcard;        json['bankNumber'] = bankNumber;        json['bankNameZhi'] = bankNameZhi;        json['bankPhone'] = bankPhone;        $.ajax({            url : "${path}/financial/updateBankById.do",            type : "post",            data : JSON.stringify(json),            processData : false,            contentType:'application/json',            success : function(data) {                if(data.result=="200"){                    alert(data.msg);                    //关闭弹出框                    $('#bank_u').modal('hide');                    //重新加载数据                    $("#bank").bootstrapTable('refresh', {url: '${path}/financial/getFinaBankList.do?id=${existUser.id}'});                }else{                    alert(data.msg);                }            }        });    }

3.3  Java

3.3.1  Controller

 

3.3.2  Service

 

3.3.3  Dao