使用 Material Design Lite 构建动态表格-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，表格是非常常见的界面元素之一。如何构建一个美观、易用、动态的表格呢？Material Design Lite 是一个基于 Material Design 风格的库，提供了丰富的组件和样式，可以帮助我们构建漂亮的界面。

在本文中，我们将详细介绍如何使用 Material Design Lite 构建动态表格，包括基本的表格结构、交互、样式等方面。

基本结构

首先，让我们来看一下基本的表格结构。使用 Material Design Lite，我们可以通过一个简单的 HTML 结构来创建一个基本的表格：

// javascriptcn.com 代码示例
<table class="mdl-data-table">
  <thead>
    <tr>
      <th class="mdl-data-table__cell--non-numeric">Name</th>
      <th>Age</th>
      <th>Gender</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">Alice</td>
      <td>25</td>
      <td>Female</td>
    </tr>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">Bob</td>
      <td>30</td>
      <td>Male</td>
    </tr>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">Charlie</td>
      <td>20</td>
      <td>Male</td>
    </tr>
  </tbody>
</table>

如上所示，我们使用了 mdl-data-table 类来创建一个表格。thead 元素用于定义表格的列名，th 元素定义列的名称；tbody 元素用于定义表格的内容，tr 元素定义表格的行，td 元素定义单元格的内容。

需要注意的是，使用 Material Design Lite 的表格，需要将列名的第一个单元格定义为 mdl-data-table__cell--non-numeric 类，以避免默认的数学排序（如果列名被认为是数值的话，例如年龄）。

交互

在 Material Design Lite 中，表格可以很容易地添加交互功能，例如排序、筛选等。我们使用 JavaScript 来实现这些交互功能。

排序

Material Design Lite 为表格提供了排序功能，我们可以使用 getmdl-select 插件来实现。以下是使用该插件来实现排序的示例代码：

// javascriptcn.com 代码示例
<div class="mdl-textfield mdl-js-textfield getmdl-select">
  <input type="text" value="Sort by" class="mdl-textfield__input" readonly>
  <input type="hidden" value="" name="sortBy">
  <ul for="sortBy" class="mdl-menu mdl-menu--bottom-left mdl-js-menu">
    <li class="mdl-menu__item" data-sort-by="name">Name</li>
    <li class="mdl-menu__item" data-sort-by="age">Age</li>
    <li class="mdl-menu__item" data-sort-by="gender">Gender</li>
  </ul>
</div>

如上所示，我们使用 getmdl-select 类来创建一个下拉菜单，用于选择排序方式。点击菜单项后，使用 JavaScript 来动态更改表格的排序。

以下是使用 jQuery 实现的示例代码：

// javascriptcn.com 代码示例
$('.getmdl-select').each(function(){
  $(this).find('li').on('click', function(){
    var $wrapper = $(this).closest('.mdl-data-table');
    var sortBy = $(this).data('sort-by');
    var order = $(this).data('order') || 'asc';
    var rows = $wrapper.find('tbody>tr').toArray().sort(compare(sortBy, order));
    if (order === 'asc') {
      $(this).data('order', 'desc');
    } else {
      $(this).data('order', 'asc');
      rows = rows.reverse();
    }
    $wrapper.find('tbody').html(rows);
  });
});

function compare(prop, order) {
  return function(a, b) {
    var aVal = $(a).find('td[data-sort-val="'+prop+'"]').data('sort-value'),
        bVal = $(b).find('td[data-sort-val="'+prop+'"]').data('sort-value');
    return order === 'asc' ? aVal - bVal : bVal - aVal;
  }
}

其中，compare 函数用于排序，$(this).data('sort-by')、$(this).data('order') 分别用于获取排序的方式和顺序，$(a).find('td[data-sort-val="'+prop+'"]').data('sort-value') 用于获取具体的排序值。

筛选

除了排序，我们还可以为表格添加筛选功能。以下是使用 getmdl-select 插件来实现筛选的示例代码：

// javascriptcn.com 代码示例
<div class="mdl-textfield mdl-js-textfield getmdl-select">
  <input type="text" value="Filter by" class="mdl-textfield__input" readonly>
  <input type="hidden" value="" name="filterBy">
  <ul for="filterBy" class="mdl-menu mdl-menu--bottom-left mdl-js-menu">
    <li class="mdl-menu__item" data-filter-by="name" data-filter-value="Alice">Alice</li>
    <li class="mdl-menu__item" data-filter-by="name" data-filter-value="Bob">Bob</li>
    <li class="mdl-menu__item" data-filter-by="name" data-filter-value="Charlie">Charlie</li>
    <li class="mdl-menu__item" data-filter-by="age" data-filter-value="20">Age 20s</li>
    <li class="mdl-menu__item" data-filter-by="age" data-filter-value="30">Age 30s</li>
    <li class="mdl-menu__item" data-filter-by="gender" data-filter-value="Male">Male</li>
    <li class="mdl-menu__item" data-filter-by="gender" data-filter-value="Female">Female</li>
  </ul>
</div>

如上所示，我们使用 getmdl-select 类来创建一个下拉菜单，用于选择筛选方式和筛选值。点击菜单项后，使用 JavaScript 来动态更改表格的显示结果。

以下是使用 jQuery 实现的示例代码：

// javascriptcn.com 代码示例
$('.getmdl-select').each(function(){
  $(this).find('li').on('click', function(){
    var filterBy = $(this).data('filter-by');
    var filterValue = $(this).data('filter-value');
    var $rows = $(this).closest('.mdl-data-table').find('tbody>tr');
    if (filterBy && filterValue) {
      $rows = $rows.filter(function(){
        return $(this).find('td[data-filter-val="'+filterBy+'"]').text() === filterValue;
      });
    }
    $(this).closest('.mdl-data-table').find('tbody>tr').hide().removeAttr('data-filtered');
    $rows.show().attr('data-filtered', true);
  });
});

其中，$(this).data('filter-by')、$(this).data('filter-value') 分别用于获取筛选的方式和值，$(this).closest('.mdl-data-table').find('tbody>tr') 用于获取所有的行，$(this).closest('.mdl-data-table').find('tbody>tr').hide().removeAttr('data-filtered') 用于隐藏所有的行，$rows.show().attr('data-filtered', true) 用于显示符合筛选条件的行，并添加 data-filtered 属性以便后续操作。

样式

除了基本的表格结构和交互，我们还可以通过 Material Design Lite 的样式来美化表格。例如，我们可以为表格添加斑马条纹样式、悬停效果、选中效果等。

以下是一些基本的样式示例代码：

// javascriptcn.com 代码示例
.mdl-data-table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
}

.mdl-data-table th,
.mdl-data-table td {
  padding: 12px 8px;
  text-align: left;
  vertical-align: middle;
}

.mdl-data-table th {
  font-weight: bold;
  color: rgba(0, 0, 0, 0.54);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.mdl-data-table td {
  color: rgba(0, 0, 0, 0.87);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.mdl-data-table tbody tr:nth-child(odd) td {
  background-color: rgba(0, 0, 0, 0.04);
}

.mdl-data-table tbody tr:hover td {
  background-color: rgba(0, 0, 0, 0.08);
}

.mdl-data-table tbody tr[data-filtered] td {
  background-color: rgba(0, 0, 0, 0.12);
}

.mdl-data-table tbody tr.is-selected td {
  background-color: rgba(0, 0, 0, 0.16);
}

如上所示，我们定义了基本的表格样式，包括表格的宽度、单元格的内边距、颜色、边框等。同时，我们为表格添加了斑马条纹、悬停效果、选中效果等。

总结

通过使用 Material Design Lite，我们可以很容易地构建出美观、易用、动态的表格。在本文中，我们介绍了如何构建基本的表格结构、添加交互功能、美化表

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653f8d017d4982a6eb91cf3f