多表联动查询（逐级过滤） 控件 可视化代码生成平台 · 复合数据控件
<div style="background:linear-gradient(135deg,#1e3a8a,#2563eb);color:#fff;border-radius:16px;padding:34px 32px;margin-bottom:24px;">
<div style="margin:0 0 6px;font-size:28px;font-weight:700;">多表联动查询（逐级过滤） 控件</div>
<div style="margin:0;opacity:.9;">可视化代码生成平台 · 复合数据控件（27/27）</div>
</div>
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:18px 22px;margin:16px 0;box-shadow:0 1px 3px rgba(0,0,0,.04);">
<b>用途：</b>多级下拉，下一级按上一级所选过滤——类目→商品→规格，值取最深一级的选中值。<br>
<b>存储：</b><code style="background:#0f172a;color:#e2e8f0;padding:2px 7px;border-radius:5px;font-size:13px;">varchar(60)（存最深一级的选中值）。</code><br>
<b>列表/搜索：</b>按最深级值；一般不模糊。<br>
<b>适用：</b>需要"逐级定位"的选择：分类树、关联对象、级联归属。
</div>
<div style="margin:32px 0 12px;font-size:21px;font-weight:700;border-left:5px solid #2563eb;padding-left:12px;">控件解析（外观 · 行为交互 · 样式 · 数据）</div>
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:18px 22px;margin:14px 0;">
<table style="width:100%;border-collapse:collapse;font-size:14px;">
<tr><th style="border:1px solid #e5e7eb;padding:8px 12px;background:#f1f5f9;width:96px;">维度</th><th style="border:1px solid #e5e7eb;padding:8px 12px;background:#f1f5f9;">说明</th></tr>
<tr><td style="border:1px solid #e5e7eb;padding:8px 12px;"><b>外观</b></td><td style="border:1px solid #e5e7eb;padding:8px 12px;">多级下拉串联：选第 1 级后加载第 2 级可选，依此类推；值=最后一级选中。</td></tr><tr><td style="border:1px solid #e5e7eb;padding:8px 12px;"><b>行为交互</b></td><td style="border:1px solid #e5e7eb;padding:8px 12px;">选上级→异步/本地过滤下级选项；可"增加一行"加层级；回显时按关联列自动回溯整条链。</td></tr><tr><td style="border:1px solid #e5e7eb;padding:8px 12px;"><b>样式</b></td><td style="border:1px solid #e5e7eb;padding:8px 12px;">每级下拉宽度、层级数随 dict 配置；可加固定筛选。</td></tr><tr><td style="border:1px solid #e5e7eb;padding:8px 12px;"><b>数据</b></td><td style="border:1px solid #e5e7eb;padding:8px 12px;">存字符串（最深级值）；dict 是 JSON 级别配置（每级 表/显示列/取值列/关联列/固定筛选）。</td></tr>
</table>
</div>
<div style="margin:32px 0 12px;font-size:21px;font-weight:700;border-left:5px solid #2563eb;padding-left:12px;">属性面板（右侧）功能详解</div>
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:18px 22px;margin:14px 0;">
<div style="font-weight:700;color:#0f172a;margin:14px 0 8px;">① 基础设置</div>
<table style="width:100%;border-collapse:collapse;font-size:14px;">
<tr><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">字段</th><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">说明</th></tr>
<tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">字段名</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">业务表列名。</td></tr><tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">标签</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">如"商品规格"。</td></tr>
</table><div style="font-weight:700;color:#0f172a;margin:14px 0 8px;">② 级别配置（dict）</div>
<table style="width:100%;border-collapse:collapse;font-size:14px;">
<tr><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">字段</th><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">说明</th></tr>
<tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">每级</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">数据表 + 显示列（勾选拼接）+ 取值列（存的值）+ 关联列（连上级）。</td></tr><tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">第1级固定筛选</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">可选，如 pid=0 只列顶级。</td></tr><tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">增加层级</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">"增加一行"加下一级，可跨表。</td></tr>
</table><div style="font-weight:700;color:#0f172a;margin:14px 0 8px;">③ 显示</div>
<table style="width:100%;border-collapse:collapse;font-size:14px;">
<tr><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">字段</th><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">说明</th></tr>
<tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">进列表</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">显示最深级值/名称。</td></tr><tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">排序权重</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">位置。</td></tr>
</table><div style="font-weight:700;color:#0f172a;margin:14px 0 8px;">④ 高级</div>
<table style="width:100%;border-collapse:collapse;font-size:14px;">
<tr><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">字段</th><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">说明</th></tr>
<tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">启用 / 停用</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">停用仅隐藏。</td></tr>
</table>
</div>
<div style="margin:32px 0 12px;font-size:21px;font-weight:700;border-left:5px solid #2563eb;padding-left:12px;">演示</div>
<div style="background:#f8fafc;border:1px dashed #cbd5e1;border-radius:10px;padding:14px 16px;margin:12px 0;">
<span style="font-size:13px;color:#6b7280;display:block;margin-bottom:6px;">多级联动（类目 → 商品 → 规格）</span>
<div style="display:flex;gap:8px;flex-wrap:wrap;">
<select style="padding:8px 10px;border:1px solid #cbd5e1;border-radius:8px;font-size:13px;"><option>手机数码</option></select>
<select style="padding:8px 10px;border:1px solid #cbd5e1;border-radius:8px;font-size:13px;"><option>智能手机</option></select>
<select style="padding:8px 10px;border:1px solid #cbd5e1;border-radius:8px;font-size:13px;"><option>128G 黑色</option></select>
</div>
</div>
<div style="background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af;border-radius:10px;padding:12px 16px;font-size:14px;margin:12px 0;">技巧：与"行政区划"思路相同但更通用：可跨表、可任意层级、可加固定筛选。值只存最深一级，回显靠关联列自动回溯；保存时校验各级有效性。</div>
<div style="margin-top:36px;color:#6b7280;font-size:13px;text-align:center;">多表联动查询（逐级过滤） 控件文档 · 随工具迭代更新</div>
纯粹分享的工具，不搞收费激活，对普通用户非常友好👏 觉得不错可以帮忙顶一下帖子，让更多有需要的人看到这款工具😀
页:
[1]