目录
table.on('event(filter)', callback);
event(filter)
是事件的特定结构。 event
为事件名,支持的事件见下表。filter
为元素属性 lay-filter
对应的值。callback
为事件执行时的回调函数,并返回一个包含各项成员的 object
类型的参数。event | 描述 |
---|---|
toolbar | 头部工具栏事件 |
sort | 排序切换事件 |
colResized 2.8+ | 列拖拽宽度后的事件 |
colToggled 2.8+ | 列筛选(显示或隐藏)后的事件 |
row / rowDouble | 行单击和双击事件 |
rowContextmenu 2.8+ | 行右键菜单事件 |
edit | 单元格编辑事件 |
tool 🔥 | 单元格工具事件。可在该事件中实现行的更新与删除操作。 |
checkbox | 复选框事件 |
radio | 单选框事件 |
pagebar 2.7+ | 尾部分页栏事件 |
table.on('toolbar(filter)', callback);
点击头部工具栏区域设定了属性为 lay-event=""
的元素时触发。如:
- <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>
-
- <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('sort(filter)', callback);
点击表头排序时触发,它通常在设置 autoSort: false
基础属性时使用,以呈现后端的排序,而不是默认的前端排序。
- var table = layui.table;
-
- // 禁用前端自动排序,以便由服务端直接返回排序好的数据
- table.render({
- elem: '#test',
- autoSort: false, // 禁用前端自动排序。
- // … // 其他属性
- });
-
- // 触发排序事件
- table.on('sort(test)', function(obj){
- console.log(obj.field); // 当前排序的字段名
- console.log(obj.type); // 当前排序类型:desc(降序)、asc(升序)、null(空对象,默认排序)
- console.log(this); // 当前排序的 th 对象
-
- // 尽管我们的 table 自带排序功能,但并没有请求服务端。
- // 有些时候,你可能需要根据当前排序的字段,重新向后端发送请求,从而实现服务端排序,如:
- table.reload('test', {
- initSort: obj, // 记录初始排序,如果不设的话,将无法标记表头的排序状态。
- where: { // 请求参数(注意:这里面的参数可任意定义,并非下面固定的格式)
- field: obj.field, // 排序字段
- order: obj.type // 排序方式
- }
- });
- });
table.on('colResized(filter)', callback);
在表头列分割线拖拽宽度后触发。
- 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);
点击头部工具栏右上角的字段筛选列表时触发。
- 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 行任意区域触发,两者用法相同。
- 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; // 得到当前行
元素的 jQuery 对象- var options = obj.config; // 获取当前表格基础属性配置项
- console.log(obj); // 查看对象所有成员
-
- // obj.del() // 删除当前行
- // obj.update(fields, related); // 修改行数据
- // obj.setRowChecked(opts); // 设置行选中状态
- });
七:行右键菜单事件
table.on('rowContextmenu(filter)', callback);
右键单击行时触发。
"layui-hide" id="ID-table-onrowContextmenu">
- 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/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; // 得到当前行
元素的 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}); // 标注行选中状态样式
- });
- });
八:单元格编辑事件
table.on('edit(filter)', callback);
单元格被编辑,且值发生改变时触发。
- var table = layui.table;
- var layer = layui.layer;
-
- // 单元格编辑事件
- 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 新增
- console.log(obj); // 查看对象所有成员
-
- // 值的校验
- 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 新增功能,即同步更新其他包含自定义模板并可能存在关联的列视图
- });
九:单元格工具事件
- 单元格工具事件「单击触发」:
table.on('tool(filter)', callback);
- 单元格工具事件「双击触发」:
table.on('toolDouble(filter)', callback);
单击或双击单元格中带有 lay-event=""
属性的元素时触发。在表格主体的单元格中,经常需要进行很多的动态操作,比如编辑、删除等操作,这些均可以在单元格工具事件中完成。
- <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>
-
-
- {{# if(d.auth > 2){ }}
- <a class="layui-btn layui-btn-xs" lay-event="check">审核a>
- {{# } }}
- script>
-
- <table id="test" lay-filter="test">table>
-
- <script>
- layui.use(function(){
- var table = layui.table;
- // 渲染
- table.render({
- elem: '#test'
- ,cols: [[
- {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; // 得到当前行
元素的 jQuery 对象- var options = obj.config; // 获取当前表格基础属性配置项
- console.log(obj); // 查看对象所有成员
-
- // 根据 lay-event 的值执行不同操作
- if(layEvent === 'detail'){ //查看
- // do somehing
- } 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>
十:复选框事件
able.on('checkbox(filter)', callback);
当 table 开启复选框,且点击复选框时触发。
- 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
- });
十一:单选框事件
table.on('radio(filter)', callback);
当 table 开启单选框,且点击单选框时触发。
- var table = layui.table;
-
- // 单选框事件
- table.on('radio(test)', function(obj){
- console.log(obj); // 当前行的一些常用操作集合
- console.log(obj.checked); // 当前是否选中状态
- console.log(obj.data); // 选中行的相关数据
- });
十二:尾部分页栏事件
table.on('pagebar(filter)', callback);
点击尾部分页栏自定义模板中属性为 lay-event=""
的元素时触发。用法跟 toolbar 完全一致
- 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 对应的值
- });
-
相关阅读:
有什么好赚钱的项目可以做?这8个小项目不错,想赚钱的别错过!
C++课程设计
突破界限的力量:探索Facebook如何打破国界、文化和语言的障碍
Dubbo线程池
蓝桥杯真题:纯质数
Appium自动化测试基础 — Android模拟器(Genymotion)安装(一)
Django(二)精美博客搭建(10)实现关于我页及文章详情页上一篇/下一篇bug解决
#力扣:26. 删除有序数组中的重复项@FDDLC
在DDD领域驱动下的微服务数据库的MVC设计思路(高度可行性)
矩阵账号搭建流程,3步学会,直接拿去用即可
-
原文地址:https://blog.csdn.net/qq_61313896/article/details/132875796
-
最新文章
-
C++11 线程同步接口std::condition_variable和std::future的简单使用
Go runtime 调度器精讲(十一):总览全局
Spring框架漏洞总结
Angular 18+ 高级教程 – 国际化 Internationalization i18n
基于Tauri2+Vue3搭建桌面端程序|tauri2+vite5多窗口|消息提醒|托盘闪烁
ComfyUI 基础教程(五) —— 应用 IP-Adapter 实现图像风格迁移
网络空间的“边水往事”?针对华语黑产及用户进行攻击的 APT-K-UN3 活动分析
伪装“黑神话悟空修改器”传播木马的活动分析
全球蓝屏后,微软决定将安全踢出Windows内核
Java读取寄存器数据的方法