mirror of
https://gitee.com/ulthon/ulthon_admin.git
synced 2026-11-08 20:10:50 +08:00
fix(table): 卡片勾选收敛至勾位图标并消除勾选重渲闪烁(pro#4)
- 委托收敛勾位判定+快速路径 class 回显 - 勾位光标样式 - usercard/goodscard 勾位适配 - 两个技能文档契约同步
This commit is contained in:
@@ -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 {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user