Material Design Lite 数据表格组件（mdl-data-table）实战指南：基础标记、选择交互与源码解析

Material Design Lite 数据表格组件（mdl-data-table）实战指南：基础标记、选择交互与源码解析

【免费下载链接】material-design-liteMaterial Design Components in HTML/CSS/JS项目地址: https://gitcode.com/gh_mirrors/ma/material-design-lite

本篇指南围绕 Material Design Lite（MDL）仓库中的><table> <thead> </thead> <tbody> </tbody> </table>

第 2 步：添加 MDL 类声明组件

通过class属性添加一个或多个 MDL 类（空格分隔）：

<table class="mdl-data-table mdl-js-data-table"> <thead> </thead> <tbody> </tbody> </table>

这里两个类各有分工：mdl-data-table定义表格为 MDL 组件（视觉样式），mdl-js-data-table为表格分配基础 JS 行为（组件升级），二者都必须存在。

第 3 步：填充表头与数据行

在<thead>内编写恰好一行<tr>，为每一列包含一个表头单元格<th>，并写入列名文本。注意：为了保持表头对齐，纯文本列的表头需要添加 "non-numeric" 类（数据单元格默认按数值格式化）：

<table class="mdl-data-table mdl-js-data-table"> <thead> <tr> <th class="mdl-data-table__cell--non-numeric">Name</th> <th>Age</th> <th>ID Number</th> </tr> </thead> <tbody> </tbody> </table>

在<tbody>中，为每一行数据编写一个<tr>，为行中每一列编写一个<td>。与表头同理，纯文本数据单元格需要添加 non-numeric 类保证对齐：

<table class="mdl-data-table mdl-js-data-table"> <thead> <tr> <th class="mdl-data-table__cell--non-numeric">Name</th> <th>Age</th> <th>ID Number</th> </tr> </thead> <tbody> <tr> <td class="mdl-data-table__cell--non-numeric">Don Aubrey</td> <td>25</td> <td>49021</td> </tr> <tr> <td class="mdl-data-table__cell--non-numeric">Sophia Carson</td> <td>32</td> <td>10258</td> </tr> <tr> <td class="mdl-data-table__cell--non-numeric">Steve Moreno</td> <td>29</td> <td>12359</td> </tr> </tbody> </table>

完成以上三步后，data-table 组件即可直接使用。

配置选项全览

MDL CSS 类为数据表格应用各类预设的视觉与行为增强，下表列出全部可用类及其作用（与 README.md 的配置表一致）：

实战示例

示例一：带主选择框与行选择框的表格

在表格上追加mdl-data-table--selectable类即可启用选择交互，MDL 会自动在表头首列插入“主”复选框（全选/取消全选），并在每一行首列插入独立复选框：

<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable"> <thead> <tr> <th class="mdl-data-table__cell--non-numeric">Material</th> <th>Quantity</th> <th>Unit price</th> </tr> </thead> <tbody> <tr> <td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td> <td>250</td> <td>$2.90</td> </tr> <tr> <td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td> <td>50</td> <td>$1.25</td> </tr> <tr> <td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td> <td>10</td> <td>$12.35</td> </tr> </tbody> </table>

仓库中的官方代码片段 src/data-table/snippets/data-table.html 在此基础上还叠加了mdl-shadow--2dp（2dp 层级阴影），让表格呈现“卡片悬浮”质感，可直接组合使用。

示例二：无选择框、以文本为主的表格

不加 selectable 类即得到纯展示型表格。此例包含大量文本数据，因此文本列全部标注 non-numeric，数值列（Age）保持默认右对齐：

<table class="mdl-data-table mdl-js-data-table"> <thead> <tr> <th class="mdl-data-table__cell--non-numeric">Name</th> <th class="mdl-data-table__cell--non-numeric">Nickname</th> <th>Age</th> <th class="mdl-data-table__cell--non-numeric">Living?</th> </tr> </thead> <tbody> <tr> <td class="mdl-data-table__cell--non-numeric">John Lennon</td> <td class="mdl-data-table__cell--non-numeric">The smart one</td> <td>40</td> <td class="mdl-data-table__cell--non-numeric">No</td> </tr> <tr> <td class="mdl-data-table__cell--non-numeric">Paul McCartney</td> <td class="mdl-data-table__cell--non-numeric">The cute one</td> <td>73</td> <td class="mdl-data-table__cell--non-numeric">Yes</td> </tr> <tr> <td class="mdl-data-table__cell--non-numeric">George Harrison</td> <td class="mdl-data-table__cell--non-numeric">The shy one</td> <td>58</td> <td class="mdl-data-table__cell--non-numeric">No</td> </tr> <tr> <td class="mdl-data-table__cell--non-numeric">Ringo Starr</td> <td class="mdl-data-table__cell--non-numeric">The funny one</td> <td>74</td> <td class="mdl-data-table__cell--non-numeric">Yes</td> </tr> </tbody> </table>

样式原理：默认右对齐、悬停与选中态

查看样式源码 src/data-table/_data-table.scss 可以印证文档描述并发现更多细节：

• 默认数值对齐：td, th统一text-align: right（第 55 行）；而.mdl-data-table__cell--non-numeric通过双重类名提升优先级覆盖为text-align: left（第 118-120 行），这就是“数值默认右对齐、文本需手动左对齐”的底层实现；
• 悬停与选中反馈：tbody tr:hover使用$data-table-hover-color（#eeeeee），.is-selected使用$data-table-selection-color（#e0e0e0），并叠加material-animation-default(0.28s)的background-color过渡动画（第 36-50 行）；
• 边框与留白：表格整体使用$data-table-dividers（1px 实线、颜色 rgba(#000,0.12)）描边，单元格列间距为$data-table-column-spacing / 2，首列/末列分别留 24px 内边距；
• 排序指示箭头：.mdl-data-table__header--sorted-ascending通过:before伪元素输出 Material 图标码点\e5d8（箭头向上），--sorted-descending输出\e5db（箭头向下），排序表头文字色加深至 rgba(#000,0.87)，悬停时箭头颜色变浅（第 91-110 行）。也就是说，排序类只负责呈现视觉状态，排序逻辑需自行实现，仅需在点击表头后切换对应类即可。

这些视觉参数全部集中定义在变量文件 src/_variables.scss 中，包括：正文字号 13px、表头字号 12px、排序图标 16px、行高 48px、表头高度 56px 等。如需主题化，修改这些!default变量即可在编译 SCSS 时全局生效。

JavaScript 行为：选择交互的实现原理

选择交互并非纯 CSS 实现，而是由 src/data-table/data-table.js 在组件升级时动态注入。关键流程如下：

1. 组件注册：文件末尾调用componentHandler.register(...)，以mdl-js-data-table为 CSS 入口、MaterialDataTable为构造器完成注册（第 174-178 行）。页面加载时组件处理器自动扫描带mdl-js-data-table的表格并升级；
2. 选择列注入：init()中检测表格是否含mdl-data-table--selectable类。若包含，则在第一个<th>前插入一个承载“主复选框”的<th>，并在每个<tbody>（含<tfoot>）行的第一个<td>前插入行复选框（第 143-169 行）；
3. 复选框复用 Checkbox 组件：createCheckbox_()动态创建label.mdl-checkbox.mdl-js-checkbox.mdl-js-ripple-effect包裹原生<input type="checkbox">，随后调用componentHandler.upgradeElement(label, 'MaterialCheckbox')将其升级为标准的 MDL 复选框组件（第 115-138 行），因此行复选框天然具备水波纹与勾选动画；
4. 全选与联动：selectRow_()绑定 change 事件——勾选主复选框会遍历所有行，调用行内MaterialCheckbox的check()/uncheck()并同步is-selected类；取消某一行勾选时，若主复选框处于选中态会自动取消（第 72-105 行）。

所以对开发者而言，mdl-data-table--selectable类把“插复选框、联动画、联动全选”三件事全部托管，无需手写任何交互代码。

测试验证与引入方式

仓库在 test/unit/data-table.js 中为组件提供了单元测试，可验证实现契约：

• MaterialDataTable构造器全局可用；
• 通过componentHandler.upgradeElement(el, 'MaterialDataTable')可成功升级，且元素会获得data-upgraded标记；
• 预置is-selected类的行，在升级后其行内复选框 label 自动带上is-checked类——印证了createCheckbox_中“读取已有is-selected类并初始化勾选态”的逻辑（checkbox.checked = row.classList.contains('is-selected')）。

引入组件时，只需确保样式与脚本被加载：样式在 src/material-design-lite.scss 中通过@import "data-table/data-table";随主样式表一起编译，脚本则随data-table.js打包（需一并包含componentHandler与 Checkbox 组件依赖，如 src/mdlComponentHandler.js 与 src/checkbox/checkbox.js）。

小结

MDL contenteditable="false">【免费下载链接】material-design-liteMaterial Design Components in HTML/CSS/JS项目地址: https://gitcode.com/gh_mirrors/ma/material-design-lite