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 LiteMDL仓库中的>table thead /thead tbody /tbody /table第 2 步添加 MDL 类声明组件通过class属性添加一个或多个 MDL 类空格分隔table classmdl-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 classmdl-data-table mdl-js-data-table thead tr th classmdl-data-table__cell--non-numericName/th thAge/th thID Number/th /tr /thead tbody /tbody /table在tbody中为每一行数据编写一个tr为行中每一列编写一个td。与表头同理纯文本数据单元格需要添加 non-numeric 类保证对齐table classmdl-data-table mdl-js-data-table thead tr th classmdl-data-table__cell--non-numericName/th thAge/th thID Number/th /tr /thead tbody tr td classmdl-data-table__cell--non-numericDon Aubrey/td td25/td td49021/td /tr tr td classmdl-data-table__cell--non-numericSophia Carson/td td32/td td10258/td /tr tr td classmdl-data-table__cell--non-numericSteve Moreno/td td29/td td12359/td /tr /tbody /table完成以上三步后data-table 组件即可直接使用。配置选项全览MDL CSS 类为数据表格应用各类预设的视觉与行为增强下表列出全部可用类及其作用与 README.md 的配置表一致MDL class作用备注mdl-data-table将表格定义为 MDL 组件必须加在 table 元素上mdl-js-data-table为表格分配基础 MDL 行为必须加在 table 元素上mdl-data-table--selectable应用全选/单选行为复选框可选加在 table 元素上mdl-data-table__header--sorted-ascending应用视觉样式指示列按升序排序可选加在表头th上mdl-data-table__header--sorted-descending应用视觉样式指示列按降序排序可选加在表头th上mdl-data-table__cell--non-numeric对数据单元格应用文本格式左对齐可选表头与数据单元格均可加不加任何类对表头或数据单元格应用数值格式右对齐默认默认行为实战示例示例一带主选择框与行选择框的表格在表格上追加mdl-data-table--selectable类即可启用选择交互MDL 会自动在表头首列插入“主”复选框全选/取消全选并在每一行首列插入独立复选框table classmdl-data-table mdl-js-data-table mdl-data-table--selectable thead tr th classmdl-data-table__cell--non-numericMaterial/th thQuantity/th thUnit price/th /tr /thead tbody tr td classmdl-data-table__cell--non-numericAcrylic (Transparent)/td td250/td td$2.90/td /tr tr td classmdl-data-table__cell--non-numericPlywood (Birch)/td td50/td td$1.25/td /tr tr td classmdl-data-table__cell--non-numericLaminate (Gold on Blue)/td td10/td td$12.35/td /tr /tbody /table仓库中的官方代码片段 src/data-table/snippets/data-table.html 在此基础上还叠加了mdl-shadow--2dp2dp 层级阴影让表格呈现“卡片悬浮”质感可直接组合使用。示例二无选择框、以文本为主的表格不加 selectable 类即得到纯展示型表格。此例包含大量文本数据因此文本列全部标注 non-numeric数值列Age保持默认右对齐table classmdl-data-table mdl-js-data-table thead tr th classmdl-data-table__cell--non-numericName/th th classmdl-data-table__cell--non-numericNickname/th thAge/th th classmdl-data-table__cell--non-numericLiving?/th /tr /thead tbody tr td classmdl-data-table__cell--non-numericJohn Lennon/td td classmdl-data-table__cell--non-numericThe smart one/td td40/td td classmdl-data-table__cell--non-numericNo/td /tr tr td classmdl-data-table__cell--non-numericPaul McCartney/td td classmdl-data-table__cell--non-numericThe cute one/td td73/td td classmdl-data-table__cell--non-numericYes/td /tr tr td classmdl-data-table__cell--non-numericGeorge Harrison/td td classmdl-data-table__cell--non-numericThe shy one/td td58/td td classmdl-data-table__cell--non-numericNo/td /tr tr td classmdl-data-table__cell--non-numericRingo Starr/td td classmdl-data-table__cell--non-numericThe funny one/td td74/td td classmdl-data-table__cell--non-numericYes/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-dividers1px 实线、颜色 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 在组件升级时动态注入。关键流程如下组件注册文件末尾调用componentHandler.register(...)以mdl-js-data-table为 CSS 入口、MaterialDataTable为构造器完成注册第 174-178 行。页面加载时组件处理器自动扫描带mdl-js-data-table的表格并升级选择列注入init()中检测表格是否含mdl-data-table--selectable类。若包含则在第一个th前插入一个承载“主复选框”的th并在每个tbody含tfoot行的第一个td前插入行复选框第 143-169 行复选框复用 Checkbox 组件createCheckbox_()动态创建label.mdl-checkbox.mdl-js-checkbox.mdl-js-ripple-effect包裹原生input typecheckbox随后调用componentHandler.upgradeElement(label, MaterialCheckbox)将其升级为标准的 MDL 复选框组件第 115-138 行因此行复选框天然具备水波纹与勾选动画全选与联动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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考