最近做的系統(tǒng)里，使用layui當(dāng)作前端的框架，就是用了layui自帶的layer彈出層，效果圖如下。
首先，導(dǎo)入layui需要的css，js文件，這個(gè)就不需要多說(shuō)了。但是有關(guān)鍵的一步必須要做，也是許多新手會(huì)常犯的錯(cuò)誤，就是沒(méi)有預(yù)定義layui的form和layer，導(dǎo)致表單和彈出層不顯示。
下面是layui的預(yù)定義。
layui.use(['jquery', 'table', 'layer', 'form'], function() {
// 加載layui模塊，使用其推薦的【預(yù)先加載】方式，詳見(jiàn)官網(wǎng)【模塊規(guī)范】一節(jié)
var $ = layui.$;
var table = layui.table;
var layer = layui.layer;
var form = layui.form;
定義完之后可以先寫layer彈出層的表單樣式，下面是我的layer彈出層表單樣式。
!-- 更新會(huì)議彈出層 -->
div id="update-layer" style="display: none; padding: 20px">
form id="update-form" class="layui-form layui-form-pane" lay-filter="update-form">
div class="layui-form-item" style="display: none;">
label class="layui-form-label">ID/label>
div class="layui-input-block">
input type="text" name="id" class="layui-input" readonly>
/div>
/div>
div class="layui-form-item">
label class="layui-form-label">會(huì)議主題/label>
div class="layui-input-block">
input type="text" name="subject" class="layui-input" lay-verify="required" autocomplete="off">
/div>
/div>
div class="layui-form-item layui-form-text">
label class="layui-form-label">備注/label>
div class="layui-input-block">
textarea name="remarks" placeholder="請(qǐng)輸入內(nèi)容" class="layui-textarea" >/textarea>
/div>
/div>
div class="layui-form-item">
div class="layui-input-block">
button class="layui-btn" lay-submit lay-filter="update-form-submit">提交/button>
button type="reset" class="layui-btn layui-btn-primary">重置/button>
/div>
/div>
/form>
/div>
下面是layer彈出層需要的代碼。
//監(jiān)聽(tīng)行工具事件
table.on('tool(test)', function(obj){
var data = obj.data;
//console.log(obj)
if(obj.event === 'del'){
$.ajax({
url: "/delMeeting",
type: "POST",
data: {id: data.id,roomShStatus: data.roomShStatus},
success: function (msg) {
if (msg) {
//刪除這一行
obj.del();
//關(guān)閉彈框
layer.msg("刪除成功", {icon: 6});
} else {
layer.msg("刪除失敗", {icon: 6});
}
}
});
}
else if(obj.event === 'update'){
// 每次顯示更新會(huì)議室的表單前自動(dòng)為表單填寫該行的數(shù)據(jù)
form.val('update-form', {
"id": data.id,
"subject": data.subject,
"remarks": data.remarks
});
// 顯示更新用戶表單的彈出層
layer.open({
type: 1,
title: '更新會(huì)議室',
skin: 'layui-layer-molv',
area: ['500px'],
content: $('#update-layer')
});
// 更新會(huì)議室表單提交
form.on('submit(update-form-submit)', function(data) {
// ajax方式更新會(huì)議室
$.ajax({
url: "updateMeeting",
type: "POST",
data: JSON.stringify(data.field),
contentType: 'application/json',
dataType: 'json',
success: function(data) {
if (data.status == 0) {
layer.close(layer.index);
layer.msg('更新成功');
table.reload('test');
$("#update-user-form")[0].reset();
layui.form.render();
} else if(data.status == 1) {
layer.close(layer.index);
layer.msg('更新失敗');
$("#update-user-form")[0].reset();
layui.form.render();
}
},
error: function() {
console.log("ajax error");
}
});
// 阻止表單跳轉(zhuǎn)
return false;
})
}
});
直接復(fù)制上面的代碼，稍作修改，就可以生成自己想要的layer彈出層了
總結(jié)
以上所述是小編給大家介紹的SSM框架JSP使用Layui實(shí)現(xiàn)layer彈出層效果，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
您可能感興趣的文章:- Java中SSM框架實(shí)現(xiàn)增刪改查功能代碼詳解
- ssm+vue前后端分離框架整合實(shí)現(xiàn)(附源碼)
- Java后端SSM框架圖片上傳功能實(shí)現(xiàn)方法解析
- SSM框架下實(shí)現(xiàn)登錄注冊(cè)的示例代碼
- 使用IDEA搭建SSM框架的詳細(xì)教程(spring + springMVC +MyBatis)
- 重新啟動(dòng)IDEA時(shí)maven項(xiàng)目SSM框架文件變色所有@注解失效
- 快速搭建SSM框架（Maven）五步曲的方法步驟
- SSM框架中測(cè)試單元的使用 spring整合Junit過(guò)程詳解
- Java SSM框架如何添加寫日志功能
