Material Design Lite组件之切换表格

1.介绍

Material Design Lite（MDL）数据表组件是标准HTML <table>的增强版。数据表由行格式良好的数据和列组成，具有适当的用户交互功能。

数据表中可用的行/列/单元格类型大多是自我格式化的;也就是说，一旦定义了数据表，单个单元就不需要特别关注。例如，行在鼠标悬停和选择上显示着色行为，默认情况下数字值会自动格式化，并且添加单个类可以单独或共同选择表格行。这使得数据表组件对于开发人员来说既方便又容易编码，并且对用户有吸引力和直观性。

2.配置选项

类名	效果	其他
mdl-data-table	定义table标签为MDL组件	table标签必需
mdl-js-data-table	为table标签添加默认行为效果	table标签必需
mdl-data-table--selectable	为单选框添加选中/全选的行为	可选
mdl-data-table__header--sorted-ascending	升序展示样式	在th标签中可选
mdl-data-table__header--sorted-descending	降序展示样式	在th标签中可选
mdl-data-table__cell--non-numeric	将文本应用到数据单元格	可选
(none)	将数字格式应用于标题或数据单元（默认）

3.应用举例

<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
  <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>25</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>$2.35</td>
    </tr>
  </tbody>
</table>