fix(table): 卡片设置面板与操作按钮交互打磨

- 外点收起改捕获阶段监听,点击筛选列等其他工具按钮时面板正确消失
- 排序点击后面板保持打开并就地刷新高亮,可连续切换排序
- 设置面板行距压缩(行高约 28px、最小宽 160px)
- 卡片操作按钮间距紧凑(清零 layui 相邻 margin,统一 6px gap)
This commit is contained in:
augushong
2026-10-05 10:04:51 +00:00
parent 47b9f355b0
commit 3770e76583
3 changed files with 71 additions and 22 deletions

View File

@@ -852,12 +852,16 @@ table样式
.ua-data-card-operat {
display: flex;
flex-wrap: wrap;
gap: 4px;
gap: 6px;
justify-content: flex-end;
}
.ua-data-card-operat a {
margin: 0;
}
/* 压过 layui 基类 .layui-btn+.layui-btn{margin-left:10px}(特异性 0,3,0 > 0,2,0) */
.ua-data-card-operat .layui-btn + .layui-btn {
margin-left: 0;
}
/* 卡片操作按钮三态显隐:卡片网格内默认隐藏(保占位防 footer 跳动)、
hover 显示;设置面板开关写入容器的 ua-card-operat-always 类后常显
@@ -891,7 +895,7 @@ table样式
flex-basis: 100%;
display: flex;
justify-content: flex-end;
gap: 4px;
gap: 6px;
flex-wrap: wrap;
}
@@ -913,7 +917,7 @@ table样式
.ua-card-setting-panel {
position: absolute;
z-index: 999;
min-width: 200px;
min-width: 160px;
border: 1px solid #d2d2d2;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
@@ -923,7 +927,7 @@ table样式
}
.ua-card-setting-title {
padding: 10px 18px 2px;
padding: 6px 12px 0;
color: #999;
font-size: 12px;
}
@@ -933,11 +937,17 @@ table样式
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 8px 18px;
padding: 4px 12px;
}
.ua-card-setting-item:hover {
background-color: #f8f8f8;
}
/* 排序行紧凑:压过 .ul-nav-block .item 基类的 padding: 8px 18px
(同特异性 0,2,0,源序靠后胜出,不用 !important) */
.ua-card-setting-panel .ua-card-setting-sort-item {
padding: 4px 12px;
line-height: 20px;
}
.ua-card-setting-switch {
position: relative;

View File

@@ -873,12 +873,17 @@ table样式
.ua-data-card-operat {
display: flex;
flex-wrap: wrap;
gap: 4px;
gap: 6px;
justify-content: flex-end;
a {
margin: 0;
}
// 压过 layui 基类 .layui-btn+.layui-btn{margin-left:10px}(特异性 0,3,0 > 0,2,0)
.layui-btn + .layui-btn {
margin-left: 0;
}
}
// 卡片操作按钮三态显隐:卡片网格内默认隐藏(保占位防 footer 跳动)、
@@ -913,7 +918,7 @@ table样式
flex-basis: 100%;
display: flex;
justify-content: flex-end;
gap: 4px;
gap: 6px;
flex-wrap: wrap;
}
@@ -936,7 +941,7 @@ table样式
.ua-card-setting-panel {
position: absolute;
z-index: 999;
min-width: 200px;
min-width: 160px;
border: 1px solid #d2d2d2;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
@@ -946,7 +951,7 @@ table样式
}
.ua-card-setting-title {
padding: 10px 18px 2px;
padding: 6px 12px 0;
color: #999;
font-size: 12px;
}
@@ -956,13 +961,20 @@ table样式
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 8px 18px;
padding: 4px 12px;
&:hover {
background-color: #f8f8f8;
}
}
// 排序行紧凑:压过 .ul-nav-block .item 基类的 padding: 8px 18px
//(同特异性 0,2,0,源序靠后胜出,不用 !important)
.ua-card-setting-panel .ua-card-setting-sort-item {
padding: 4px 12px;
line-height: 20px;
}
.ua-card-setting-switch {
position: relative;
flex: none;

View File

@@ -9,6 +9,8 @@
var lastTableWhere = {};
var colToggledTimers = {};
// 卡片设置面板外点收起的原生捕获监听(单例,打开面板前先摘旧监听防重复绑定)
var cardSettingOutsideClose = null;
var selectMode, selectConfirmCallback;
// reloadData 引擎接线(加载期执行一次):受控表(UA_TABLE_STORE 已注册)的数据
@@ -389,6 +391,16 @@
$view.find('[lay-event="TABLE_CARD_SETTING"]').toggleClass('layui-hide', isTable);
};
// 卡片设置面板统一收起(外点收起/图标再点收起等路径共用):移除面板并摘除
// 外点捕获监听,保证不留孤儿监听
var closeCardSettingPanel = function (tableId) {
$('#ua-card-setting-' + tableId).remove();
if (cardSettingOutsideClose) {
document.removeEventListener('click', cardSettingOutsideClose, true);
cardSettingOutsideClose = null;
}
};
// 卡片设置面板开关(pro#5 迭代:入口为右侧 defaultToolbar 图标组最左侧的
// TABLE_CARD_SETTING 图标,走 layui toolbar 事件)。含面板创建/移除/开关/
// 排序/外点收起全套逻辑。面板 append 在本表的 .layui-table-tool 容器
@@ -404,7 +416,7 @@
var $toolElem = $view.find('.layui-table-tool').first();
var $cardSettingElem = $('#' + cardSettingId);
if ($cardSettingElem.length > 0) {
$cardSettingElem.remove();
closeCardSettingPanel(tableId);
return;
}
@@ -468,7 +480,7 @@
// 请求参数,漏传排序到不了服务端);initSort 供表头
// 箭头(取消时省略);当前态以 store getState 为准
// (搜索路径会整体覆盖 lastTableWhere,admin-table.js
// 侧变量不可作判定依据)。点击后收起面板
// 侧变量不可作判定依据)。点击后面板保持打开就地刷新高亮,可连续点击
$cardSettingElem.on('click', '.ua-card-setting-sort-item', function (event) {
event.stopPropagation();
var field = $(this).data('field');
@@ -489,19 +501,34 @@
}
lastTableWhere[tableId] = lastWhere;
ua.table.reloadData(tableId, reloadOpts);
$cardSettingElem.remove();
$(document).off('click.ua-card-setting');
// 就地刷新面板高亮(覆盖取消排序态):reloadData 调用链内 store
// setWhere 同步完成,返回后重读 where.sort 即新值
sortState = window.UA_TABLE_STORE.dataProvider.getState(tableId);
cardSortCurrent = sortState && sortState.where ? sortState.where.sort : null;
$cardSettingElem.find('.ua-card-setting-sort-item').each(function () {
var sortType = cardSortCurrent ? (cardSortCurrent[$(this).data('field')] || null) : null;
$(this).toggleClass('current', !!sortType)
.find('i').attr('class', sortType
? 'layui-icon layui-icon-' + (sortType === 'desc' ? 'down' : 'up')
: 'layui-icon layui-hide');
});
});
// 点击面板外区域收起(命名空间事件,收起时解除);面板已不在图标
// 元素内,判定为「既不在图标内、也不在面板内」才收起,否则点面板
// 自身会被误判为外部点立刻收起
$(document).off('click.ua-card-setting').on('click.ua-card-setting', function (event) {
if (!$(event.target).closest($toolbarSettingElem).length && !$(event.target).closest('#' + cardSettingId).length) {
$('#' + cardSettingId).remove();
$(document).off('click.ua-card-setting');
// 点击面板外区域收起(原生捕获阶段监听,先于一切 stopPropagation——
// layui 内置 LAYTABLE_COLS/PRINT/EXPORT 等图标的点击处理带
// stopPropagation 挡冒泡,冒泡阶段监听点不到,捕获阶段不受影响);
// 面板已不在图标元素内,判定为「既不在图标内、也不在面板内」才收起,
// 否则点面板自身会被误判为外部点立刻收起。绑定前先摘旧监听防重复绑定
if (cardSettingOutsideClose) {
document.removeEventListener('click', cardSettingOutsideClose, true);
}
cardSettingOutsideClose = function (event) {
var $t = $(event.target);
if (!$t.closest($toolbarSettingElem).length && !$t.closest('#' + cardSettingId).length) {
closeCardSettingPanel(tableId);
}
});
};
document.addEventListener('click', cardSettingOutsideClose, true);
};
if (window.UA_TABLE_STORE) {