bootstrap模態(tài)框——使用一個(gè)模態(tài)框完成兩個(gè)功能
來(lái)源：Eve慕
發(fā)布時(shí)間：2018-07-02 15:23:31
閱讀量：1947
在用戶列表中希望能用同一個(gè)模態(tài)框完成添加用戶和修改用戶兩個(gè)功能。
添加用戶
修改用戶
這兩個(gè)功能在提交表單之后都會(huì)返回原頁(yè)面，所以使用ajax進(jìn)行處理
主要的難點(diǎn)在于：
1、在點(diǎn)擊不同按鈕時(shí)調(diào)用不同函數(shù)。
在點(diǎn)擊修改頁(yè)面時(shí)，需要將當(dāng)前用戶的信息傳入模態(tài)框中，并設(shè)置用戶名字段為不可修改，點(diǎn)擊模態(tài)框中提交時(shí)調(diào)用后臺(tái)修改的方法；在點(diǎn)擊添加頁(yè)面時(shí)，需要清空之前模態(tài)框中數(shù)據(jù)，點(diǎn)擊提交按鈕時(shí)，調(diào)用的是后臺(tái)中添加的方法。
2、不同功能的表單驗(yàn)證不同。
表單驗(yàn)證使用jQuery validate插件。在添加時(shí)，需要驗(yàn)證用戶名不為空、長(zhǎng)度和是否重復(fù)。而修改時(shí)不需要對(duì)用戶名做驗(yàn)證。所以需要自定義validate。
3、關(guān)于用戶id的賦值。
修改功能中，需要將當(dāng)前表單內(nèi)容和用戶id一起傳入后臺(tái)，才能進(jìn)行修改。而添加時(shí)，由于在數(shù)據(jù)庫(kù)中將用戶id設(shè)為自增模式，所以不需要傳id的值，只傳其他字段的值即可。但是表單數(shù)據(jù)的傳輸是封裝好之后一起傳輸，所以要做額外處理。
前端代碼：
<!DOCTYPE html><html lang="en" xmlns:th="http://www.thymeleaf.org"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>用戶列表</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據(jù)需要只加載單個(gè)插件。 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--validate驗(yàn)證表單插件-->
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script></head><script>
//定義一個(gè)變量用于存儲(chǔ)添加和修改時(shí)不同的URL
var myUrl; //傳入點(diǎn)擊的用戶id，獲取該用戶信息并放入表單中
function update(id) {
//將提交表單的URL變?yōu)閡pdate
myUrl = '/updateUser'; if(!id){
alert('id錯(cuò)誤'); return false;
}
$.ajax(
{
url:"/toUpdateUser",
data:{"id":id},
type:"post", //解決編碼問(wèn)題
scriptCharset: 'utf-8',
beforeSend:function () {
return true;
},
success:function (data) {
if(data){ //解析json數(shù)據(jù)
var data = data; var user = eval("("+data + ")"); //賦值
$('#userID').val(user.userID);
$('#username').val(user.username);
$('#password').val(user.password);
$('#phone').val(user.phone);
$('#email').val(user.email); //在修改用戶信息時(shí)，username不可修改
$('#username').attr("readonly","readonly");
}
}
});
} //表單字段驗(yàn)證
//如果按照一般驗(yàn)證的寫(xiě)法，只能調(diào)用整個(gè)表單的validate函數(shù)，而不能調(diào)用自定義的username驗(yàn)證，所以把兩個(gè)函數(shù)封裝成為一個(gè)，在點(diǎn)擊按鈕時(shí)調(diào)用
function vali() {
//form-data表單驗(yàn)證。
$("#form-data").validate({
onfocusout:function(element) { $(element).valid(); },
onblur: function(element) { $(element).valid(); }, //鼠標(biāo)移開(kāi)驗(yàn)證。這里寫(xiě)onblue:true沒(méi)有效果
onsubmit:true, //提交時(shí)驗(yàn)證（有效）
onkeyup:false,
rules:{
password:{
required:true,
rangelength:[5,20]
},
phone:{
required:true,
digits:true,
rangelength:[11,11]
},
email:{
required:true,
email:true
}
},
messages:{
password:{
required:"請(qǐng)?zhí)顚?xiě)密碼",
rangelength:"密碼長(zhǎng)度不符合規(guī)范"
},
phone:{
required:"請(qǐng)?zhí)顚?xiě)手機(jī)號(hào)",
digits:"請(qǐng)?zhí)顚?xiě)正確的手機(jī)號(hào)",
rangelength:"請(qǐng)?zhí)顚?xiě)正確的手機(jī)號(hào)"
},
email:{
required:"請(qǐng)?zhí)顚?xiě)郵箱",
email:"請(qǐng)?zhí)顚?xiě)正確的郵箱"
}
},
submitHandler:function (form) {
checkForm();
}
}); //自定義動(dòng)態(tài)username驗(yàn)證
//username的校驗(yàn)只在添加操作時(shí)才需要
//通過(guò)對(duì)username的readonly屬性驗(yàn)證來(lái)判斷是添加還是更新
if($('#username').attr("readonly")==undefined){
$('#username').rules("add",{
required:true,
rangelength:[5,20],
remote: {
type: "POST",
url: "/checkUsername",
data: {
username: function () {
return $("#username").val();
}
},
dataType: "html",
dataFilter: function(data) {
if (data == "true") return true; else
return false;
}
},
messages:{
required:"請(qǐng)?zhí)顚?xiě)用戶名",
remote:"用戶名已存在",
rangelength:"用戶名長(zhǎng)度不符合規(guī)范"
}
});
}
} /*
點(diǎn)擊添加用戶時(shí)需要做的操作：
1.修改提交表單的URL
2.將username的readonly屬性移除
3.清空表單數(shù)據(jù)
*/
function setUrl() {
myUrl='/addUser';
$('#username').removeAttr("readonly");
$('#form-data input').val(" ");
} //提交表單
function checkForm() {
var formData; //將表單內(nèi)容序列化，即可得到相應(yīng)對(duì)象，直接傳到后臺(tái)
//userid為空時(shí)，即當(dāng)前操作為添加用戶操作，此時(shí)只序列化除id之外四個(gè)屬性，添加用戶時(shí)id自增長(zhǎng)。如果id為空也被序列化會(huì)報(bào)錯(cuò)
if($('#userID').val()==null||$('#userID').val()==undefined||$('#userID').val().length==0){
formData = $('#username,#password,#email,#phone').serializeArray();
} //否則為更新操作，userid為隱藏input，并且已經(jīng)被賦值，序列化整個(gè)表單即可
else{
formData = $('#form-data').serializeArray();
}
$.ajax({
url:myUrl, //根據(jù)操作傳入不同的URL
data:formData, //傳入序列化的表單對(duì)象
type:"post",
datatype:'text',
async:false, //異步傳輸
timeout:50000, //設(shè)置編碼
contentType: "application/x-www-form-urlencoded; charset=utf-8",
beforeSend:function () {
$('#tip').html('<span style="color: cornflowerblue">正在處理...</span>'); return true;
},
success:function (data) {
if(data > 0){
$('#tip').html('<span style="color: green">操作成功！</span>');
location.reload();
}else{
$('#tip').html('<span style="color: red">操作失敗，請(qǐng)重試</span>');
}
},
error:function(XMLHttpRequest, textStatus, errorThrown) {
// alert(XMLHttpRequest.status);//狀態(tài)碼
// alert(XMLHttpRequest.readyState);//狀態(tài)
// alert(textStatus);//錯(cuò)誤信息
alert("出錯(cuò)了");
},
complete:function () {
}
});
}</script><body><div class="container-fluid">
<div class="tool">
<div class="row">
<form action="" class="form-horizontal">
<div class="col-sm-3">
<input type="text" id="search" class="form-control">
</div>
<div class="col-sm-1">
<button type="submit" class="btn btn-primary">搜索</button>
</div>
</form>
<div class="col-sm-4">
</div>
<div class="col-sm-2">
<button type="button" class="btn btn-warning" data-toggle="modal" data-target="#updateModal" onclick="setUrl()">添加用戶</button>
</div>
</div>
</div>
<br>
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>id</th>
<th>用戶名</th>
<th>密碼</th>
<th>電話</th>
<th>郵箱</th>
<th>操作</th>
</tr>
</thead>
<tbody >
<tr th:each="user : ${userlist}">
<td th:text="${user.userID}"></td>
<td th:text="${user.username}"></td>
<td th:text="${user.password}"></td>
<td th:text="${user.phone}"></td>
<td th:text="${user.email}"></td>
<td>
<!--傳入當(dāng)前用戶id-->
<button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#updateModal" th:onclick="'javascript: update('+${user.userID}+')' ">編輯</button>
<button type="button" class="btn btn-danger btn-sm" th:onclick="'javascript:deleteUser('+${user.userID}+')' ">刪除</button>
</td>
</tr>
</tbody>
</table>
<!--模態(tài)框-->
<form method="post" name="user" class="form-horizontal" role="form" id="form-data" style="margin: 20px;" >
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
× </button>
<h4 class="modal-title" id="updateModalLabel">
用戶信息 </h4>
</div>
<div class="modal-body">
<form action="" class="form-horizontal">
<!--userid為隱藏的input，便于update時(shí)的傳值-->
<input type="text" id="userID" name="userID" hidden>
<div class="form-group">
<label for="username" class="col-sm-3 control-label">用戶名</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="username" name="username" placeholder="用戶名長(zhǎng)度在5-18字符之間">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-3 control-label">密碼</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="password" name="password" placeholder="密碼長(zhǎng)度在5-20字符之間">
</div>
</div>
<div class="form-group">
<label for="phone" class="col-sm-3 control-label">手機(jī)號(hào)</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="phone" name="phone" placeholder="請(qǐng)輸入手機(jī)號(hào)">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-3 control-label">郵箱</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="email" name="email" placeholder="請(qǐng)輸入郵箱地址">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</button>
<!--type為submit時(shí)，會(huì)自動(dòng)調(diào)用該表單的驗(yàn)證，但是不會(huì)調(diào)用自己定義的動(dòng)態(tài)的username的驗(yàn)證，
所以把按鈕類型改為input，再手動(dòng)調(diào)用封裝好的驗(yàn)證函數(shù)-->
<button type="input" class="btn btn-primary" onclick="vali();">提交</button>
<span id="tip"></span>
</div>
</div>
</div>
</div>
</form></div><div th:insert="template/footer :: copyright"></div></body></html>原文地址https://blog.csdn.net/zxm490484080/article/details/80859485
13450931319
微信登錄
QQ登錄
微博登錄
售前咨詢
