SSM框架JSP使用Layui實現layer彈出層效果

 更新時間:2020-01-26 03:00:15   作者:佚名   我要評論(0)

最近做的系統里,使用layui當作前端的框架,就是用了layui自帶的layer彈出層,效果圖如下。

首先,導入layui需要的css,js文件,這個就不需要多說了。但是有關鍵的

最近做的系統里,使用layui當作前端的框架,就是用了layui自帶的layer彈出層,效果圖如下。

首先,導入layui需要的css,js文件,這個就不需要多說了。但是有關鍵的一步必須要做,也是許多新手會常犯的錯誤,就是沒有預定義layui的form和layer,導致表單和彈出層不顯示。

下面是layui的預定義。

layui.use(['jquery', 'table', 'layer', 'form'], function() {
  // 加載layui模塊,使用其推薦的【預先加載】方式,詳見官網【模塊規范】一節
  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彈出層需要的代碼。      

//監聽行工具事件
    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彈出層效果,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!
如果你覺得本文對你有幫助,歡迎轉載,煩請注明出處,謝謝!

您可能感興趣的文章:

  • 使用layui的layer組件做彈出層的例子
  • 解決layui彈出層layer的area過大被遮擋的問題
  • 在layui中layer彈出層點擊事件無效的解決方法
  • 解決layer彈出層自適應頁面大小的問題
  • 解決layer彈出層的內容頁點擊按鈕跳轉到新的頁面問題
  • layer實現關閉彈出層刷新父界面功能詳解
  • 詳解Layer彈出層樣式
  • jQuery Layer彈出層傳值到父頁面的實現代碼

相關文章

  • SSM框架JSP使用Layui實現layer彈出層效果

    SSM框架JSP使用Layui實現layer彈出層效果

    最近做的系統里,使用layui當作前端的框架,就是用了layui自帶的layer彈出層,效果圖如下。 首先,導入layui需要的css,js文件,這個就不需要多說了。但是有關鍵的
    2020-01-26
  • Bash 腳本實現每次登錄到 Shell 時可以查看 Linux 系統信息

    Bash 腳本實現每次登錄到 Shell 時可以查看 Linux 系統信息

    Linux 中有很多可以查看系統信息如處理器信息、生產商名字、序列號等的命令。你可能需要執行多個命令來收集這些信息。同時,記住所有的命令和他們的選項也是有難度。
    2020-01-25
  • shell 里面的奇葩字符實現

    shell 里面的奇葩字符實現

    在我接觸過的編程語言里面,最奇葩的兩個就屬 JavaScript 和 Shell 了。因為它們有著太多的語法糖跟特殊字符,總是能夠讓你措手不及,并且編程習慣也跟Java 和 Pyth
    2020-01-25
  • flask框架渲染Jinja模板與傳入模板變量操作詳解

    flask框架渲染Jinja模板與傳入模板變量操作詳解

    本文實例講述了flask框架渲染Jinja模板與傳入模板變量操作。分享給大家供大家參考,具體如下: 1. 模板簡介 模板是一個web開發中必備的模塊,因為我們在渲染一個網頁
    2020-01-25
  • yii2.0框架場景的簡單使用示例

    yii2.0框架場景的簡單使用示例

    本文實例講述了yii2.0框架場景的簡單使用。分享給大家供大家參考,具體如下: 一、規則中使用場景 規則場景的使用 模型層 public function rules() { return [
    2020-01-25
  • golang切片內存應用技巧詳解

    golang切片內存應用技巧詳解

    在 Go 語言中切片是使用非常頻繁的一種聚合類型,它代表變長的序列,底層引用一個數組對象。一個切片由三個部分構成:指針、長度和容量。指針指向該切片自己第一個元
    2020-01-25
  • 分享6個Go處理字符串的技巧小結

    分享6個Go處理字符串的技巧小結

    如果你從 Ruby 或者 Python 轉型到 Go,將會有很多語言差異需要學習,其中很多問題都是圍繞處理 string 類型。 下面是一些字符串的技巧,這些技巧解決了我在使用
    2020-01-25
  • 淺談go中defer的一個隱藏功能

    淺談go中defer的一個隱藏功能

    在開始使用Go進行編碼時,Defer是要關注的一個很重要的特性。它非常簡單:在任何函數中,給其他函數的調用加上前綴 defer以確保該函數在外部函數退出之前立即執行,
    2020-01-25
  • Go 驗證字符串中是否包含中文(推薦)

    Go 驗證字符串中是否包含中文(推薦)

    發現一個驗證字符串是否包含中文滴時候,一個比正則更好使滴方法,而且是golang 自帶滴驗證。 不需要自己寫正則驗證,代碼如下: package main import ( "fmt"
    2020-01-25
  • 詳解golang中發送http請求的幾種常見情況

    詳解golang中發送http請求的幾種常見情況

    方式一 使用http.Newrequest 先生成http.client -> 再生成 http.request -> 之后提交請求:client.Do(request) -> 處理返回結果,每一步的過程都可以設置一些具體
    2020-01-25

最新評論

老快3投注技巧 佳永配资可以选择吗? 吉林快3开奖快结果一定牛 正规配资 北京十一选五走势图下载 059期排列3试机号 新开盘股票 广东11选5在线预测计划 红牛策略配资 舟山飞鱼开奖走势图 好运快3走势图 大发快三的投注技巧 正规配资 湖南快乐十分规则 九鼎新材股票行情 快乐8登录网址导航 股票涨跌跟什么有关系