对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>

第三步：监听工具栏

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);
          //向服务端发送删除指令
        });
      } 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组件工具栏的使用详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。