layui table行选择与操作功能的开发（layui table行选择与操作功能的实现）

这篇文章将为大家详细讲解有关layui table行选择与操作功能的开发（layui table行选择与操作功能的实现），小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

Layui Table 行选择与操作功能开发

行选择

• 使用 cellEvent 事件监听行点击事件
• 判断目标元素是否为行选择框
• 如果是，则执行行选择操作，反之则忽略

table.on("cellEvent", function(obj) {
  if (obj.event === "checkbox") {
    var checked = obj.data[obj.field] === true;
    table.chooseRow(obj.data, checked);
    layer.msg(checked ? "行已选中" : "行已取消选择");
  }
});

多选框选择所有行

• 监听表头全选框点击事件
• 遍历所有数据，设置 LAY_CHECKED 属性
• 刷新表格，实现全选

table.on("checkbox(layTable)", function(obj) {
  var checked = obj.checked;
  var data = table.getData();
  for (var i = 0; i < data.length; i++) {
    data[i]["LAY_CHECKED"] = checked;
  }
  table.render();
});

操作列

• 在每一行末尾添加操作列
• 根据不同操作，绑定事件处理函数，例如修改、删除等

<script type="text/html" id="operationBar">
  <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(layTable)", function(obj) {
  var data = obj.data;
  var event = obj.event;
  if (event === "edit") {
    layer.open({
      title: "编辑",
      type: 2,
      content: "edit.html",
      success: function(layero, index) {
        var body = layer.getChildFrame("body", index);
        body.find("input[name=id]").val(data.id);
        body.find("input[name=name]").val(data.name);
        body.find("input[name=email]").val(data.email);
        body.find("input[name=phone]").val(data.phone);
      }
    });
  } else if (event === "del") {
    layer.confirm("确定要删除吗？", function(index) {
      table.del({
        data: data.id
      });
      layer.msg("删除成功");
    });
  }
});

批量操作

• 添加批量操作按钮
• 定义 checker 变量存储已选中的数据
• 根据不同操作，执行不同处理逻辑

<div class="layui-toolbar">
  <button class="layui-btn layui-btn-danger" id="batch-delete">批量删除</button>
</div>

var checker = [];
table.on("checkbox(layTable)", function(obj) {
  if (obj.checked) {
    checker.push(obj.data);
  } else {
    checker.splice(checker.indexOf(obj.data), 1);
  }
});

$("#batch-delete").on("click", function() {
  if (checker.length === 0) {
    layer.msg("请选择要删除的数据！");
    return;
  }

  layer.confirm("确定要删除这些数据吗？", function(index) {
    var ids = [];
    for (var i = 0; i < checker.length; i++) {
      ids.push(checker[i].id);
    }
    table.del({
      data: ids
    });
    layer.msg("删除成功");
  });
});

以上就是layui table行选择与操作功能的开发（layui table行选择与操作功能的实现）的详细内容，更多请关注编程学习网其它相关文章！