對layui中table組件工具欄的使用詳解

更新時間：2019年09月19日 09:49:01 作者：初相識鏈接終相守

今天小編就為大家分享一篇對layui中table組件工具欄的使用詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

layui工具欄

第一步：在table中引入table，在table控件下加入:

fixed：'right',title:'操作',width:"28%",align:'center',toolbar:"#barlist"

第二步：在table標簽中加入以下js代碼：

 <script type="text/html" id="barlist">
      <!--<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>-->
      {{# if(d.forbidden=="0"){ }}
      <a class="layui-btn layui-btn-xs" lay-event="jinyong">禁用</a>
      {{# } else if(d.forbidden=="1"){}}
      <a class="layui-btn layui-btn-xs" lay-event="jiechu">解除</a>
      {{# } }}

      <a class="layui-btn layui-btn-xs" lay-event="edit">編輯</a>
      <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">刪除</a>
    </script>

第三步：監(jiān)聽工具欄

table.on('tool(listfilter)', function (obj) { //注：tool是工具條事件名，test是table原始容器的屬性 lay-filter="對應的值"
      var data = obj.data //獲得當前行數據
          , layEvent = obj.event; //獲得 lay-event 對應的值
      if (layEvent === 'detail') {
        layer.msg('ID：' + data.id + ' 的查看操作');
      } else if (layEvent === 'del') {
        layer.confirm('真的刪除行么', function (index) {
          obj.del(); //刪除對應行（tr）的DOM結構
          console.log(data.id)
          $.ajax({
            url: "",
            type: "DELETE",
            data: {"id": data.id},
            dataType: "json",
            beforeSend: function (request) {
              request.setRequestHeader("Authorization", window.sessionStorage.token);
            },
            success: function (data) {
              if (data.code == 200) {
                obj.del();
                layer.close(index);
                layer.msg(data.msg, {icon: 6});
                parent.table.reload('list', {});

              } else if (data.code == 401) {
                obj.del();
                layer.close(index);
                layer.msg("登陸已過期，請重登", {icon: 6});
                location.href = "./login.html";
              }
              else {
                layer.msg(data.msg, {icon: 5});
              }
            }
          });
          layer.close(index);
          //向服務端發(fā)送刪除指令
        });
      } else if (layEvent === 'edit') {
        console.log(data)

        x_admin_show('編輯', 'admin-edit.html?id=' + data.id, '900', '500');

//        layer.msg('編輯操作');
      } else if (layEvent === 'jinyong') {
        var x = this;
        layer.confirm('確定要禁用此用戶麼', function (index) {
          $(x).text("解除");
          $.ajax({
            url: "",
            type: "PUT",
            data: {
              "id": data.id,
              "forbidden": "1"
            },
            dataType: "json",
            beforeSend: function (request) {
              request.setRequestHeader("Authorization", window.sessionStorage.token);
            },
            success: function (data) {
              if (data.code == 200) {
                layer.close(index);
                layer.msg(data.msg, {icon: 6});
              } else if (data.code == 401) {
                layer.close(index);
                layer.msg("登陸已過期，請重登", {icon: 6});
                location.href = "./login.html";
              }
              else {
                layer.msg(data.msg, {icon: 5});
              }
            }
          });
        });
//        layer.msg('編輯操作');
      } else if (layEvent === 'jiechu') {
        var x = this;

        layer.confirm('確定要解除禁用麼', function (index) {
          $(x).text("解除");
          $.ajax({
            url: "http://134.175.36.40/api/admin/usual",
            type: "PUT",
            data: {
              "id": data.id,
              "forbidden": "0"
            },
            dataType: "json",
            beforeSend: function (request) {
              request.setRequestHeader("Authorization", window.sessionStorage.token);
            },
            success: function (data) {
              if (data.code == 200) {
                layer.close(index);
                layer.msg(data.msg, {icon: 6});
              } else if (data.code == 401) {
                layer.close(index);
                layer.msg("登陸已過期，請重登", {icon: 6});
                location.href = "./login.html";
              }
              else {
                layer.msg(data.msg, {icon: 5});
              }
            }
          });
        });
      }
    });

以上這篇對layui中table組件工具欄的使用詳解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: