正心全栈编程-文档站

Appearance

表格事件 ​

https://layui.dev/docs/2.8/table/#api

API ​

API描述
var table = layui.table获得 table 模块。
table.set(options)设定全局默认属性项。
table.render(options)table 组件渲染，核心方法。
table.init(filter, options)初始化渲染静态表格。
table.reload(id, options, deep)表格完整重载。
table.reloadData(id, options, deep)表格数据重载。
table.renderData(id)重新渲染数据。
table.checkStatus(id)获取选中行相关数据。
table.setRowChecked(id, opts)设置行选中状态。
table.getData(id)获取当前页所有行表格数据。
table.cache获取表格缓存数据集（包含特定字段）。
table.resize(id)重置表格尺寸。
table.exportFile(id, data, opts)导出表格数据到本地文件。
table.getOptions(id)获取表格实例配置项。
table.hideCol(id, cols)设置表格列的显示隐藏属性。
table.on('event(filter)', callback)table 相关事件。

全局设置 ​

  • 参数 options : 基础属性配置项。

该方法主要用于初始化设置属性默认值。实际应用时，必须先设置该方法，再执行渲染、重载等操作。

javascript
layui.use(function () {
  var table = layui.table;
  // 全局设置
  table.set({
    headers: { token: "123" },
  });
  // 渲染
  table.render(options);
});

渲染 ​

table 提供了以下三种渲染模式，在实际使用时，一般按情况选择其中一种即可。

渲染方式描述
方法配置渲染通过 table 组件提供的核心方法 table.render(options) 完成的渲染。
模板配置渲染通过 <table> 标签的 lay-options="{}" 属性定义模板，组件自动对其进行解析并完成渲染。
静态表格渲染对一段已经包含数据内容的静态表格进行动态化转换，使其具备 table 组件的相关功能。

方法配置渲染 ​

js
table.render(options);
  • 参数 options : 基础属性配置项。

该方法返回当前实例对象，包含可操作当前表格的一些成员方法。

html
<table id="test"></table>

<!-- import layui -->
<script>
  layui.use(function () {
    var table = layui.table;

    // 渲染，并获得实例对象
    var inst = table.render({
      elem: "#test", // 绑定元素选择器
      // 其他属性
      // …
    });

    // 实例对象成员
    inst.config; // 当前表格配置属性
    inst.reload(options, deep); // 对当前表格的完整重载。参数 deep 表示是否深度重载。
    inst.reloadData(options, deep); // 对当前表格的数据重载。参数 deep 同上。
    inst.resize(); // 对当前表格重新适配尺寸
    inst.setColsWidth(); // 对当前表格重新分配列宽
  });
</script>

模板配置渲染 ​

在 <table> 元素中直接书写 lay-options="{}" 属性，组件将自动对其进行解析并完成渲染。

html
<!-- 此处 `lay-options` 定义基础属性 -->
<table class="layui-table" lay-options="{url: ''}" id="test">
  <thead>
    <tr>
      <!-- 此处 `lay-options` 定义表头属性 -->
      <th lay-options="{field: 'title'}">Title</th>
    </tr>
  </thead>
</table>

注意

2.8 之前版本通过 lay-data="{}" 定义属性配置项；

2.8+ 版本推荐采用 lay-options，但同时兼容 lay-data。

静态表格渲染 ​

js
table.init(filter, options);
  • 参数 filter : <table> 元素对应的 lay-filter 属性值
  • 参数 options : 基础属性配置项。

该方法用于将已输出在页面中的静态表格内容转换为动态 table 组件。

html
<table lay-filter="test">
  表格内容
</table>

<!-- import layui -->
<script>
  layui.use(function () {
    var table = layui.table;
    // 将静态表格进行动态化
    table.init("test", {
      height: 366,
      // 其他属性
      // …
    });
  });
</script>

属性 ​

属性是指 table 渲染、重载 时的配置选项（options），它本身是一个 object 参数。如：

js
// 渲染
table.render({
  // options
  elem: "",
  cols: [[]],
  // …
});
// 重载
table.reload(id, {
  // options
});
若为模板配置渲染，则 lay-options 或 lay-data 的属性值即为属性的配置选项（：
<table lay-options="{url: ''}"> … </table>

table 的属性众多，我们大致分为以下几种：

属性类别描述
基础属性-
异步属性用于和异步数据请求相关的基础属性，由于相关属性成员较多，所以单独提取介绍。
表头属性基础属性 cols 的子属性集。

基础属性 ​

基础属性是表格默认的属性，默认就有，因为参数较多，直接查看源文档：https://layui.dev/docs/2.8/table/#options

异步属性 ​

异步属性本质也是基础属性，当开启 url 属性时才有效，由于相关属性成员较多，所以单独提取介绍。

异步数据是远程解析的时候会用到

源文档：https://layui.dev/docs/2.8/table/#options.ajax

表头属性 ​

表头属性是基础属性 cols 的子集，其使用频率甚至超过基础属性本身。

源文档：https://layui.dev/docs/2.8/table/#options.cols

重载 ​

即对一段已经渲染好的表格重新设置属性并渲染，可分为以下几种重载方式：

重载方式API
完整重载table.reload(id, options, deep)
仅数据重载table.reloadData(id, options, deep)

重载的使用方式完全相同，区别只是在于参与重载时的属性差异及其对应的效果差异。一般按照实际需求选择使用。

完整重载 ​

js
table.reload(id, options, deep);
  • 参数 id : table 渲染时的 id 属性值
  • 参数 options : 为基础属性配置项
  • 参数 deep : 是否采用深度重载（即重载时始终携带初始时及上一次重载时的参数），默认 false。

该方法用于对表格的视图和数据在内的全部重载，所有属性均会参与到重载中，对应的表格会有一个直观的刷新效果。

html
<body>
  <table class="layui-hide" id="reload_table"></table>

  <script src="/static/layui.js"></script>
  <script>
    layui.use(function () {
      var table = layui.table;
      var form = layui.form;

      // 创建渲染实例
      table.render({
        elem: "#reload_table", // 绑定元素选择器
        id: "reload_table", // 自定义 id 索引
        url: "/static/user.json", // 此处为静态模拟数据，实际使用时需换成真实接口
        page: true,
        height: "315px",
        cols: [
          [
            { type: "checkbox", fixed: "left" },
            { field: "id", fixed: "left", width: 80, title: "ID", sort: true },
            { field: "username", width: 80, title: "用户" },
            { field: "sex", width: 60, title: "性别" },
            { field: "city", width: 115, title: "城市" },
            { field: "sign", width: 115, title: "签名" },
            { field: "classify", width: 115, title: "职业" },
          ],
        ],
      });
      // 数据重载 - 仅与数据相关的属性(options)能参与到重载中
      table.reloadData("reload_table", {
        where: {
          key: "test",
        }, // 数据异步请求时携带的字段集 --- 属性设置有效，因属于数据相关属性
        scrollPos: true, // 设定重载数据或切换分页时的滚动条的位置状态 --- 属性设置有效
        // …
        height: 2000, // 高度  --- 属性设置无效，因不属于数据相关属性
      });
    });
  </script>
</body>
json
{
  "code": 0,
  "msg": "",
  "count": 1000,
  "data": [
    {
      "id": 10000,
      "username": "user-0",
      "sex": "女",
      "city": "城市-0",
      "sign": "签名-0",
      "experience": 255,
      "logins": 24,
      "words": 82830700,
      "classify": "作家",
      "score": 57
    },
    {
      "id": 10001,
      "username": "user-1",
      "sex": "男",
      "city": "城市-1",
      "sign": "签名-1",
      "experience": 884,
      "logins": 58,
      "words": 64928690,
      "classify": "词人",
      "score": 70.5
    },
    {
      "id": 10002,
      "username": "user-2",
      "sex": "女",
      "city": "城市-2",
      "sign": "签名-2",
      "experience": 650,
      "logins": 77,
      "words": 6298078,
      "classify": "酱油",
      "score": 31
    },
    {
      "id": 10003,
      "username": "user-3",
      "sex": "女",
      "city": "城市-3",
      "sign": "签名-3",
      "experience": 362,
      "logins": 157,
      "words": 37117017,
      "classify": "诗人",
      "score": 68
    },
    {
      "id": 10004,
      "username": "user-4",
      "sex": "男",
      "city": "城市-4",
      "sign": "签名-4",
      "experience": 807,
      "logins": 51,
      "words": 76263262,
      "classify": "作家",
      "score": 6
    },
    {
      "id": 10005,
      "username": "user-5",
      "sex": "女",
      "city": "城市-5",
      "sign": "签名-5",
      "experience": 173,
      "logins": 68,
      "words": 60344147,
      "classify": "作家",
      "score": 87
    },
    {
      "id": 10006,
      "username": "user-6",
      "sex": "女",
      "city": "城市-6",
      "sign": "签名-6",
      "experience": 982,
      "logins": 37,
      "words": 57768166,
      "classify": "作家",
      "score": 34
    },
    {
      "id": 10007,
      "username": "user-7",
      "sex": "男",
      "city": "城市-7",
      "sign": "签名-7",
      "experience": 727,
      "logins": 150,
      "words": 82030578,
      "classify": "作家",
      "score": 28
    },
    {
      "id": 10008,
      "username": "user-8",
      "sex": "男",
      "city": "城市-8",
      "sign": "签名-8",
      "experience": 951,
      "logins": 133,
      "words": 16503371,
      "classify": "词人",
      "score": 14
    },
    {
      "id": 10009,
      "username": "user-9",
      "sex": "女",
      "city": "城市-9",
      "sign": "签名-9",
      "experience": 484,
      "logins": 25,
      "words": 86801934,
      "classify": "词人",
      "score": 75
    }
  ]
}

仅数据重载 ​

js
table.reloadData(id, options, deep);
  • 参数同 table.reload(id, options, deep) 参数

该方法用于对表格的数据重载，与数据无关的属性不会参与到重载中。因此若只是更新数据，该方法可大幅提升体验。

js
// 渲染
table.render({
  elem: "", // 绑定元素选择器
  id: "test", // 自定义 id 索引
  // 其他属性 …
});
// 数据重载 - 仅与数据相关的属性(options)能参与到重载中
table.reloadData("test", {
  where: {}, // 数据异步请求时携带的字段集 --- 属性设置有效，因属于数据相关属性
  scrollPos: true, // 设定重载数据或切换分页时的滚动条的位置状态 --- 属性设置有效
  // …
  height: 2000, // 高度  --- 属性设置无效，因不属于数据相关属性
});

重新渲染数据 ​

js
table.renderData(id);
  • 参数 id : table 渲染时的 id 属性值

该方法用于重新渲染数据，一般在修改 table.cache 后使用。

js
// 渲染
table.render({
  elem: "", // 绑定元素选择器
  id: "test", // 自定义 id 索引
  // 其他属性 …
});
// 获取当前实例的数据缓存
var data = table.cache["test"];
// 获取某行数据，并从 data 中移除该行
var item = data.splice(index, 1); // index 为当前行下标，一般可在事件中通过 obj.index 得到
// 将某行数据移动到另外某行
data.splice(newIndex, 0, item[0]);
// 根据 table.cache 重新渲染数据
table.renderData("test");

获取选中行 ​

js
table.setRowChecked(id, opts);
  • 参数 id : table 渲染时的 id 属性值
  • 参数 opts : 设置行选中时的可选属性，详见下表
opts描述类型默认值
type选中方式。可选值: checkbox,radiostringcheckbox
index选中行的下标。即数据的所在数组下标（0 开头）。 可设置 all 表示全选。number string-
checked选中状态值。若传递该属性，则赋值固定值。
若不传递该属性（默认），则 checkbox 将在 true | false 中自动切换值，而 radio 将赋值 true 固定值。		boolean-

该方法用于设置行的选中样式及相关的特定属性值 LAY_CHECKED。

js
// 渲染
table.render({
  elem: "", // 绑定元素选择器
  id: "test", // 自定义 id 索引
  // 其他属性 …
});

// 设置某行选中
table.setRowChecked("test", {
  index: 0, // 选中行的下标。 0 表示第一行
});
// 取消选中行
table.setRowChecked("test", {
  index: "all", // 所有行
  checked: false,
});

获取当前页接口数据 ​

js
table.getData(id);
  • 参数 id : table 渲染时的 id 属性值

该方法用于获取表格当前页的数据，它对应的是接口返回的原始数据，不包含 table 组件内部的特定字段。

js
// 渲染
table.render({
  elem: "", // 绑定元素选择器
  id: "test", // 自定义 id 索引
  // 其他属性 …
});
// 获取当前页接口数据
var data = table.getData("test");
console.log(data);

获取表格缓存数据集 ​

js
var tableCache = table.cache;

table.cache 是一段存储当前页表格所有实例的当前页的临时数据，通过 id 作为索引，它包含接口返回的原始数据和组件内部的特定字段。 使用该静态属性可对表格数据进行读写操作。

js
// 渲染
table.render({
  elem: "", // 绑定元素选择器
  id: "test", // 自定义 id 索引
  // 其他属性 …
});
// 获取对应 table 的临时数据
var thisCache = table.cache["test"] || {};

// 变更对应 table 的临时数据中的某个字段值
thisCache.fieldName = 123;

重置尺寸 ​

table.resize(id);

  • 参数 id : table 渲染时的 id 属性值

该方法用于重置表格尺寸和结构，其内部完成了固定列高度平铺、动态分配列宽、容器滚动条宽高补丁 等适配。它一般用于修复特殊情况下导致的列宽适配异常（如浏览器窗口尺寸改变导致的表格父容器宽度变化），以保证表格尺寸依旧能友好展示。

js
// 渲染
table.render({
  elem: "", // 绑定元素选择器
  id: "test", // 自定义 id 索引
  // 其他属性 …
});
// 重置对应 table 的尺寸，一般写在表格外部容器宽高发生变化后的段落
table.resize("test");

导出数据 ​

js
table.exportFile(id, data, opts);
  • 参数 id : table 渲染时的 id 或 要导出的数据表头（当 id 为 array 类型时）。
  • 参数 data : 要导出的自定义数据，参数可选。
  • 参数 opts : 导出数据时的属性可选项，支持： type,title。

该方法用于外部导出对应 table 的数据和任意自定义数据。

js
// 渲染
table.render({
  elem: "", // 绑定元素选择器
  id: "test", // 自定义 id 索引
  // 其他属性 …
});
// 外部导出对应 table 的数据
table.exportFile("test");

// 导出自定义数据
table.exportFile(
  ["名字", "性别", "年龄"],
  [
    ["张三", "男", "20"],
    ["李四", "女", "18"],
    ["王五", "女", "19"],
  ],
  {
    type: "csv", // 导出的文件格式，支持: csv,xls
    title: "导出的文件标题",
  },
);

获取配置项 ​

js
table.getOptions(id);
  • 参数 id : table 渲染时的 id 属性值

该方法用于外部获取对应 table 实例的属性配置项。

js
// 渲染
table.render({
  elem: "", // 绑定元素选择器
  id: "test", // 自定义 id 索引
  // 其他属性 …
});
// 获取配置项
var thisOptions = table.getOptions("test");
console.log(thisOptions);

设置列显示或隐藏 ​

js
table.hideCol(id, cols);
  • 参数 id : table 渲染时的 id 属性值
  • 参数 cols : 设置列（表头）显示或隐藏状态

该方法用于外部设置对应 table 列的显示与隐藏状态。

js
// 渲染
table.render({
  elem: "", // 绑定元素选择器
  id: "test", // 自定义 id 索引
  // 其他属性 …
});

// 设置对应列的显示或隐藏
table.hideCol("test", {
  field: "title", // 对应表头的 field 属性值
  hide: true, // `true` or `false`
});

// 同时设置多列的显示或隐藏
table.hideCol("test", [
  {
    field: "title1",
    hide: true,
  },
  {
    field: "title2",
    hide: false,
  },
  {
    field: "title3",
    hide: false,
  },
]);

// 显示或隐藏全部列
table.hideCol("test", false); // `true` or `false`

事件 ​

js
table.on("event(filter)", callback);
  • 参数 event(filter) 是事件的特定结构。 event 为事件名，支持的事件见下表。filter 为元素属性 lay-filter 对应的值。
  • 参数 callback 为事件执行时的回调函数，并返回一个包含各项成员的 object 类型的参数。
event描述
toolbar头部工具栏事件
sort排序切换事件
colResized列拖拽宽度后的事件
colToggled列筛选（显示或隐藏）后的事件
row / rowDouble行单击和双击事件
rowContextmenu行右键菜单事件
edit单元格编辑事件
tool / toolDouble单元格工具事件。可在该事件中实现行的更新与删除操作。
checkbox复选框事件
radio单选框事件
pagebar尾部分页栏事件

头部工具栏事件 ​

js
table.on("toolbar(filter)", callback);

点击头部工具栏区域设定了属性为 lay-event="" 的元素时触发。如：

html
<!-- 原始容器 -->
<table id="test" lay-filter="test"></table>

<!-- 工具栏模板 -->
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
    <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
    <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
  </div>
</script>

<!-- import layui -->
<script>
  layui.use(function () {
    var table = layui.table;
    // 渲染
    table.render({
      elem: "#test",
      toolbar: "#toolbarDemo",
      // … // 其他属性
    });

    // 头部工具栏事件
    table.on("toolbar(test)", function (obj) {
      var options = obj.config; // 获取当前表格属性配置项
      var checkStatus = table.checkStatus(options.id); // 获取选中行相关数据
      console.log(obj); // 查看对象所有成员

      // 根据不同的事件名进行相应的操作
      switch (
        obj.event // 对应模板元素中的 lay-event 属性值
      ) {
        case "add":
          layer.msg("添加");
          break;
        case "delete":
          layer.msg("删除");
          break;
        case "update":
          layer.msg("编辑");
          break;
      }
    });
  });
</script>

单元格工具事件 ​

  • 单元格工具事件「单击触发」： table.on('tool(filter)', callback);
  • 单元格工具事件「双击触发」： table.on('toolDouble(filter)', callback);

单击或双击单元格中带有 lay-event="" 属性的元素时触发。在表格主体的单元格中，经常需要进行很多的动态操作，比如编辑、删除等操作，这些均可以在单元格工具事件中完成。

html
<body>
  <!-- 原始容器 -->
  <table id="test" lay-filter="test"></table>

  <!-- 表头某列 templet 属性指向的模板 -->
  <script type="text/html" id="toolEventDemo">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
    <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>

    <!-- 支持任意的 laytpl 组件语法，如： -->
    {{ '{{# if(d.auth > 2){ }}'|safe }}
    <a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
    {{ '{{# } }}'|safe }}
  </script>

  <script src="/static/layui.js"></script>
  <script>
    layui.use(function () {
      var table = layui.table;
      var form = layui.form;

      // 创建渲染实例
      table.render({
        elem: "#test", // 绑定元素选择器
        id: "test", // 自定义 id 索引
        toolbar: "#toolbarDemo",
        url: "/static/user.json", // 此处为静态模拟数据，实际使用时需换成真实接口
        page: true,
        height: "315px",
        cols: [
          [
            { type: "checkbox", fixed: "left" },
            { field: "id", fixed: "left", width: 80, title: "ID", sort: true },
            { field: "username", width: 80, title: "用户" },
            { field: "sex", width: 60, title: "性别" },
            { field: "city", width: 115, title: "城市" },
            { field: "sign", width: 115, title: "签名" },
            { field: "classify", width: 115, title: "职业" },
            { title: "操作", width: 200, templet: "#toolEventDemo" },
          ],
        ],
      });
      // 单元格工具事件
      table.on("tool(test)", function (obj) {
        var data = obj.data; // 得到当前行数据
        var index = obj.index; // 得到当前行索引
        var layEvent = obj.event; // 获得元素对应的 lay-event 属性值
        var tr = obj.tr; // 得到当前行 <tr> 元素的 jQuery 对象
        var options = obj.config; // 获取当前表格基础属性配置项
        var col = obj.getCol(); // 得到当前列的表头配置属性 -- v2.8.3 新增
        console.log(obj); // 查看对象所有成员

        // 根据 lay-event 的值执行不同操作
        if (layEvent === "detail") {
          //查看
          // do somehing
          console.log("查看详情");
        } else if (layEvent === "del") {
          //删除
          layer.confirm("确定删除吗？", function (index) {
            obj.del(); // 删除对应行（tr）的 DOM 结构，并更新缓存
            layer.close(index);

            // 向后端发送删除请求，执行完毕后，可通过 reloadData 方法完成数据重载
            /*
                    table.reloadData(id, {
                      scrollPos: 'fixed'  // 保持滚动条位置不变 - v2.7.3 新增
                    });
                    */
          });
        } else if (layEvent === "edit") {
          //编辑
          // do something

          // 同步更新缓存对应的值
          // 该方法仅为前端层面的临时更新，在实际业务中需提交后端请求完成真实的数据更新。
          obj.update({ username: "123", title: "abc" });
          // 若需更新其他包含自定义模板并可能存在关联的列视图，可在第二个参数传入 true
          obj.update({ username: "123" }, true); // 注：参数二传入 true 功能为 v2.7.4 新增

          // 当发送后端请求成功后，可再通过 reloadData 方法完成数据重载
          /*
                table.reloadData(id, {
                  scrollPos: 'fixed'  // 保持滚动条位置不变 - v2.7.3 新增
                });
                */
        }
      });
    });
  </script>
</body>

尾部分页栏事件 ​

js
table.on("pagebar(filter)", callback);

点击尾部分页栏自定义模板中属性为 lay-event="" 的元素时触发。用法跟 toolbar 完全一致。

html
<!-- 表头某列 templet 属性指向的模板 -->
<script type="text/html" id="pagebarDemo">
  <a class="layui-btn layui-btn-xs" lay-event="bottom-btn">底部按钮</a>
</script>
js
var table = layui.table;

// 渲染
table.render({
  elem: "#demo",
  pagebar: "#pagebarDemo", // 分页栏模板所在的选择器
  // … // 其他参数
});

// 分页栏事件
table.on("pagebar(test)", function (obj) {
  console.log(obj); // 查看对象所有成员
  console.log(obj.config); // 当前实例的配置信息
  console.log(obj.event); // 属性 lay-event 对应的值
});

单元格编辑事件 ​

js
table.on("edit(filter)", callback);

单元格被编辑，且值发生改变时触发。

html
<!-- 原始容器 -->
<table id="test" lay-filter="test"></table>

<!-- 表头某列 templet 属性指向的模板 -->
<script type="text/html" id="pagebarDemo">
  <a class="layui-btn layui-btn-xs" lay-event="bottom-btn">底部按钮</a>
</script>

<script src="/static/layui.js"></script>
html
<script>
  layui.use(function () {
    var table = layui.table;
    var form = layui.form;

    // 创建渲染实例
    table.render({
      elem: "#test", // 绑定元素选择器
      id: "test", // 自定义 id 索引
      toolbar: "#toolbarDemo",
      pagebar: "#pagebarDemo", // 分页栏模板所在的选择器
      url: "/static/user.json", // 此处为静态模拟数据，实际使用时需换成真实接口
      page: true,
      height: "full-20",
      cols: [
        [
          { type: "checkbox", fixed: "left" },
          { field: "id", fixed: "left", width: 80, title: "ID", sort: true },
          { field: "username", width: 80, title: "用户" },
          { field: "sex", width: 60, title: "性别" },
          { field: "city", width: 115, title: "城市" },
          { field: "sign", width: 115, title: "签名" },
          { field: "classify", width: 115, title: "职业", edit: "text" },
          { title: "操作", width: 200, templet: "#toolEventDemo" },
        ],
      ],
    });

    // 单元格编辑事件
    table.on("edit(test)", function (obj) {
      var field = obj.field; // 得到修改的字段
      var value = obj.value; // 得到修改后的值
      var oldValue = obj.oldValue; // 得到修改前的值 -- v2.8.0 新增
      var data = obj.data; // 得到所在行所有键值
      var col = obj.getCol(); // 得到当前列的表头配置属性 -- v2.8.0 新增

      // 值的校验
      if (value.replace(/\s/g, "") === "") {
        layer.tips("值不能为空", this, { tips: 1 });
        return obj.reedit(); // 重新编辑 -- v2.8.0 新增
      }
      // 编辑后续操作，如提交更新请求，以完成真实的数据更新
      // …

      // 更新当前缓存数据
      var update = {};
      update[field] = value;
      obj.update(update, true); // 参数 true 为 v2.7 新增功能，即同步更新其他包含自定义模板并可能存在关联的列视图
    });
  });
</script>

复选框事件 ​

js
table.on("checkbox(filter)", callback);

当 table 开启复选框，且点击复选框时触发。

js
// 创建渲染实例
table.render({
  elem: "#test", // 绑定元素选择器
  id: "test", // 自定义 id 索引
  url: "/static/user.json", // 此处为静态模拟数据，实际使用时需换成真实接口
  page: true,
  height: "full-20",
  cols: [
    [
      { type: "checkbox", fixed: "left" },
      { field: "id", fixed: "left", width: 80, title: "ID", sort: true },
    ],
  ],
});
js
var table = layui.table;

// 复选框事件
table.on("checkbox(test)", function (obj) {
  console.log(obj); // 查看对象所有成员
  console.log(obj.checked); // 当前是否选中状态
  console.log(obj.data); // 选中行的相关数据
  console.log(obj.type); // 若触发的是全选，则为：all；若触发的是单选，则为：one
});

单选框事件 ​

js
table.on("radio(filter)", callback);

当 table 开启单选框，且点击单选框时触发。

js
var table = layui.table;

// 单选框事件
table.on("radio(test)", function (obj) {
  console.log(obj); // 当前行的一些常用操作集合
  console.log(obj.checked); // 当前是否选中状态
  console.log(obj.data); // 选中行的相关数据
});

列拖拽宽度后的事件 ​

js
table.on("colResized(filter)", callback);

在表头列分割线拖拽宽度后触发。

js
var table = layui.table;

// 渲染
table.render({
  elem: "#test",
  // … // 其他属性
});

// 列拖拽宽度后的事件
table.on("colResized(test)", function (obj) {
  var col = obj.col; // 获取当前列属性配置项
  var options = obj.config; // 获取当前表格基础属性配置项
  console.log(obj); // 查看对象所有成员
});

列筛选（显示或隐藏）后的事件 ​

table.on('colToggled(filter)', callback);

点击头部工具栏右上角的字段筛选列表时触发。

js
var table = layui.table;

// 渲染
table.render({
  elem: "#test",
  // … // 其他属性
});

// 列筛选（显示或隐藏）后的事件
table.on("colToggled(test)", function (obj) {
  var col = obj.col; // 获取当前列属性配置项
  var options = obj.config; // 获取当前表格基础属性配置项
  console.log(obj); // 查看对象所有成员
});

行单击和双击事件 ​

  • 行单击事件：table.on('row(filter)', callback);
  • 行双击事件：table.on('rowDouble(filter)', callback);

单击或双击 table 行任意区域触发，两者用法相同。 注：在 table 模板中或任意内部元素中设置 lay-unrow 属性，可阻止该元素执行 row 事件

js
var table = layui.table;

// 渲染
table.render({
  elem: "#test",
  // … // 其他属性
});

// 行单击事件
table.on("row(test)", function (obj) {
  var data = obj.data; // 得到当前行数据
  var index = obj.index; // 得到当前行索引
  var tr = obj.tr; // 得到当前行 <tr> 元素的 jQuery 对象
  var options = obj.config; // 获取当前表格基础属性配置项
  console.log(obj); // 查看对象所有成员

  // obj.del() // 删除当前行
  // obj.update(fields, related);  // 修改行数据
  // obj.setRowChecked(opts); // 设置行选中状态
});

行右键菜单事件 ​

js
table.on("rowContextmenu(filter)", callback);

右键单击行时触发。

html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Demo</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="//unpkg.com/layui@2.8.7/dist/css/layui.css" rel="stylesheet" />
  </head>
  <body>
    <table class="layui-hide" id="ID-table-onrowContextmenu"></table>

    <!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
    <script src="//unpkg.com/layui@2.8.7/dist/layui.js"></script>
    <script>
      layui.use(["table", "dropdown", "util"], function () {
        var table = layui.table;
        var dropdown = layui.dropdown;
        var util = layui.util;

        // 渲染
        table.render({
          elem: "#ID-table-onrowContextmenu",
          defaultContextmenu: false, // 是否在 table 行中允许默认的右键菜单
          url: "/static/2.8/json/table/user.json", // 此处为静态模拟数据，实际使用时需换成真实接口
          page: true,
          cols: [
            [
              {
                field: "id",
                title: "ID",
                width: 80,
                fixed: "left",
                unresize: true,
              },
              { field: "username", title: "用户", width: 120 },
              { field: "sex", title: "性别", width: 80 },
              { field: "city", title: "城市", width: 100 },
              { field: "sign", title: "签名" },
              { field: "experience", title: "积分", width: 80, sort: true },
            ],
          ],
        });

        // 行单击事件
        table.on("rowContextmenu(ID-table-onrowContextmenu)", function (obj) {
          var data = obj.data; // 得到当前行数据
          var index = obj.index; // 得到当前行索引
          var tr = obj.tr; // 得到当前行 <tr> 元素的 jQuery 对象
          var options = obj.config; // 获取当前表格基础属性配置项
          // console.log(obj); // 查看对象所有成员

          // 右键操作
          dropdown.render({
            trigger: "contextmenu",
            show: true,
            data: [
              { title: "Menu item 1", id: "AAA" },
              { title: "Menu item 2", id: "BBB" },
            ],
            click: function (menuData, othis) {
              // 显示选中的相关数据 - 仅用于演示
              layer.alert(
                util.escape(
                  JSON.stringify({
                    dropdown: menuData,
                    table: obj.data,
                  }),
                ),
              );
            },
          });

          // obj.del() // 删除当前行
          // obj.update(fields, related);  // 修改行数据
          obj.setRowChecked({ selectedStyle: true }); // 标注行选中状态样式
        });
      });
    </script>
  </body>
</html>