Question

我有一个MDL可选表：

<form action="/counselors/{{ $counselor->id }}/badges/add" method="post">
  <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">Name</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="mdl-data-table__cell--non-numeric">{{ $badge->name }}</td>
      </tr>
    </tbody>
  </table>
<!-- submit button, etc -->
</form>

该表有复选框但是在。但是，mdl-data-table--selectable类是添加复选框的内容。如何使用这些复选框作为表单的输入？只需要为表格中的每一行都设置一个复选框。

Answer 1

看起来他们不赞成使用mdl-data-table--selectable类，而是希望自己添加复选框（source）

这意味着您现在应该能够将复选框链接到一个表单，感觉到您是负责制作这些复选框的人。

我已根据this website上提供的示例修改了您在上面提供的代码。

<form action="/counselors/{{ $counselor->id }}/badges/add" method="post">
  <!-- vvv Remove 'mdl-js-data-table' and 'mdl-data-table--selectable' vvv -->
  <table class="mdl-data-table mdl-shadow--2dp">
    <thead>
      <tr>

        <!-- vvv Manual Check Box Header vvv -->
        <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>
        <!-- ^^^ Manual Check Box Header ^^^ -->

        <th class="mdl-data-table__cell--non-numeric">Name</th>
      </tr>
    </thead>
    <tbody>
      <tr>

        <!-- vvv Manual Check Box Row vvv -->
        <td>
          <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-data-table__select" for="row[1]">
            <input type="checkbox" id="row[1]" class="mdl-checkbox__input" />
          </label>
        </td>
        <!-- ^^^ Manual Check Box Row ^^^ -->

        <td class="mdl-data-table__cell--non-numeric">{{ $badge->name }}</td>
      </tr>
    </tbody>
  </table>
<!-- submit button, etc -->
</form>

如何在表单中实现MDL数据可选表

1 个答案: