本页演示「Master-Detail 主从表格」——一组由本站自建插件实现的「主表 → 记录详情」交互，免费复刻了 wpDataTables 官方付费组件 Master-Detail Tables 的核心体验，无需购买任何附加组件。它的核心思想是：主表只展示精简的概览列，点击某一行（或该行的「详情」按钮）即可看到这条记录的完整详情——更多字段、图片、甚至这条记录关联的一对多子表，而不会让主表变得拥挤。
本页提供两个示例，覆盖官方组件的两套配置维度——打开方式（点击整行 / 详情按钮）与展示方式（弹窗 / 独立页面 / 自定义模板页）。每个表格上方都有一个模式切换器，可实时切换这些模式，亲手体验差异。其中「自定义模板页」用一套自定义 HTML 模板渲染详情（内嵌与官方同名的 %wpdatatables_md_child_table% 子表占位符），对应官方沙盒的「Car details / Gaming heroes」自定义模板页示例——这是官方组件最后一项尚未复刻的能力，现已补齐。此外还加入了官方组件没有的能力：详情内上一条 / 下一条翻页（含键盘 ← → ）、可分享的详情链接、打印此详情，以及子表的搜索与 CSV 导出。
① 商品目录 · 按钮触发 + 弹窗（单条富详情）
这是最经典的主从用法，对应官方沙盒里的「Hotel details」示例。主表只显示图片、商品、类别、现价、评分五列，每行末尾有一个蓝色「查看详情」按钮；点击它会在当前页弹出一个弹窗，展示该商品的大图以及编号、原价、折扣、库存、星级评分、促销状态、商品链接等被主表隐藏的完整字段。试着用弹窗顶部的「上一条 / 下一条」在商品间快速翻阅，或点「复制详情链接」把某件商品的详情页发给别人。
| 图片 | 商品 | 编号 | 类别 | 现价 | 原价 | 折扣 | 库存 | 评分 | 促销 | 商品链接 | 详情 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| 保温杯 B | SKU-0001 | 家居 | 4,507.75 | 4,745.00 | 5.00 | 19 | 4.20 | 1 | https://wordpress.955505.xyz/?p=1 | 详情 | |
| 保温杯 C | SKU-0002 | 办公用品 | 1,087.41 | 1,623.00 | 33.00 | 313 | 4.20 | 1 | https://wordpress.955505.xyz/?p=2 | 详情 | |
| 27寸显示器 D | SKU-0003 | 食品 | 1,198.86 | 1,378.00 | 13.00 | 443 | 4.60 | 1 | https://wordpress.955505.xyz/?p=3 | 详情 | |
| 蓝牙耳机 E | SKU-0004 | 家居 | 2,825.96 | 4,558.00 | 38.00 | 191 | 3.00 | 1 | https://wordpress.955505.xyz/?p=4 | 详情 | |
| 机械键盘 F | SKU-0005 | 家居 | 3,297.32 | 4,849.00 | 32.00 | 403 | 4.30 | 1 | https://wordpress.955505.xyz/?p=5 | 详情 | |
| U盘 G | SKU-0006 | 服饰 | 252.54 | 366.00 | 31.00 | 26 | 3.20 | 1 | https://wordpress.955505.xyz/?p=6 | 详情 | |
| 27寸显示器 H | SKU-0007 | 服饰 | 734.50 | 1,130.00 | 35.00 | 278 | 4.40 | 1 | https://wordpress.955505.xyz/?p=7 | 详情 | |
| 保温杯 I | SKU-0008 | 服饰 | 2,020.00 | 2,020.00 | 0.00 | 258 | 5.00 | 0 | https://wordpress.955505.xyz/?p=8 | 详情 | |
| 蓝牙耳机 J | SKU-0009 | 食品 | 2,179.20 | 2,270.00 | 4.00 | 431 | 4.70 | 1 | https://wordpress.955505.xyz/?p=9 | 详情 | |
| 无线鼠标 K | SKU-0010 | 电子产品 | 1,510.96 | 2,222.00 | 32.00 | 431 | 4.40 | 1 | https://wordpress.955505.xyz/?p=10 | 详情 | |
| 蓝牙耳机 L | SKU-0011 | 食品 | 836.40 | 984.00 | 15.00 | 279 | 4.30 | 1 | https://wordpress.955505.xyz/?p=11 | 详情 | |
| 蓝牙耳机 M | SKU-0012 | 家居 | 2,951.52 | 4,472.00 | 34.00 | 456 | 4.70 | 1 | https://wordpress.955505.xyz/?p=12 | 详情 | |
| 人体工学椅 N | SKU-0013 | 电子产品 | 453.75 | 605.00 | 25.00 | 215 | 3.90 | 1 | https://wordpress.955505.xyz/?p=13 | 详情 | |
| 保温杯 O | SKU-0014 | 食品 | 843.60 | 1,110.00 | 24.00 | 458 | 4.40 | 1 | https://wordpress.955505.xyz/?p=14 | 详情 | |
| U盘 P | SKU-0015 | 办公用品 | 273.00 | 273.00 | 0.00 | 153 | 4.00 | 0 | https://wordpress.955505.xyz/?p=15 | 详情 | |
| U盘 Q | SKU-0016 | 家居 | 2,493.44 | 3,896.00 | 36.00 | 112 | 4.40 | 1 | https://wordpress.955505.xyz/?p=16 | 详情 | |
| 人体工学椅 R | SKU-0017 | 电子产品 | 4,107.18 | 4,191.00 | 2.00 | 327 | 3.20 | 1 | https://wordpress.955505.xyz/?p=17 | 详情 | |
| 保温杯 S | SKU-0018 | 电子产品 | 4,365.97 | 4,501.00 | 3.00 | 485 | 3.30 | 1 | https://wordpress.955505.xyz/?p=18 | 详情 | |
| 保温杯 T | SKU-0019 | 服饰 | 2,121.90 | 3,215.00 | 34.00 | 493 | 4.80 | 1 | https://wordpress.955505.xyz/?p=19 | 详情 | |
| 蓝牙耳机 U | SKU-0020 | 电子产品 | 893.65 | 1,465.00 | 39.00 | 451 | 4.60 | 1 | https://wordpress.955505.xyz/?p=20 | 详情 | |
| LED台灯 V | SKU-0021 | 食品 | 1,169.46 | 1,602.00 | 27.00 | 93 | 3.30 | 1 | https://wordpress.955505.xyz/?p=21 | 详情 | |
| 蓝牙耳机 W | SKU-0022 | 办公用品 | 2,127.00 | 2,836.00 | 25.00 | 295 | 3.40 | 1 | https://wordpress.955505.xyz/?p=22 | 详情 | |
| 移动电源 X | SKU-0023 | 办公用品 | 3,254.40 | 3,390.00 | 4.00 | 305 | 3.30 | 1 | https://wordpress.955505.xyz/?p=23 | 详情 | |
| LED台灯 Y | SKU-0024 | 家居 | 1,726.52 | 2,539.00 | 32.00 | 75 | 4.30 | 1 | https://wordpress.955505.xyz/?p=24 | 详情 | |
| LED台灯 Z | SKU-0025 | 家居 | 1,523.66 | 2,146.00 | 29.00 | 277 | 4.10 | 1 | https://wordpress.955505.xyz/?p=25 | 详情 | |
| 人体工学椅 A | SKU-0026 | 办公用品 | 2,809.62 | 3,267.00 | 14.00 | 308 | 3.10 | 1 | https://wordpress.955505.xyz/?p=26 | 详情 | |
| 无线鼠标 B | SKU-0027 | 家居 | 1,335.70 | 1,805.00 | 26.00 | 344 | 4.30 | 1 | https://wordpress.955505.xyz/?p=27 | 详情 | |
| 移动电源 C | SKU-0028 | 办公用品 | 1,872.04 | 2,753.00 | 32.00 | 259 | 3.80 | 1 | https://wordpress.955505.xyz/?p=28 | 详情 | |
| 保温杯 D | SKU-0029 | 家居 | 3,317.25 | 4,423.00 | 25.00 | 28 | 4.80 | 1 | https://wordpress.955505.xyz/?p=29 | 详情 | |
| 机械键盘 E | SKU-0030 | 家居 | 2,277.00 | 3,036.00 | 25.00 | 226 | 3.90 | 1 | https://wordpress.955505.xyz/?p=30 | 详情 | |
| 商品 | 编号 | 类别 | 库存 | 评分 |
试一试：在上方切换器里把「打开方式」改为点击整行，「详情」按钮列会隐藏、整行变为可点击；把「展示方式」改为独立页面，详情会以整页面板展示、网址带上 ?wdtmd_18=… 参数，可直接分享或刷新还原。
② 地区业绩 · 行点击 + 子表（一对多主从）
这是主从表格最有价值的形态：主表是地区汇总（地区 / 总销售额 / 总销量 / 市场份额，为该地区的全量汇总），点击任意一行即可看到该地区的订单明细子表——即官方组件的 %wpdatatables_md_child_table% 能力。子表列出该地区的代表性订单明细样本（产品 / 类别 / 销售员 / 销量 / 销售额 / 日期 / 状态），并自动汇总本页样本的销量与销售额，还能在子表内搜索、导出 CSV。详情顶部还展示了从样本实时计算的样本订单数与样本平均客单价。说明：主表的「总销量 / 总销售额」是该地区的全量汇总，与子表样本的「本页合计」属于不同口径、数值本就不同（真实业务中汇总表与明细样本也常如此）。
| 地区 | 总销售额 | 总销量 | 市场份额 | 详情 |
|---|---|---|---|---|
| 华东 | 1,812,354.00 | 1,879 | 25.98 | 详情 |
| 华中 | 1,718,689.00 | 1,887 | 24.64 | 详情 |
| 华北 | 1,636,093.00 | 3,459 | 23.46 | 详情 |
| 西南 | 1,066,879.00 | 7,848 | 15.30 | 详情 |
| 华南 | 741,008.00 | 5,259 | 10.62 | 详情 |
| 地区 |
试一试：点击「华东」一行查看其订单明细样本与「本页合计」；用切换器把「打开方式」改为详情按钮即可对比两种触发方式。
实现说明：本能力由 wp-content/mu-plugins/wpdt-master-detail 提供，可在配置中为任意 wpDataTable 启用，并自定义详情字段、子表关联键与各项功能开关——与官方付费组件相同的能力，零授权成本。