mirror of
https://gitee.com/ulthon/ulthon_admin.git
synced 2026-10-29 08:58:22 +08:00
feat(table): 卡片操作按钮过多时折叠收纳(pro#6)
卡片操作按钮直接子级超 3 个时第 4 个起收纳 容器级委托展开/收起 阈值写死
This commit is contained in:
@@ -885,6 +885,24 @@ table样式
|
||||
}
|
||||
}
|
||||
|
||||
/* 卡片操作按钮折叠收纳:按钮超过 3 个时其余移入隐藏容器(admin-table.js
|
||||
applyCardOperatFold 移 DOM),点击"更多"锚点展开整行排列,on 态高亮 */
|
||||
.ua-card-operat-more-wrap:not(.layui-hide) {
|
||||
flex-basis: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 4px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.ua-card-operat-more {
|
||||
cursor: pointer;
|
||||
color: inherit;
|
||||
}
|
||||
.ua-card-operat-more.on {
|
||||
color: rgb(22, 183, 119);
|
||||
}
|
||||
|
||||
.ua-card-setting-panel {
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
@@ -907,6 +907,25 @@ table样式
|
||||
}
|
||||
}
|
||||
|
||||
// 卡片操作按钮折叠收纳:按钮超过 3 个时其余移入隐藏容器(admin-table.js
|
||||
// applyCardOperatFold 移 DOM),点击"更多"锚点展开整行排列,on 态高亮
|
||||
.ua-card-operat-more-wrap:not(.layui-hide) {
|
||||
flex-basis: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 4px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.ua-card-operat-more {
|
||||
cursor: pointer;
|
||||
color: inherit;
|
||||
|
||||
&.on {
|
||||
color: rgb(22, 183, 119);
|
||||
}
|
||||
}
|
||||
|
||||
// 卡片设置面板(admin-table.js listenToolbar case 'TABLE_CARD_SETTING' 产出;
|
||||
// 面板骨架复用上方 .ul-nav-block 基类,此处只补面板本体、配置行与自绘开关)
|
||||
.ua-card-setting-panel {
|
||||
|
||||
@@ -289,6 +289,25 @@
|
||||
return false;
|
||||
};
|
||||
|
||||
// 卡片操作按钮折叠收纳:模板管线渲染完成后扫描各卡片操作区,直接子级
|
||||
// a/button 超过阈值 3 时从第 4 个起移入隐藏收纳容器,并在操作区末尾追加
|
||||
// "更多"开关锚点(展开委托在 render() 受控接线创建模板容器处绑定)。
|
||||
// 阈值写死不配置;调用点在 form.render 之前——按钮为锚点无逐节点事件,
|
||||
// 先移 DOM 再美化安全。Vue 分支不经过本函数(模板自理)。
|
||||
var applyCardOperatFold = function ($container) {
|
||||
$container.find('.ua-data-card-operat').each(function () {
|
||||
var $operat = $(this);
|
||||
var $buttons = $operat.children('a, button');
|
||||
if ($buttons.length <= 3) {
|
||||
return;
|
||||
}
|
||||
var $moreWrap = $('<div class="ua-card-operat-more-wrap layui-hide"></div>');
|
||||
$buttons.slice(3).appendTo($moreWrap);
|
||||
$moreWrap.appendTo($operat);
|
||||
$operat.append($('<a class="ua-card-operat-more"><i class="layui-icon layui-icon-more"></i></a>'));
|
||||
});
|
||||
};
|
||||
|
||||
// ========== vue/vueId 引擎(任务 17,全局 Vue 2.6.10 运行时编译)==========
|
||||
// 渲染模式为列表级单实例:模板内 v-for="d in rows" 循环行,一次渲染只挂载
|
||||
// 一个实例(逐行 new Vue 的成本随行数线性膨胀,销毁纪律也难以收口)。
|
||||
@@ -720,6 +739,8 @@
|
||||
// 切形态/重渲后保持;CSS 三态效果见 public.scss)
|
||||
$container.toggleClass('ua-card-operat-always', ua.getPageSetting('card-operat-always', '') === '1');
|
||||
$container.html(html);
|
||||
// 卡片操作按钮折叠收纳(function/laytpl 共用分支,见 applyCardOperatFold)
|
||||
applyCardOperatFold($container);
|
||||
// 容器恒为 .layui-form(lay-filter 与容器 id 同名),scoped form.render
|
||||
// 美化模板产出的 switch/checkbox 控件
|
||||
form.render(null, 'ua-layout-' + tableId);
|
||||
@@ -1068,6 +1089,15 @@
|
||||
'<div id="' + layoutId + '" class="ua-layout-container layui-form" lay-filter="ua-layout-' + options.id + '"></div>'
|
||||
);
|
||||
|
||||
// 卡片操作按钮"更多"展开委托:容器每次 render 经上方 remove 后
|
||||
// 重建,容器级委托绑定一次即随容器生命周期,无重复绑定;展开
|
||||
// 状态不记忆(重渲后收回)属预期
|
||||
$('#' + layoutId).on('click', '.ua-card-operat-more', function (e) {
|
||||
$(this).toggleClass('on').siblings('.ua-card-operat-more-wrap').toggleClass('layui-hide');
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
// 形态注册:layoutList 已在 defaultToolbar 段规范化(视图按钮
|
||||
// 注入共用)。运行期切形态经 ua.table.setLayoutForm。
|
||||
// options.cols 此时已过 formatCols/renderOperat/renderTrueHide,
|
||||
|
||||
Reference in New Issue
Block a user