笔记大全

layui table组件常见用法总结

更新时间：2023-06-25

前言

在前端开发中，使用Layui作为UI框架可以快速构建出美观、响应式的网页。其中，Layui table组件是一个非常重要的组件，用于展示表格数据。本文将总结一些Layui table组件的常见用法，包括表格的基本使用、数据加载、数据操作等方面。

1. 表格的基本使用

在使用Layui table组件之前，需要引入相应的CSS和JavaScript文件。然后，在HTML中创建一个表格容器，使用lay-filter属性给表格添加一个唯一的标识。


<link rel="stylesheet" href="path/to/layui/css/layui.css">
<script src="path/to/layui/layui.js"></script>

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

<script>
layui.use('table', function(){
  var table = layui.table;
  
  //执行渲染
  table.render({
    elem: '#demo', //指定原始表格元素选择器（如：'#test'）
    //更多配置...
  });
});
</script>

2. 数据加载

加载表格数据可以通过两种方式：静态数据和异步加载数据。

2.1 静态数据

静态数据是指直接在JavaScript代码中定义的数据。可以通过设置data属性传入一个对象数组来展示数据。


table.render({
  elem: '#demo',
  data: [{
    id: 1,
    username: '张三',
    age: 20
  }, {
    id: 2,
    username: '李四',
    age: 30
  }],
  cols: [[
    {field: 'id', title: 'ID'},
    {field: 'username', title: '用户名'},
    {field: 'age', title: '年龄'}
  ]]
});

2.2 异步加载数据

如果需要从后台接口获取数据并展示在表格中，可以通过设置url属性并结合ajax来实现。


table.render({
  elem: '#demo',
  url: '/api/getData', //数据接口
  cols: [[
    {field: 'id', title: 'ID'},
    {field: 'username', title: '用户名'},
    {field: 'age', title: '年龄'}
  ]]
});

3. 数据操作

Layui table组件提供了丰富的数据操作功能，包括排序、筛选、编辑、删除等。

3.1 排序

可以通过设置sort属性为true，开启表格的排序功能。同时，通过设置sortType属性为default、number、date等来指定排序的类型。


cols: [[
  {field: 'id', title: 'ID', sort: true},
  {field: 'username', title: '用户名'},
  {field: 'age', title: '年龄', sort: true, sortType: 'number'}
]]

3.2 筛选

通过设置toolbar属性为true，开启表格的筛选功能。用户可以在表头中输入关键字进行筛选。


toolbar: true

3.3 编辑

在表格中编辑数据可以通过使用table.on('edit')方法监听编辑事件，获取到编辑的字段信息。


table.on('edit(test)', function(obj){
  var value = obj.value; //得到修改后的值
  var data = obj.data; //得到所在行所有键值
  var field = obj.field; //得到字段
});

3.4 删除

可以通过使用table.on('tool')方法监听工具条点击事件，判断点击的工具类型，并进行相应的操作。


table.on('tool(test)', function(obj){
  var data = obj.data; //得到当前行数据
  var layEvent = obj.event; //得到lay-event对应的值（也可以是表头的event参数对应的值）
  
  if(layEvent === 'del'){
    layer.confirm('确定删除该条数据？', function(index){
      obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
      layer.close(index);
    });
  }
});

总结

通过上述的介绍，我们可以了解到Layui table组件的基本使用、数据加载和数据操作等方面的常见用法。通过合理的配置和使用，可以实现丰富多样的表格展示效果，并提供灵活的数据处理能力。

c语言编程笔录