在前端开发中，表格是非常常见的界面元素之一。如何构建一个美观、易用、动态的表格呢？Material Design Lite 是一个基于 Material Design 风格的库，提供了丰富的组件和样式，可以帮助我们构建漂亮的界面。
在本文中，我们将详细介绍如何使用 Material Design Lite 构建动态表格，包括基本的表格结构、交互、样式等方面。
基本结构
首先，让我们来看一下基本的表格结构。使用 Material Design Lite，我们可以通过一个简单的 HTML 结构来创建一个基本的表格：
-- -------------------- ---- -------
------ -----------------------
-------
----
--- ---------------------------------------------------
------------
---------------
-----
--------
-------
----
--- ----------------------------------------------------
-----------
---------------
-----
----
--- --------------------------------------------------
-----------
-------------
-----
----
--- ------------------------------------------------------
-----------
-------------
-----
--------
--------如上所示，我们使用了 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 插件来实现。以下是使用该插件来实现排序的示例代码：
-- -------------------- ---- -------
---- -------------------- ---------------- ---------------
------ ----------- ----------- --- ---------------------------- ---------
------ ------------- -------- --------------
--- ------------ --------------- --------------------- -------------
--- ---------------------- -----------------------------
--- ---------------------- ---------------------------
--- ---------------------- ---------------------------------
-----
------如上所示，我们使用 getmdl-select 类来创建一个下拉菜单，用于选择排序方式。点击菜单项后，使用 JavaScript 来动态更改表格的排序。
以下是使用 jQuery 实现的示例代码：
-- -------------------- ---- -------
------------------------------------
------------------------------ -----------
--- -------- - -----------------------------------
--- ------ - ------------------------
--- ----- - --------------------- -- ------
--- ---- - -------------------------------------------------------- --------
-- ------ --- ------ -
--------------------- --------
- ---- -
--------------------- -------
---- - ---------------
-
----------------------------------
---
---
-------- ------------- ------ -
------ ----------- -- -
--- ---- - -------------------------------------------------------------
---- - -------------------------------------------------------------
------ ----- --- ----- - ---- - ---- - ---- - -----
-
-其中，compare 函数用于排序，$(this).data('sort-by')、$(this).data('order') 分别用于获取排序的方式和顺序，$(a).find('td[data-sort-val="'+prop+'"]').data('sort-value') 用于获取具体的排序值。
筛选
除了排序，我们还可以为表格添加筛选功能。以下是使用 getmdl-select 插件来实现筛选的示例代码：
-- -------------------- ---- -------
---- -------------------- ---------------- ---------------
------ ----------- ------------- --- ---------------------------- ---------
------ ------------- -------- ----------------
--- -------------- --------------- --------------------- -------------
--- ---------------------- --------------------- ------------------------------------
--- ---------------------- --------------------- --------------------------------
--- ---------------------- --------------------- ----------------------------------------
--- ---------------------- -------------------- -------------------------- --------
--- ---------------------- -------------------- -------------------------- --------
--- ---------------------- ----------------------- ----------------------------------
--- ---------------------- ----------------------- --------------------------------------
-----
------如上所示，我们使用 getmdl-select 类来创建一个下拉菜单，用于选择筛选方式和筛选值。点击菜单项后，使用 JavaScript 来动态更改表格的显示结果。
以下是使用 jQuery 实现的示例代码：
-- -------------------- ---- -------
------------------------------------
------------------------------ -----------
--- -------- - --------------------------
--- ----------- - -----------------------------
--- ----- - ----------------------------------------------------
-- --------- -- ------------ -
----- - ------------------------
------ --------------------------------------------------------- --- ------------
---
-
---------------------------------------------------------------------------------------
---------------------------------- ------
---
---其中，$(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 的样式来美化表格。例如，我们可以为表格添加斑马条纹样式、悬停效果、选中效果等。
以下是一些基本的样式示例代码：
-- -------------------- ---- ------- --------------- - ------ ----- ---------------- --------- ------- ---- -- - --------------- --- --------------- -- - -------- ---- ---- ----------- ----- --------------- ------- - --------------- -- - ------------ ----- ------ ------- -- -- ------ -------------- --- ----- ------- -- -- ------ - --------------- -- - ------ ------- -- -- ------ -------------- --- ----- ------- -- -- ------ - --------------- ----- ----------------- -- - ----------------- ------- -- -- ------ - --------------- ----- -------- -- - ----------------- ------- -- -- ------ - --------------- ----- ----------------- -- - ----------------- ------- -- -- ------ - --------------- ----- -------------- -- - ----------------- ------- -- -- ------ -
如上所示，我们定义了基本的表格样式，包括表格的宽度、单元格的内边距、颜色、边框等。同时，我们为表格添加了斑马条纹、悬停效果、选中效果等。
总结
通过使用 Material Design Lite，我们可以很容易地构建出美观、易用、动态的表格。在本文中，我们介绍了如何构建基本的表格结构、添加交互功能、美化表
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/653f8d017d4982a6eb91cf3f