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 事件
+});
```
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(){