mirror of
https://gitee.com/ulthon/ulthon_admin.git
synced 2026-10-29 08:58:22 +08:00
fix(table): 卡片设置面板与操作按钮交互打磨
- 外点收起改捕获阶段监听,点击筛选列等其他工具按钮时面板正确消失 - 排序点击后面板保持打开并就地刷新高亮,可连续切换排序 - 设置面板行距压缩(行高约 28px、最小宽 160px) - 卡片操作按钮间距紧凑(清零 layui 相邻 margin,统一 6px gap)
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user