MDL Tables Selectable 未按预期工作答案

【问题标题】：MDL Tables Selectable not working as expectedMDL Tables Selectable 未按预期工作
【发布时间】：2018-07-08 14:30:57
【问题描述】：

我正在使用 Material Design Lite 并尝试使用以下代码实现基本数据表：

<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>

表格生成正常，但上面的代码没有生成我需要的复选框。根据文档 mdl-data-table--selectable 应该生成复选框，但它们没有显示出来。我做了一些挖掘，在 github 上找到了这篇文章：https://github.com/google/material-design-lite/wiki/Deprecations。

虽然这有点令人失望，但我复制了他们的示例只是为了查看它是否正确生成了复选框。我的确切代码如下：

<html>
  <head>
    <!-- Material Design Lite -->
    <script src="https://storage.googleapis.com/code.getmdl.io/1.0.5/material.min.js"></script>
    <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.5/material.indigo-pink.min.css">
    <!-- Material Design icon font -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  </head>
  <body>


    <table class="mdl-data-table mdl-shadow--2dp">
  <thead>
    <tr>
      <th>
          <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-data-table__select" for="table-header">
            <input type="checkbox" id="table-header" class="mdl-checkbox__input" />
          </label>
      </th>
      <th class="mdl-data-table__cell--non-numeric">Material</th>
      <th>Quantity</th>
      <th>Unit price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
       <td>
          <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-data-table__select" for="row[1]">
            <md-checkbox type="checkbox" id="row[1]" class="mdl-checkbox__input" />
          </label>
      </td>
      <td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
      <td>25</td>
      <td>$2.90</td>
    </tr>
    <tr>
       <td>
          <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-data-table__select" for="row[2]">
            <input type="checkbox" id="row[2]" class="mdl-checkbox__input" />
          </label>
      </td>
      <td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
      <td>50</td>
      <td>$1.25</td>
    </tr>
    <tr>
      <td>
          <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-data-table__select" for="row[3]">
            <input type="checkbox" id="row[3]" class="mdl-checkbox__input" />
          </label>
      </td>
      <td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
      <td>10</td>
      <td>$2.35</td>
    </tr>
  </tbody>
</table>  
  </body>
</html>

我已经包含了 JS 和 CSS 文件的所有必要链接，但返回的内容如下所示：

为了保持一致性，我确实需要复选框来获得 Material Design 的外观/感觉，但这看起来像 Bootstrap。有什么想法吗？

【问题讨论】：

标签： twitter-bootstrap checkbox datatables material-design material-design-lite

【解决方案1】：

<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
  <input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" checked>
  <span class="mdl-checkbox__label">Checkbox</span>
</label>

试试这样的？部分参考资料：https://getmdl.io/components/index.html#toggles-section/checkbox

或者可能与您的 MDL 版本过时有关？当前版本是 1.3.0

【讨论】：