layui.table组件的用法

最新推荐文章于 2024-03-27 12:34:06 发布

Geoffwo

最新推荐文章于 2024-03-27 12:34:06 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： layui 前端 javascript

本文链接：https://blog.youkuaiyun.com/wgx_0504/article/details/130653803

文章介绍了Layui的table组件如何用于展示表格数据，包括基本用法如引入CSS和JS文件，设置表格元素，渲染表格，监听工具条事件，以及更高级的功能如分页、排序和筛选等。示例代码展示了如何创建一个包含编辑和删除操作的表格。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Layui 是一款轻量级的前端 UI 框架，其中的 layui.table 组件是用来展示表格数据的组件。下面是 layui.table 的用法示例。

基本用法

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui.table 基本用法示例</title>
  <link rel="stylesheet" href="//cdn.staticfile.org/layui/2.5.7/css/layui.min.css">
</head>
<body>

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

  <script src="//cdn.staticfile.org/layui/2.5.7/layui.min.js"></script>
  <script>
    layui.use(['table'], function(){
      var table = layui.table;

      // 渲染表格
      table.render({
        elem: '#demo',
        url: '/api/getData',
        cols: [[
          {field: 'id', title: 'ID', width: 80},
          {field: 'username', title: '用户名', width: 120},
          {field: 'email', title: '邮箱'},
          {field: 'phone', title: '手机'},
          {field: 'status', title: '状态', width: 80},
          {field: 'operate', title: '操作', toolbar: '#operateTpl', width: 160},
        ]],
      });

      // 监听工具条
      table.on('tool(test)', function(obj){
        var data = obj.data;
        if(obj.event === 'edit'){
          // 编辑操作
          layer.msg('编辑 ID：'+ data.id);
        } else if(obj.event === 'del'){
          // 删除操作
          layer.confirm('确定删除 ID 为 '+data.id+' 的数据吗？', function(index){
            obj.del();
            layer.close(index);
          });
        }
      });
    });
  </script>

  <script type="text/html" id="operateTpl">
    <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>

</body>
</html>

上述代码中，我们使用 layui.table 组件来展示表格数据，包括以下几个步骤：

引入 layui 的 CSS 和 JS 文件。
在 HTML 中添加一个空的 <table> 元素，并指定其 id 和 lay-filter 属性。
使用 layui.use() 方法加载 layui.table 模块，并在回调函数中获取 table 对象。
使用 table.render() 方法渲染表格，其中 elem 属性指定表格元素的选择器，url 属性指定获取数据的 URL，cols 属性指定表头和列属性。
使用 table.on() 方法监听表格中的工具条，包括编辑和删除操作。
在 HTML 中添加一个隐藏的模板元素，用来定义工具条的 HTML 结构。

layui.table组件的用法

基本用法

更多用法