From 21a5eceeda4e75e13232229268cba8f51002e164 Mon Sep 17 00:00:00 2001 From: augushong Date: Mon, 5 Oct 2026 11:34:58 +0000 Subject: [PATCH] =?UTF-8?q?fix(table):=20=E6=8E=92=E5=BA=8F=E8=A1=8C?= =?UTF-8?q?=E5=9B=BE=E6=A0=87=E5=8F=B3=E7=BD=AE=E5=B9=B6=E5=9C=A8=E6=8E=92?= =?UTF-8?q?=E5=BA=8F=E7=BB=84=E6=A0=87=E9=A2=98=E6=8F=90=E4=BE=9B=E9=87=8D?= =?UTF-8?q?=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 排序行改两端布局：标题居左、方向图标贴右，未排序行右端留空对齐 - 「排序」标题右侧新增重置链接（仅排序生效时渲染），点击清除排序并就地刷新，面板保持打开 --- public/static/admin/css/public.css | 28 +++++++- public/static/admin/css/public.scss | 29 +++++++- .../static/plugs/ulthon-admin/admin-table.js | 69 ++++++++++++++----- 3 files changed, 108 insertions(+), 18 deletions(-) diff --git a/public/static/admin/css/public.css b/public/static/admin/css/public.css index 78ecc35..fa33d93 100644 --- a/public/static/admin/css/public.css +++ b/public/static/admin/css/public.css @@ -943,12 +943,38 @@ table样式 background-color: #f8f8f8; } /* 排序行紧凑：压过 .ul-nav-block .item 基类的 padding: 8px 18px - （同特异性 0,2,0，源序靠后胜出，不用 !important） */ + （同特异性 0,2,0，源序靠后胜出，不用 !important）；两端布局—— + 标题居左、方向图标贴行右端，未排序行图标 display:none，行仅剩 + 左侧标题，space-between 使各行标题对齐 */ .ua-card-setting-panel .ua-card-setting-sort-item { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; padding: 4px 12px; line-height: 20px; } +.ua-card-setting-sort-arrow { + flex: none; +} + +/* 「排序」标题行两端布局：标题居左，「重置」链接（仅排序生效时渲染）贴右 */ +.ua-card-setting-title.ua-card-setting-sort-title { + display: flex; + align-items: center; + justify-content: space-between; +} + +.ua-card-setting-sort-reset { + color: #01AAED; + cursor: pointer; + padding: 0 2px; +} +.ua-card-setting-sort-reset:hover { + text-decoration: underline; +} + .ua-card-setting-switch { position: relative; flex: none; diff --git a/public/static/admin/css/public.scss b/public/static/admin/css/public.scss index 3840a80..832ad3e 100644 --- a/public/static/admin/css/public.scss +++ b/public/static/admin/css/public.scss @@ -969,12 +969,39 @@ table样式 } // 排序行紧凑：压过 .ul-nav-block .item 基类的 padding: 8px 18px -//（同特异性 0,2,0，源序靠后胜出，不用 !important） +//（同特异性 0,2,0，源序靠后胜出，不用 !important）；两端布局—— +// 标题居左、方向图标贴行右端，未排序行图标 display:none，行仅剩 +// 左侧标题，space-between 使各行标题对齐 .ua-card-setting-panel .ua-card-setting-sort-item { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; padding: 4px 12px; line-height: 20px; } +.ua-card-setting-sort-arrow { + flex: none; +} + +// 「排序」标题行两端布局：标题居左，「重置」链接（仅排序生效时渲染）贴右 +.ua-card-setting-title.ua-card-setting-sort-title { + display: flex; + align-items: center; + justify-content: space-between; +} + +.ua-card-setting-sort-reset { + color: #01AAED; + cursor: pointer; + padding: 0 2px; + + &:hover { + text-decoration: underline; + } +} + .ua-card-setting-switch { position: relative; flex: none; diff --git a/public/static/plugs/ulthon-admin/admin-table.js b/public/static/plugs/ulthon-admin/admin-table.js index 1488dc8..6037287 100644 --- a/public/static/plugs/ulthon-admin/admin-table.js +++ b/public/static/plugs/ulthon-admin/admin-table.js @@ -427,11 +427,17 @@ cardSettingHtml += '
配置
'; cardSettingHtml += '
操作按钮始终显示' + '
'; - cardSettingHtml += '
排序
'; // 当前排序读 store 单一事实源（where.sort 形状为 {字段名: 'asc'|'desc'} - // 单键映射，与 store setSort/buildRequestData 同构） + // 单键映射，与 store setSort/buildRequestData 同构）——须先于标题行 + // 构建（重置链接的渲染判定要用） var cardSortState = window.UA_TABLE_STORE.dataProvider.getState(tableId); var cardSortCurrent = cardSortState && cardSortState.where ? cardSortState.where.sort : null; + // 「排序」标题 + 重置链接：以 cardSortCurrent 键数判定是否渲染 + // （排序字段可能是已隐藏列，不在下方排序行清单里，不能用行命中判定） + cardSettingHtml += '
排序' + + (cardSortCurrent && Object.keys(cardSortCurrent).length > 0 + ? '重置' : '') + + '
'; $.each(((controlledLayouts[tableId] && controlledLayouts[tableId].cols[0]) || []), function (i, col) { if (!col || !col.field || col.sort === false || col.hide) { return; @@ -443,8 +449,8 @@ sortIconClass = 'layui-icon layui-icon-' + (cardSortCurrent[col.field] === 'desc' ? 'down' : 'up'); } cardSettingHtml += '
' - + (col.title || col.field) - + '
'; + + '' + (col.title || col.field) + '' + + ''; }); cardSettingHtml += ''; @@ -474,13 +480,40 @@ event.stopPropagation(); }); + // 排序状态就地刷新共用闭包：重读 store where.sort，遍历排序行更新 + // current 高亮与方向图标（未排序行 i 保持 layui-hide，仅剩左侧标题）， + // 并同步「重置」链接显隐——有排序（where.sort 有键，排序字段可能是 + // 已隐藏列不在行清单里，不能用行命中判定）且无链接则补建，无排序则 + // 移除。reloadData 调用链内 store setWhere 同步完成，调用即读即新 + var refreshSortState = function () { + var sortState = window.UA_TABLE_STORE.dataProvider.getState(tableId); + var current = sortState && sortState.where ? sortState.where.sort : null; + $cardSettingElem.find('.ua-card-setting-sort-item').each(function () { + var sortType = current ? (current[$(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') + ' ua-card-setting-sort-arrow'); + }); + var $sortTitle = $cardSettingElem.find('.ua-card-setting-sort-title'); + var $reset = $sortTitle.find('.ua-card-setting-sort-reset'); + if (current && Object.keys(current).length > 0) { + if ($reset.length === 0) { + $sortTitle.append('重置'); + } + } else { + $reset.remove(); + } + }; + // 排序：循环 升 → 降 → 取消。与 listenTableSort 同构： // 以 lastTableWhere 为基底就地改 sort，显式传 where // （store.reload 仅在 opts.where 存在时经 setWhere 更新 // 请求参数，漏传排序到不了服务端）；initSort 供表头 // 箭头（取消时省略）；当前态以 store getState 为准 // （搜索路径会整体覆盖 lastTableWhere，admin-table.js - // 侧变量不可作判定依据）。点击后面板保持打开就地刷新高亮，可连续点击 + // 侧变量不可作判定依据）。点击后面板保持打开，refreshSortState + // 就地刷新高亮与重置链接，可连续点击 $cardSettingElem.on('click', '.ua-card-setting-sort-item', function (event) { event.stopPropagation(); var field = $(this).data('field'); @@ -501,17 +534,21 @@ } lastTableWhere[tableId] = lastWhere; ua.table.reloadData(tableId, reloadOpts); - // 就地刷新面板高亮（覆盖取消排序态）：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'); - }); + refreshSortState(); + }); + + // 重置排序：清除 where.sort 后重载（不带 initSort，取消排序语义 + // 与排序 handler 的取消分支一致）；面板保持打开、高亮清空，重置 + // 链接自身随 refreshSortState 消失。stopPropagation 防外点收起， + // preventDefault 抑制 a 元素默认行为 + $cardSettingElem.on('click', '.ua-card-setting-sort-reset', function (event) { + event.stopPropagation(); + event.preventDefault(); + var lastWhere = lastTableWhere[tableId] ? lastTableWhere[tableId] : {}; + delete lastWhere.sort; + lastTableWhere[tableId] = lastWhere; + ua.table.reloadData(tableId, {where: lastWhere}); + refreshSortState(); }); // 点击面板外区域收起（原生捕获阶段监听，先于一切 stopPropagation——