fix(table): 卡片勾选收敛至勾位图标并消除勾选重渲闪烁(pro#4)

- 委托收敛勾位判定+快速路径 class 回显
- 勾位光标样式
- usercard/goodscard 勾位适配
- 两个技能文档契约同步
This commit is contained in:
augushong
2026-10-03 11:55:56 +00:00
parent 20a5470a4a
commit a9f9045d10
7 changed files with 57 additions and 22 deletions

View File

@@ -753,7 +753,7 @@ table样式
border: 1px solid #f2f2f2;
border-radius: 5px;
background-color: #fff;
cursor: pointer;
cursor: default;
transition: border-color 0.2s, box-shadow 0.2s;
}
.ua-data-card:hover {
@@ -797,6 +797,10 @@ table样式
color: #d2d2d2;
font-size: 18px;
line-height: 1;
cursor: pointer;
}
.ua-data-card-check:hover {
color: rgb(22, 183, 119);
}
.ua-data-card-checked .ua-data-card-check {

View File

@@ -768,7 +768,7 @@ table样式
border: 1px solid #f2f2f2;
border-radius: 5px;
background-color: #fff;
cursor: pointer;
cursor: default;
transition: border-color .2s, box-shadow .2s;
&:hover {
@@ -815,6 +815,11 @@ table样式
color: #d2d2d2;
font-size: 18px;
line-height: 1;
cursor: pointer;
&:hover {
color: rgb(22, 183, 119);
}
}
.ua-data-card-checked .ua-data-card-check {

View File

@@ -155,12 +155,14 @@
// 统一行选中委托(任务 18):模板渲染容器内凡带 data-table-id + data-id 属性
// 的行元素——内置 card 的 .ua-data-card 与自定义 laytpl/Vue 模板的卡片/勾位
// 元素——点击即切换选中,全部走本委托,无任何形态专用事件。模板作者契约:
// 给行根元素(或勾位元素)加这两属性即获得点选交互,无需页面级监听。
// 元素——仅当点击落在行内 .ua-data-card-check 勾位元素内才切换选中,全部走
// 本委托,无任何形态专用事件。模板作者契约:给行根元素(或勾位元素)加这两
// 属性、勾位区域挂 .ua-data-card-check 类即获得点选交互,无需页面级监听。
// 交互元素(按钮/表单控件/layui 美化层)豁免不触发勾选;禁用行
// (ua-data-card-disabled 标记或行 LAY_DISABLED)整元素不可勾选。选择态落
// store(与引擎勾选同一事实源,批量删除经 ua.table.checkStatus 分发即取到),
// 随后重渲模板管线回显勾位标记。
// 随后走快速路径按模式只改勾位卡片 class 回显(radio 替换 / checkbox 切换),
// 目标卡元素找不到时兜底整容器重渲模板管线回显勾位标记。
$(document).on('click', '[data-table-id][data-id]', function (e) {
var $card = $(this);
var tableId = $card.attr('data-table-id');
@@ -171,6 +173,10 @@
if ($card.hasClass('ua-data-card-disabled')) {
return;
}
// 仅勾位点击生效:点卡片正文不触发勾选(点正文零开销)
if ($(e.target).closest('.ua-data-card-check').length === 0) {
return;
}
if ($(e.target).closest('a,button,input,select,textarea,label,.layui-form-switch,.layui-form-checkbox,.layui-form-radio').length) {
return;
}
@@ -189,8 +195,27 @@
if (!row || row.LAY_DISABLED) {
return;
}
// 快速路径(pro#4):不做整容器重渲,仅按模式调整勾位卡片 class——
// radio 替换(清旧卡、点新卡,重复点同一卡净效果保持选中)、checkbox
// 切换(含再点取消);DOM 不重建,含图卡片不闪。自定义模板未按契约
// 输出勾位元素时兜底整容器重渲,不丢功能。
var prevRadioId = (state.selectMode === 'radio' && state.selectedIds && state.selectedIds.length)
? state.selectedIds[0]
: null;
window.UA_TABLE_STORE.selection.set(tableId, row);
ua.table.renderLayoutForm(tableId);
var $target = $('#ua-layout-' + tableId).find('[data-id="' + rowId + '"]');
if ($target.length === 0) {
ua.table.renderLayoutForm(tableId);
return;
}
if (state.selectMode === 'radio') {
if (prevRadioId !== null && String(prevRadioId) !== String(rowId)) {
$('#ua-layout-' + tableId).find('[data-id="' + prevRadioId + '"]').removeClass('ua-data-card-checked');
}
$target.addClass('ua-data-card-checked');
} else {
$target.toggleClass('ua-data-card-checked');
}
});
// (b) 模板引擎优先级解析:tplFunction > tplLay > tplVue > tplLayId > tplVueId,