layui table 表格模板按钮的实例代码

本次我们简单介绍一下“layui table 表格模板按钮的实例代码”的完整攻略。

1. 基础设置

首先，我们需要引入layui框架中的table.js和laytpl.js文件。安装起来方法也非常简单，只需要执行以下代码即可。

<script src="lay/modules/table.js"></script>
<script src="lay/modules/laytpl.js"></script>

2. 渲染表格

接下来，我们可以开始渲染表格了。这里我们以一个简单的示例来说明。

<table class="layui-table" id="demo">
  <thead>
    <tr>
      <th>ID</th>
      <th>用户名</th>
      <th>邮箱</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
</script>

我们可以看到，需要渲染的表格包含了4列，其中第4列为操作列，我们在这一列中添加了两个按钮，分别为删除和编辑按钮。这样，我们的表格就已经准备好了。接下来我们需要将数据填充到表格中。

3. 填充表格数据

为了方便展示，这里我们使用静态数据。实际开发中，我们通常会从服务器端获取数据，再将数据填充到表格中。下面是一个示例代码。

layui.use('table', function(){
  var table = layui.table,
      laytpl = layui.laytpl;

  //模拟数据
  var data = [
    {id: 1, username: '张三', email: 'zhangsan@qq.com'},
    {id: 2, username: '李四', email: 'lisi@qq.com'},
    {id: 3, username: '王五', email: 'wangwu@qq.com'},
  ];

  //填充数据到表格中
  table.render({
    elem: '#demo',
    data: data,
    toolbar: '#toolbarDemo',
    cols: [[
      {field: 'id', title: 'ID'},
      {field: 'username', title: '用户名'},
      {field: 'email', title: '邮箱'},
      {fixed: 'right', title:'操作', toolbar: '#barDemo'}
    ]]
  });

  //监听工具条
  table.on('tool(test)', function(obj){
    var data = obj.data;
    if(obj.event === 'del'){
      layer.confirm('真的删除行么', function(index){
        obj.del();
        layer.close(index);
      });
    } else if(obj.event === 'edit'){
      layer.prompt({
        formType: 2,
        value: data.username
      }, function(value, index){
        obj.update({
          username: value
        });
        layer.close(index);
      });
    }
  });

});

其中，我们使用table.render方法将数据填充到表格中，使用fixed: 'right'来指定操作列固定在右边，使用toolbar: '#barDemo'来指定操作列使用我们之前准备好的按钮模板。同时，我们也监听了工具条事件，使得当用户点击按钮时能够触发一些操作。

4. 示范一：添加新的按钮

下面，我们以添加“详情”按钮为例，来讲解如何修改表格行中的操作列的按钮模板。首先，我们需要重新写一下之前的按钮模板，添加一个新的“详情”按钮。

<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">详情</a>
</script>

接下来，我们需要监听表格上的新的按钮“详情”的事件。可以看到和之前的按钮“删除”和“编辑”一样，我们也需要在table.on方法中添加一项对“详情”按钮的监听。代码如下。

layui.use('table', function(){
  var table = layui.table,
      laytpl = layui.laytpl;

  //模拟数据
  var data = [
    {id: 1, username: '张三', email: 'zhangsan@qq.com'},
    {id: 2, username: '李四', email: 'lisi@qq.com'},
    {id: 3, username: '王五', email: 'wangwu@qq.com'},
  ];

  //填充数据到表格中
  table.render({
    elem: '#demo',
    data: data,
    toolbar: '#toolbarDemo',
    cols: [[
      {field: 'id', title: 'ID'},
      {field: 'username', title: '用户名'},
      {field: 'email', title: '邮箱'},
      {fixed: 'right', title:'操作', toolbar: '#barDemo'}
    ]]
  });

  //监听工具条
  table.on('tool(test)', function(obj){
    var data = obj.data;
    if(obj.event === 'del'){
      layer.confirm('真的删除行么', function(index){
        obj.del();
        layer.close(index);
      });
    } else if(obj.event === 'edit'){
      layer.prompt({
        formType: 2,
        value: data.username
      }, function(value, index){
        obj.update({
          username: value
        });
        layer.close(index);
      });
    } else if (obj.event === 'detail') {
      layer.alert('用户ID：'+data.id+'<br>用户名称：'+data.username+'<br>用户邮箱：'+data.email);
    }
  });

});

这里我们继续使用之前的表格数据，只是在table.on方法中增加了对“详情”按钮的监听。当用户点击“详情”按钮时，弹出对话框显示该行的详细信息。可以看到，新的按钮“详情”已经成功添加到了表格中。

5. 示范二：删除某一行数据

最后，我们以删除某一行数据为例，讲解如何使用内置的lay方法来删除某一行数据。这里我们对之前的“删除”按钮进行修改，使用lay的方法来删除某一行数据。

if(obj.event === 'del'){
  layer.confirm('真的删除行么', function(index){
    obj.del();
    layer.close(index);
  });
}

接下来，我们需要增加一个“删除”按钮，可以直接使用lay方法来删除表格中一行数据。代码如下。

<script type="text/html" id="barDemo">
  <!-- 用lay-event指定事件名 -->
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">详情</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delRow">删除当前行</a>
</script>

接下来，我们需要在table.on方法中增加对“删除当前行”按钮的监听。代码如下。

//监听工具条
table.on('tool(test)', function(obj){
  var data = obj.data;
  if(obj.event === 'del'){
    layer.confirm('真的删除么', function(index){
      obj.del();
      layer.close(index);
    });
  } else if(obj.event === 'edit'){
    layer.alert('编辑');
  } else if (obj.event === 'detail') {
    layer.alert('用户ID：'+data.id+'<br>用户名称：'+data.username+'<br>用户邮箱：'+data.email);
  } else if (obj.event === 'delRow') {
    //删除当前行
    table.cache.demo.forEach(function(item, index){
      if (item.id === data.id) {
        table.cache.demo.splice(index,1);
      }
    });
    // 重新渲染表格
    table.reload('demo', {
      data: table.cache.demo,
    });
  }
});

这里，当用户点击“删除当前行”按钮时，我们通过table.cache.demo来获取当前表格的数据。接着，遍历这个数据，找到当前行的数据，并使用splice方法来删除该行数据。最后，我们需要重新渲染表格，这可以通过table.reload方法来实现，将删除某一行后的表格数据重新渲染到表格中。

至此，我们已经完成了对“layui table 表格模板按钮的实例代码”的完整讲解。希望本文能够帮到大家。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：layui table 表格模板按钮的实例代码 - Python技术站