SSM框架JSP使用Layui實(shí)現(xiàn)layer彈出層效果
最近做的系統(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;
定義完之后可以先寫(xiě)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)為表單填寫(xiě)該行的數(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)注明出處,謝謝!
上一篇:沒(méi)有了
欄 目:JSP編程
下一篇:沒(méi)有了
本文標(biāo)題:SSM框架JSP使用Layui實(shí)現(xiàn)layer彈出層效果
本文地址:http://mengdiqiu.com.cn/a1/JSPbiancheng/11399.html
您可能感興趣的文章
- 01-11在JSP中使用formatNumber控制要顯示的小數(shù)位數(shù)方法
- 01-11jsp文件下載功能實(shí)現(xiàn)代碼
- 01-11JSP頁(yè)面跳轉(zhuǎn)方法大全
- 01-11jsp 使用request為頁(yè)面添加靜態(tài)數(shù)據(jù)的實(shí)例
- 01-11JSP servlet實(shí)現(xiàn)文件上傳下載和刪除
- 01-11JSP狀態(tài)管理的簡(jiǎn)單介紹
- 01-11jsp+servlet實(shí)現(xiàn)文件上傳與下載功能
- 01-11JSP的setProperty的使用方法
- 01-11jsp中sitemesh修改tagRule技術(shù)分享
- 01-11Jsp+Servlet實(shí)現(xiàn)文件上傳下載 文件上傳(一)


閱讀排行
- 1C語(yǔ)言 while語(yǔ)句的用法詳解
- 2java 實(shí)現(xiàn)簡(jiǎn)單圣誕樹(shù)的示例代碼(圣誕
- 3利用C語(yǔ)言實(shí)現(xiàn)“百馬百擔(dān)”問(wèn)題方法
- 4C語(yǔ)言中計(jì)算正弦的相關(guān)函數(shù)總結(jié)
- 5c語(yǔ)言計(jì)算三角形面積代碼
- 6什么是 WSH(腳本宿主)的詳細(xì)解釋
- 7C++ 中隨機(jī)函數(shù)random函數(shù)的使用方法
- 8正則表達(dá)式匹配各種特殊字符
- 9C語(yǔ)言十進(jìn)制轉(zhuǎn)二進(jìn)制代碼實(shí)例
- 10C語(yǔ)言查找數(shù)組里數(shù)字重復(fù)次數(shù)的方法
本欄相關(guān)
- 01-11web下載文件和跳轉(zhuǎn)的方法
- 01-11Spring注入Date類型的三種方法總結(jié)
- 01-11在JSP中使用formatNumber控制要顯示的小
- 01-11Properties 持久的屬性集的實(shí)例詳解
- 01-11EJB3.0部署消息驅(qū)動(dòng)Bean拋javax.naming.Na
- 01-11jsp文件下載功能實(shí)現(xiàn)代碼
- 01-11JSP頁(yè)面跳轉(zhuǎn)方法大全
- 01-11詳解Spring的核心機(jī)制依賴注入
- 01-11jsp 使用request為頁(yè)面添加靜態(tài)數(shù)據(jù)的實(shí)
- 01-11Spring獲取ApplicationContext對(duì)象工具類的
隨機(jī)閱讀
- 01-11Mac OSX 打開(kāi)原生自帶讀寫(xiě)NTFS功能(圖文
- 01-10C#中split用法實(shí)例總結(jié)
- 01-10delphi制作wav文件的方法
- 01-11ajax實(shí)現(xiàn)頁(yè)面的局部加載
- 08-05織夢(mèng)dedecms什么時(shí)候用欄目交叉功能?
- 01-10SublimeText編譯C開(kāi)發(fā)環(huán)境設(shè)置
- 08-05DEDE織夢(mèng)data目錄下的sessions文件夾有什
- 04-02jquery與jsp,用jquery
- 08-05dedecms(織夢(mèng))副欄目數(shù)量限制代碼修改
- 01-10使用C語(yǔ)言求解撲克牌的順子及n個(gè)骰子