layui表格工具栏：自定义按钮与操作菜单-优快云博客

layui表格工具栏：自定义按钮与操作菜单

【免费下载链接】layui 一套遵循原生态开发模式的 Web UI 组件库，采用自身轻量级模块化规范，易上手，可以更简单快速地构建网页界面。项目地址: https://gitcode.com/GitHub_Trending/la/layui

还在为表格操作功能单一而烦恼？想要为数据表格添加更多个性化操作按钮？layui表格组件的工具栏功能让你轻松实现自定义按钮与操作菜单，大幅提升数据管理效率！

通过本文，你将掌握：

✅ 基础工具栏配置与事件绑定
✅ 自定义按钮的多种实现方式
✅ 动态操作菜单的高级技巧
✅ 权限控制的按钮显示逻辑
✅ 实际业务场景的最佳实践

一、工具栏基础配置

layui表格的工具栏通过toolbar属性进行配置，支持三种使用方式：

1.1 布尔值启用默认工具栏

<table id="demo-table"></table>

<script>
layui.use('table', function(){
  var table = layui.table;
  
  table.render({
    elem: '#demo-table',
    url: '/api/data',
    toolbar: true, // 启用默认工具栏
    cols: [[
      {field: 'id', title: 'ID'},
      {field: 'username', title: '用户名'},
      {field: 'email', title: '邮箱'}
    ]]
  });
});
</script>

1.2 自定义工具栏模板

<!-- 工具栏模板 -->
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="add">
      <i class="layui-icon">&#xe654;</i> 添加
    </button>
    <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">
      <i class="layui-icon">&#xe640;</i> 删除
    </button>
    <button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="export">
      <i class="layui-icon">&#xe67d;</i> 导出
    </button>
  </div>
</script>

<table id="demo-table" lay-filter="demo-table"></table>

<script>
layui.use('table', function(){
  var table = layui.table;
  
  table.render({
    elem: '#demo-table',
    url: '/api/data',
    toolbar: '#toolbarDemo', // 引用自定义模板
    cols: [[
      {field: 'id', title: 'ID'},
      {field: 'username', title: '用户名'},
      {field: 'email', title: '邮箱'}
    ]]
  });
});
</script>

1.3 直接传入HTML字符串

table.render({
  elem: '#demo-table',
  url: '/api/data',
  toolbar: '<div class="layui-btn-container">' +
           '<button class="layui-btn layui-btn-sm" lay-event="refresh">刷新</button>' +
           '</div>',
  cols: [[/* 列配置 */]]
});

二、工具栏事件处理

工具栏按钮通过lay-event属性定义事件名称，在table.on('toolbar')中处理相应事件：

// 工具栏事件处理
table.on('toolbar(demo-table)', function(obj){
  var checkStatus = table.checkStatus(obj.config.id);
  var data = checkStatus.data;
  
  switch(obj.event){
    case 'add':
      // 添加操作
      layer.open({
        type: 2,
        title: '添加用户',
        content: '/user/add.html',
        area: ['500px', '400px'],
        end: function(){
          table.reload('demo-table'); // 重新加载表格
        }
      });
      break;
      
    case 'delete':
      // 删除操作
      if(data.length === 0){
        layer.msg('请选择要删除的数据');
        return;
      }
      
      layer.confirm('确定删除选中的 '+ data.length +' 条数据吗？', function(index){
        // 执行删除操作
        var ids = data.map(function(item){ return item.id; });
        
        $.post('/api/user/delete', {ids: ids}, function(res){
          if(res.code === 0){
            layer.msg('删除成功');
            table.reload('demo-table');
          } else {
            layer.msg('删除失败: ' + res.msg);
          }
        });
        
        layer.close(index);
      });
      break;
      
    case 'export':
      // 导出操作
      table.exportFile('demo-table');
      break;
      
    case 'refresh':
      // 刷新表格
      table.reload('demo-table');
      break;
  }
});

三、高级工具栏功能

3.1 动态权限控制

根据用户权限动态显示不同的工具栏按钮：

<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    {{# if(d.auth.add){ }}
    <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
    {{# } }}
    
    {{# if(d.auth.edit){ }}
    <button class="layui-btn layui-btn-sm" lay-event="edit">编辑</button>
    {{# } }}
    
    {{# if(d.auth.delete){ }}
    <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">删除</button>
    {{# } }}
  </div>
</script>

<script>
// 在渲染前设置权限数据
layui.data('userAuth', {
  key: 'auth',
  value: {
    add: true,
    edit: true, 
    delete: false
  }
});

var auth = layui.data('userAuth').auth;
var toolbarTpl = layui.laytpl($('#toolbarDemo').html()).render(auth);

table.render({
  elem: '#demo-table',
  toolbar: toolbarTpl,
  // 其他配置...
});
</script>

3.2 下拉菜单式工具栏

创建带有下拉菜单的复杂工具栏：

<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
    
    <div class="layui-btn-group">
      <button class="layui-btn layui-btn-sm" lay-event="export">导出</button>
      <button class="layui-btn layui-btn-sm" lay-event="dropdown">
        <i class="layui-icon">&#xe61a;</i>
      </button>
    </div>
    
    <div class="layui-btn-group">
      <button class="layui-btn layui-btn-sm" lay-event="batch">批量操作</button>
      <button class="layui-btn layui-btn-sm" lay-event="more">
        <i class="layui-icon">&#xe61a;</i>
      </button>
    </div>
  </div>
</script>

3.3 工具栏与行选择的联动

实现工具栏按钮与行选择状态的智能联动：

table.on('toolbar(demo-table)', function(obj){
  var checkStatus = table.checkStatus(obj.config.id);
  var selectedData = checkStatus.data;
  
  // 根据选择状态禁用/启用按钮
  var $toolbar = $(obj.config.elem).prev('.layui-table-tool');
  
  if(selectedData.length === 0){
    $toolbar.find('[lay-event="delete"]').addClass('layui-btn-disabled');
    $toolbar.find('[lay-event="edit"]').addClass('layui-btn-disabled');
  } else {
    $toolbar.find('[lay-event="delete"]').removeClass('layui-btn-disabled');
    $toolbar.find('[lay-event="edit"]').removeClass('layui-btn-disabled');
  }
  
  // 根据选择数量显示不同提示
  if(selectedData.length > 1){
    $toolbar.find('[lay-event="delete"]').text('删除(' + selectedData.length + ')');
  } else {
    $toolbar.find('[lay-event="delete"]').text('删除');
  }
});

四、实战案例：用户管理系统工具栏

下面是一个完整的用户管理系统工具栏实现：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>用户管理系统</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.8.18/dist/css/layui.css">
</head>
<body>

<!-- 工具栏模板 -->
<script type="text/html" id="userToolbar">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="addUser">
      <i class="layui-icon">&#xe654;</i> 添加用户
    </button>
    
    <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="editUser">
      <i class="layui-icon">&#xe642;</i> 编辑
    </button>
    
    <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="deleteUser">
      <i class="layui-icon">&#xe640;</i> 删除
    </button>
    
    <div class="layui-btn-group">
      <button class="layui-btn layui-btn-sm" lay-event="exportExcel">
        <i class="layui-icon">&#xe67d;</i> 导出Excel
      </button>
      <button class="layui-btn layui-btn-sm" lay-event="exportPDF">
        <i class="layui-icon">&#xe67d;</i> 导出PDF
      </button>
    </div>
    
    <button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="refresh">
      <i class="layui-icon">&#x1002;</i> 刷新
    </button>
  </div>
</script>

<table id="userTable" lay-filter="userTable"></table>

<!-- 操作列模板 -->
<script type="text/html" id="userAction">
  <a class="layui-btn layui-btn-xs" lay-event="view">查看</a>
  <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
</script>

<script src="https://cdn.jsdelivr.net/npm/layui@2.8.18/dist/layui.js"></script>
<script>
layui.use(['table', 'layer', 'jquery'], function(){
  var table = layui.table;
  var layer = layui.layer;
  var $ = layui.$;
  
  // 渲染表格
  table.render({
    elem: '#userTable',
    url: '/api/users',
    toolbar: '#userToolbar',
    page: true,
    cols: [[
      {type: 'checkbox', fixed: 'left'},
      {field: 'id', title: 'ID', width: 80, sort: true},
      {field: 'username', title: '用户名', width: 120},
      {field: 'email', title: '邮箱', width: 150},
      {field: 'role', title: '角色', width: 100},
      {field: 'status', title: '状态', width: 80, templet: function(d){
        return d.status === 1 ? 
          '<span class="layui-badge layui-bg-green">启用</span>' : 
          '<span class="layui-badge">禁用</span>';
      }},
      {field: 'createTime', title: '创建时间', width: 160, sort: true},
      {fixed: 'right', title: '操作', width: 150, align: 'center', toolbar: '#userAction'}
    ]]
  });
  
  // 工具栏事件处理
  table.on('toolbar(userTable)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id);
    var selectedData = checkStatus.data;
    
    switch(obj.event){
      case 'addUser':
        addUser();
        break;
        
      case 'editUser':
        if(selectedData.length !== 1){
          layer.msg('请选择一条数据编辑');
          return;
        }
        editUser(selectedData[0]);
        break;
        
      case 'deleteUser':
        if(selectedData.length === 0){
          layer.msg('请选择要删除的数据');
          return;
        }
        deleteUsers(selectedData);
        break;
        
      case 'exportExcel':
        exportData('excel');
        break;
        
      case 'exportPDF':
        exportData('pdf');
        break;
        
      case 'refresh':
        table.reload('userTable');
        break;
    }
  });
  
  // 操作列事件处理
  table.on('tool(userTable)', function(obj){
    var data = obj.data;
    
    switch(obj.event){
      case 'view':
        viewUser(data);
        break;
      case 'edit':
        editUser(data);
        break;
      case 'delete':
        deleteUser(data);
        break;
    }
  });
  
  // 具体功能实现
  function addUser() {
    layer.open({
      type: 2,
      title: '添加用户',
      content: '/user/add.html',
      area: ['600px', '500px'],
      end: function(){
        table.reload('userTable');
      }
    });
  }
  
  function editUser(user) {
    layer.open({
      type: 2,
      title: '编辑用户 - ' + user.username,
      content: '/user/edit.html?id=' + user.id,
      area: ['600px', '500px'],
      end: function(){
        table.reload('userTable');
      }
    });
  }
  
  function viewUser(user) {
    layer.open({
      type: 2,
      title: '查看用户 - ' + user.username,
      content: '/user/view.html?id=' + user.id,
      area: ['500px', '400px']
    });
  }
  
  function deleteUser(user) {
    layer.confirm('确定删除用户 "' + user.username + '" 吗？', function(index){
      $.post('/api/user/delete', {id: user.id}, function(res){
        if(res.success){
          layer.msg('删除成功');
          table.reload('userTable');
        } else {
          layer.msg('删除失败: ' + res.message);
        }
      });
      layer.close(index);
    });
  }
  
  function deleteUsers(users) {
    var names = users.map(function(u){ return u.username; }).join(', ');
    layer.confirm('确定删除选中的 ' + users.length + ' 个用户吗？<br>' + names, function(index){
      var ids = users.map(function(u){ return u.id; });
      
      $.post('/api/users/delete', {ids: ids}, function(res){
        if(res.success){
          layer.msg('删除成功');
          table.reload('userTable');
        } else {
          layer.msg('删除失败: ' + res.message);
        }
      });
      
      layer.close(index);
    });
  }
  
  function exportData(format) {
    var loading = layer.load();
    $.get('/api/users/export?format=' + format, function(url){
      layer.close(loading);
      window.location.href = url;
    });
  }
});
</script>
</body>
</html>

五、最佳实践与注意事项

5.1 性能优化建议

// 1. 使用数据重载代替完整重载
table.reloadData('userTable', {
  where: {keyword: 'search'}
});

// 2. 避免频繁的DOM操作
var $toolbar = $('.layui-table-tool').eq(0);
// 缓存工具栏元素引用，避免重复查找

// 3. 使用事件委托减少事件绑定
$(document).on('click', '.layui-table-tool [lay-event]', function(){
  var event = $(this).attr('lay-event');
  // 处理事件...
});

5.2 移动端适配

/* 移动端工具栏样式优化 */
@media screen and (max-width: 768px) {
  .layui-table-tool .layui-btn-container {
    flex-wrap: wrap;
    gap: 5px;
  }
  
  .layui-table-tool .layui-btn {
    margin-bottom: 5px;
    font-size: 12px;
    padding: 0 8px;
    height: 28px;
    line-height: 28px;
  }
  
  .layui-table-tool .layui-btn i {
    margin-right: 3px;
  }
}

5.3 错误处理与用户体验

table.on('toolbar(userTable)', function(obj){
  try {
    // 业务逻辑...
  } catch (error) {
    console.error('工具栏操作错误:', error);
    layer.msg('操作失败，请稍后重试');
  }
});

// 添加加载状态
function setToolbarLoading(event, loading) {
  var $btn = $('.layui-table-tool [lay-event="' + event + '"]');
  if(loading) {
    $btn.addClass('layui-btn-disabled').html('<i class="layui-icon layui-icon-loading"></i> 处理中...');
  } else {
    $btn.removeClass('layui-btn-disabled').html('原始文本');
  }
}

总结

layui表格工具栏提供了强大的自定义能力，通过合理的配置和事件处理，可以打造出功能丰富、用户体验优秀的表格操作界面。记住以下关键点：

灵活使用三种工具栏配置方式：布尔值、模板引用、HTML字符串
充分利用lay-event事件机制：实现按钮与业务逻辑的分离
注重用户体验：添加加载状态、错误处理、权限控制
性能优化：使用数据重载、缓存DOM引用、事件委托

掌握这些技巧，你就能轻松构建出专业级的数据表格操作界面，大幅提升开发效率和用户体验！

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考