欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

SSM框架JSP使用Layui實(shí)現(xiàn)layer彈出層效果

 更新時(shí)間：2019年12月17日 08:53:29   作者：i s  
這篇文章主要介紹了SSM框架JSP使用Layui實(shí)現(xiàn)layer彈出層效果,文章通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

最近做的系統(tǒng)里，使用layui當(dāng)作前端的框架，就是用了layui自帶的layer彈出層，效果圖如下。

首先，導(dǎo)入layui需要的css，js文件，這個(gè)就不需要多說了。但是有關(guān)鍵的一步必須要做，也是許多新手會(huì)常犯的錯(cuò)誤，就是沒有預(yù)定義layui的form和layer，導(dǎo)致表單和彈出層不顯示。

下面是layui的預(yù)定義。

layui.use(['jquery', 'table', 'layer', 'form'], function() {
  // 加載layui模塊，使用其推薦的【預(yù)先加載】方式，詳見官網(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)聽行工具事件
    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ì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

相關(guān)文章

最新評(píng)論