From 4c6c133a12783329db86ee5a8becd3bf7b3cbd1f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B4=A4=E5=BF=83?= <3277200+sentsim@users.noreply.github.com> Date: Tue, 9 Jul 2024 14:22:49 +0800 Subject: [PATCH] =?UTF-8?q?refactor(table):=20=E4=BC=98=E5=8C=96=E8=A1=8C?= =?UTF-8?q?=E5=8D=95=E5=8F=8C=E5=87=BB=E4=BA=8B=E4=BB=B6=E6=9C=BA=E5=88=B6?= =?UTF-8?q?=EF=BC=8C=E9=81=BF=E5=85=8D=E4=B8=8E=E5=8D=95=E5=85=83=E6=A0=BC?= =?UTF-8?q?=E7=BC=96=E8=BE=91=E7=AD=89=E4=BA=8B=E4=BB=B6=E5=86=B2=E7=AA=81?= =?UTF-8?q?=20(#2064)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * chore(table): 优化行事件,新增返回 `event` 对象,可用于阻止事件冒泡 * docs: 更新文档 * refactor: 重新优化不触发行事件的机制 --- docs/table/index.md | 11 ++++++++-- examples/table-test.html | 14 ++++++------ src/modules/table.js | 46 +++++++++++++++++++++++----------------- 3 files changed, 43 insertions(+), 28 deletions(-) diff --git a/docs/table/index.md b/docs/table/index.md index ae719e84..2f8f22c2 100644 --- a/docs/table/index.md +++ b/docs/table/index.md @@ -768,18 +768,25 @@ table.render({ }); // 行单击事件 -table.on('row(test)', function(obj){ +table.on('row(test)', function(obj) { var data = obj.data; // 得到当前行数据 var dataCache = obj.dataCache; // 得到当前行缓存数据,包含特定字段 --- 2.8.8+ var index = obj.index; // 得到当前行索引 var tr = obj.tr; // 得到当前行 元素的 jQuery 对象 var options = obj.config; // 获取当前表格基础属性配置项 - console.log(obj); // 查看对象所有成员 + var e = obj.e; // 当前的 jQuery 事件对象 --- 2.9.14+ + + console.log('onrow', obj); // 查看返回对象的所有成员 // obj.del() // 删除当前行 // obj.update(fields, related); // 修改行数据 // obj.setRowChecked(opts); // 设置行选中状态 }); + +// 行双击事件 +table.on('rowDouble(test)', function(obj) { + console.log('onrowDouble', obj); // 查看返回对象的所有成员 - 同 row 事件 +}); ```

行右键菜单事件 2.8+

diff --git a/examples/table-test.html b/examples/table-test.html index 4a35dc04..96fa6766 100644 --- a/examples/table-test.html +++ b/examples/table-test.html @@ -195,7 +195,7 @@ layui.use(['table', 'dropdown'], function(){ } ], // escape: false, - editTrigger: 'dblclick', + // editTrigger: 'dblclick', // cellMaxWidth: 320 // cellExpandedWidth: 160, // 单元格默认展开后的宽度 // cellExpandedStyle: 'tips', // 单元格默认展开风格 @@ -555,18 +555,18 @@ layui.use(['table', 'dropdown'], function(){ }); // 行单击事件 - table.on('row(test)', function(obj){ - console.log(obj); - // layer.closeAll('tips'); + table.on('row(test)', function(obj) { + console.log('onrow', obj); // 查看返回的对象成员 + + // 单击行设置选中 obj.setRowChecked({ // type: 'radio' }); - // layer.msg('row 事件') }); // 行双击事件 - table.on('rowDouble(test)', function(obj){ - console.log(obj); + table.on('rowDouble(test)', function(obj) { + console.log('onrowDouble', obj); // 查看返回的对象成员 }); // 单元格编辑事件 diff --git a/src/modules/table.js b/src/modules/table.js index bcdf6277..6ba70f64 100644 --- a/src/modules/table.js +++ b/src/modules/table.js @@ -2497,31 +2497,39 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){ if(othis.data('off')) return; // 不触发事件 that.layBody.find('tr:eq('+ index +')').removeClass(ELEM_HOVER) }).on('click', 'tr', function(e){ // 单击行 - // 不支持行单击事件的元素 - var UNROW = [ - '.layui-form-checkbox', - '.layui-form-switch', - '.layui-form-radio', - '[lay-unrow]' - ].join(','); - if( $(e.target).is(UNROW) || $(e.target).closest(UNROW)[0]){ - return; - } - setRowEvent.call(this, 'row'); - }).on('dblclick', 'tr', function(){ // 双击行 - setRowEvent.call(this, 'rowDouble'); + setRowEvent.call(this, 'row', e); + }).on('dblclick', 'tr', function(e){ // 双击行 + setRowEvent.call(this, 'rowDouble', e); }).on('contextmenu', 'tr', function(e){ // 菜单 if (!options.defaultContextmenu) e.preventDefault(); - setRowEvent.call(this, 'rowContextmenu'); + setRowEvent.call(this, 'rowContextmenu', e); }); // 创建行单击、双击、菜单事件 - var setRowEvent = function(eventType){ + var setRowEvent = function(eventType, e){ var othis = $(this); - if(othis.data('off')) return; //不触发事件 - layui.event.call(this, + if(othis.data('off')) return; // 不触发事件 + + // 不触发「行单/双击事件」的子元素 + if (eventType !== 'rowContextmenu') { + var UNROW = [ + '.layui-form-checkbox', + '.layui-form-switch', + '.layui-form-radio', + '[lay-unrow]' + ].join(','); + + if($(e.target).is(UNROW) || $(e.target).closest(UNROW)[0]){ + return; + } + } + + layui.event.call( + this, MOD_NAME, eventType + '('+ filter +')', - commonMember.call(othis.children('td')[0]) + commonMember.call(othis.children('td')[0], { + e: e + }) ); }; @@ -2606,7 +2614,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){ // 表格主体单元格触发编辑的事件 that.layBody.on(options.editTrigger, 'td', function(e){ - renderGridEdit(this, e) + renderGridEdit(this, e); }).on('mouseenter', 'td', function(){ showGridExpandIcon.call(this) }).on('mouseleave', 'td', function(){