SSM框架JSP使用Layui實現layer彈出層效果
最近做的系統里,使用layui當作前端的框架,就是用了layui自帶的layer彈出層,效果圖如下。
首先,導入layui需要的css,js文件,這個就不需要多說了。但是有關鍵的一步必須要做,也是許多新手會常犯的錯誤,就是沒有預定義layui的form和layer,導致表單和彈出層不顯示。
下面是layui的預定義。
layui.use(['jquery', 'table', 'layer', 'form'], function() { // 加載layui模塊,使用其推薦的【預先加載】方式,詳見官網【模塊規(guī)范】一節(jié) var $ = layui.$; var table = layui.table; var layer = layui.layer; var form = layui.form;
定義完之后可以先寫layer彈出層的表單樣式,下面是我的layer彈出層表單樣式。
<!-- 更新會議彈出層 --> <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">會議主題</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="請輸入內容" 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)聽行工具事件 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(); //關閉彈框 layer.msg("刪除成功", {icon: 6}); } else { layer.msg("刪除失敗", {icon: 6}); } } }); } else if(obj.event === 'update'){ // 每次顯示更新會議室的表單前自動為表單填寫該行的數據 form.val('update-form', { "id": data.id, "subject": data.subject, "remarks": data.remarks }); // 顯示更新用戶表單的彈出層 layer.open({ type: 1, title: '更新會議室', skin: 'layui-layer-molv', area: ['500px'], content: $('#update-layer') }); // 更新會議室表單提交 form.on('submit(update-form-submit)', function(data) { // ajax方式更新會議室 $.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"); } }); // 阻止表單跳轉 return false; }) } });
直接復制上面的代碼,稍作修改,就可以生成自己想要的layer彈出層了
總結
以上所述是小編給大家介紹的ssm框架jsp使用layui實現layer彈出層效果,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對碩編程網站的支持!
如果你覺得本文對你有幫助,歡迎轉載,煩請注明出處,謝謝!
相關文章
- jsp+servlet實現文件上傳與下載功能
- EJB3.0部署消息驅動Bean拋javax.naming.NameNotFoundException異常
- 在JSP中使用formatNumber控制要顯示的小數位數方法
- 秒殺系統Web層設計的實現方法
- 將properties文件的配置設置為整個Web應用的全局變量實現方法
- JSP使用過濾器防止Xss漏洞
- 在JSP頁面中動態(tài)生成圖片驗證碼的方法實例
- 詳解JSP 內置對象request常見用法
- 使用IDEA編寫jsp時EL表達式不起作用的問題及解決方法
- jsp實現局部刷新頁面、異步加載頁面的方法
- Jsp中request的3個基礎實踐
- JavaServlet的文件上傳和下載實現方法
- JSP頁面的靜態(tài)包含和動態(tài)包含使用方法