obj

监听的事件种类

在 layui 表格 (table) 模块中，table.on() 方法可以用于监听不同类型的事件，主要分为以下几类事件监听：

1. `tool` 事件

监听工具列事件（即每一行的操作按钮点击事件），通常用于行内的操作按钮（如编辑、删除等）。

javascript table.on('tool(filter)', function(obj){ // obj 包含当前行的数据、事件类型等 });

常见场景：监听用户点击某一行的操作列（通过 toolbar 定义的操作按钮）触发的事件。

监听工具栏事件，即表格头部工具栏（比如添加、删除、导出等按钮）的点击事件。

javascript table.on('toolbar(filter)', function(obj){ // obj 包含当前表格的配置信息和事件类型 });

常见场景：监听表格上方的工具栏操作，如批量删除、导出、添加数据等。

3. `checkbox` 事件

监听复选框的选中或取消选中事件。这个事件在表格中有复选框（checkbox）时触发，主要用于监控用户是否选中了行。

javascript table.on('checkbox(filter)', function(obj){ // obj 包含选中行的数据和选中状态 });

常见场景：监听表格行的复选框选中和取消事件，常用于批量操作场景。

4. `row` 事件

监听行点击事件，当用户点击某一行时触发。

javascript table.on('row(filter)', function(obj){ // obj 包含当前行的数据和 DOM 元素 });

常见场景：点击某一行时，触发操作，如高亮显示、查看详细信息等。

5. `rowDouble` 事件

监听双击行事件，当用户双击某一行时触发。

javascript table.on('rowDouble(filter)', function(obj){ // obj 包含当前行的数据和 DOM 元素 });

常见场景：用户双击某一行时，触发编辑或查看详情操作。

6. `edit` 事件

监听单元格编辑事件，当用户编辑单元格内容时触发。

javascript table.on('edit(filter)', function(obj){ // obj 包含编辑的字段、原始值、修改后的值等 });

常见场景：单元格处于可编辑状态时，用户修改内容后触发，通常用于实时保存或记录修改数据。

7. `sort` 事件

监听排序事件，当用户点击表头进行排序时触发。

javascript table.on('sort(filter)', function(obj){ // obj 包含排序字段、排序方式（asc/desc）、当前表格数据 });

常见场景：用户点击表头进行排序操作时，触发该事件，通常用于前端或后端排序操作。

8. `colTool` 事件（列工具事件）

监听列工具栏事件。一般用于工具列模板中的工具操作，如列上的自定义按钮点击事件。

javascript table.on('colTool(filter)', function(obj){ // obj 包含点击的列工具按钮相关信息 });

常见场景：用户点击列上的自定义操作按钮时触发。

总结：

layui.table 的 table.on() 方法支持以下几类事件监听：

tool：行内操作列的事件监听（如编辑、删除）。
toolbar：表格顶部工具栏的事件监听。
checkbox：复选框选中或取消的事件监听。
row：单击某一行的事件监听。
rowDouble：双击某一行的事件监听。
edit：单元格编辑的事件监听。
sort：表头点击排序的事件监听。
colTool：列工具栏的自定义按钮事件监听。

这些事件监听器让表格具备更丰富的交互功能，能够根据用户操作做出响应。

`table.on('toolbar(list)', function(obj))`

在 layui 表格的 toolbar 事件中，table.on('toolbar(list)', function(obj)) 中的 obj 对象包含了触发事件时的一些关键信息。这些信息可以帮助你判断用户点击了哪个工具栏按钮，并且提供了对表格数据、配置、事件等的访问。下面是 obj 对象的主要属性：

`obj` 对象的主要属性：

event：
这是一个 字符串，表示工具栏中被点击按钮的 lay-event 属性的值。通过 event，你可以判断用户点击了哪个按钮。

javascript var event = obj.event;

config：
这是一个对象，包含当前表格的配置信息，如表格的 id、列信息、数据源等。你可以通过 config 获取与表格相关的所有配置。

javascript var config = obj.config;

tr（部分情况可用）：
表示当前操作的表格行对应的 tr（HTML DOM 元素）。不过这个属性在 toolbar 事件中并不是很常用，更多用于 row 级别的事件。
data：
这是一个数组，包含当前表格的数据。你可以通过它访问到整个表格的所有数据。虽然在 toolbar 事件中不一定需要直接操作这个属性，但它可以提供对当前表格中所有数据的访问。

javascript var data = obj.config.data; // 当前表格的所有数据

`toolbar` 事件中的使用示例：

假设你有一个表格的工具栏中有多个按钮，比如“添加”、“删除”等。你可以通过监听 toolbar 事件，并根据 obj.event 来执行不同的逻辑。

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

  // 渲染表格
  table.render({
    elem: '#test',
    url: '/getData', // 数据接口
    toolbar: '#toolbarDemo', // 工具栏模板
    cols: [[
      {type: 'checkbox', fixed: 'left'},
      {field: 'id', title: 'ID', width: 80, sort: true},
      {field: 'name', title: '名称', width: 120},
      {field: 'age', title: '年龄', width: 100}
    ]]
  });

  // 监听工具栏事件
  table.on('toolbar(test)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id); // 获取选中状态
    var data = checkStatus.data; // 获取选中的数据
    var event = obj.event; // 获取点击的事件类型

    if (event === 'add') {
      console.log('点击了添加按钮');
      // 执行添加操作
    } else if (event === 'delete') {
      console.log('点击了删除按钮，选中的数据：', data);
      // 执行删除操作
    }
  });
});

代码解析：

监听 toolbar 事件：
使用 table.on('toolbar(test)', function(obj)) 监听表格工具栏中的按钮点击事件。test 是表格的 lay-filter 名称。
判断 event：
通过 obj.event 获取点击的按钮对应的事件名称（即 lay-event 属性的值）。例如，event 可能是 add、delete 等。
获取选中状态：
使用 table.checkStatus(obj.config.id) 获取表格中被选中的行数据。这在执行删除等批量操作时非常有用。
执行对应操作：
根据 event 来判断用户点击了哪个按钮，并执行相应的逻辑。

`toolbar` 中的 `lay-event` 示例：

在工具栏中可以定义多个按钮，并通过 lay-event 指定每个按钮的事件类型。

<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 layui-btn-danger" lay-event="delete">删除</button>
  </div>
</script>

总结：

obj.event：用于确定用户点击了哪个按钮，通过 lay-event 设置。
obj.config：提供了表格的配置信息，常用于获取表格 id 和其他信息。
table.checkStatus(obj.config.id)：获取表格当前选中的行数据，用于执行批量操作。

这使得你可以轻松处理表格工具栏中的各种按钮点击事件，并根据用户选择的数据执行相应操作。

`table.on('tool(list)', function(obj))`

在 layui 表格的 tool 事件中，table.on('tool(list)', function(obj)) 中的 obj 对象包含了触发事件时的相关信息，主要包括点击的行数据、事件类型、DOM 节点等。通过这些信息，你可以知道用户点击了哪一个按钮或元素，并可以获取到对应行的数据，进行相应的操作。

`obj` 对象的主要属性：

data：
类型：对象
作用：包含当前行的所有数据。
通过 obj.data，你可以访问用户点击的这一行的所有字段内容。

javascript var data = obj.data;

event：
类型：字符串
作用：代表点击的事件类型，即你在表格的 lay-event 中定义的值。通过 obj.event，你可以判断用户点击了哪个操作按钮。

javascript var event = obj.event;

tr：
类型：DOM 元素
作用：当前操作的这一行对应的 tr 元素（DOM 节点）。
可以通过 obj.tr 获取当前行对应的 DOM 节点，进行进一步的 DOM 操作，比如添加样式、修改内容等。

javascript var tr = obj.tr;

config：
类型：对象
作用：当前表格的配置信息。
obj.config 包含了当前表格的所有配置信息，类似于渲染表格时 table.render() 中传入的配置。

javascript var config = obj.config;

update(fields)：
作用：用于更新当前行的数据。
你可以通过 obj.update(fields) 来更新当前行的显示内容。fields 是一个对象，指定要更新的字段及其新值。

javascript obj.update({ name: '新名字', age: 30 });

del()：
作用：删除当前行的 DOM 结构。
调用 obj.del() 方法可以删除当前行的 DOM 元素，通常在做删除操作时使用。不过，它只删除表格中的这一行，不会影响后台的数据，后台数据需要通过另外的请求来删除。

javascript obj.del(); // 删除当前行

`tool` 事件中的使用示例：

假设你在表格中有一列操作按钮，用户可以点击“编辑”或“删除”操作，tool 事件可以让你处理这些操作。

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

  // 渲染表格
  table.render({
    elem: '#test',
    url: '/getData', // 数据接口
    cols: [[
      {field: 'id', title: 'ID', width: 80},
      {field: 'name', title: '名称', width: 100},
      {field: 'age', title: '年龄', width: 80},
      {
        field: 'operation', 
        title: '操作', 
        toolbar: '#operationTpl', // 定义操作列
        width: 120
      }
    ]]
  });

  // 监听工具列事件
  table.on('tool(test)', function(obj){
    var data = obj.data; // 获取当前行数据
    var event = obj.event; // 获取 lay-event 对应的值
    var tr = obj.tr; // 获取当前行的 DOM 对象

    if (event === 'edit') {
      console.log('编辑行数据：', data);
      // 处理编辑操作
    } else if (event === 'delete') {
      layer.confirm('确定要删除吗？', function(index){
        obj.del(); // 删除行（仅前端）
        layer.close(index);
        // 这里你可以发送请求到后台，实际删除数据库中的数据
      });
    }
  });
});

操作列模板 (`toolbar`):

<script type="text/html" id="operationTpl">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
</script>

代码解析：

获取当前行数据 (obj.data)：
当用户点击“编辑”或“删除”按钮时，obj.data 会包含该行的所有数据。你可以通过它获取该行的具体字段，如 data.name、data.age 等。
判断事件类型 (obj.event)：
通过 obj.event 可以判断用户点击的是哪个按钮（例如 edit 或 delete），然后根据不同的事件类型执行相应的逻辑。
更新行数据 (obj.update)：
当用户点击编辑时，可以通过 obj.update() 来更新当前行的内容。表格会自动刷新并显示更新后的数据。
删除当前行 (obj.del)：
如果用户点击了“删除”按钮，obj.del() 可以删除表格中的该行。不过，它只会删除前端页面中的 DOM 元素，不会影响数据库中的数据。你需要在后台处理实际的数据删除操作。

总结：

obj.data：获取当前行的所有数据，方便进行编辑、查看等操作。
obj.event：根据 lay-event 的值判断用户点击了哪个操作按钮。
obj.update(fields)：更新当前行的数据并刷新表格。
obj.del()：删除当前行的 DOM 元素，但不影响后台数据。

通过 table.on('tool') 事件，你可以轻松处理表格中的行操作，如编辑、删除等。

Keys	Action
`?`	Open this help
`n`	Next page
`p`	Previous page
`s`	Search

obj

监听的事件种类

1. tool 事件

2. toolbar 事件

3. checkbox 事件

4. row 事件

5. rowDouble 事件

6. edit 事件

7. sort 事件

8. colTool 事件（列工具事件）

总结：

table.on('toolbar(list)', function(obj))

obj 对象的主要属性：

toolbar 事件中的使用示例：

代码解析：

toolbar 中的 lay-event 示例：

总结：

table.on('tool(list)', function(obj))

obj 对象的主要属性：

tool 事件中的使用示例：

操作列模板 (toolbar):

代码解析：

总结：

1. `tool` 事件

2. `toolbar` 事件

3. `checkbox` 事件

4. `row` 事件

5. `rowDouble` 事件

6. `edit` 事件

7. `sort` 事件

8. `colTool` 事件（列工具事件）

`table.on('toolbar(list)', function(obj))`

`obj` 对象的主要属性：

`toolbar` 事件中的使用示例：

`toolbar` 中的 `lay-event` 示例：

`table.on('tool(list)', function(obj))`

`obj` 对象的主要属性：

`tool` 事件中的使用示例：

操作列模板 (`toolbar`):