表格

調(diào)用方式

表格在頁面加載完后會自動初始化。對于動態(tài)生成的表格，需要調(diào)用 mdui.updateTables() 進行初始化。

相關資料

Material Design 數(shù)據(jù)表格設計規(guī)范

樣式

基礎表格

為 table 標簽添加類 .mdui-table 即可為表格賦予基本的樣式。

在線運行

響應式

如果表格寬度過大，可能會導致頁面出現(xiàn)橫向滾動條。將 .mdui-table 元素包裹在 .mdui-table-fluid 元素內(nèi)，即可在表格寬度超出頁面寬度時，使表格支持水平滾動。

<div class="mdui-table-fluid">
  <table class="mdui-table">
    ...
  </table>
</div>

鼠標懸浮

在 .mdui-table 元素上添加 .mdui-table-hoverable 類可以讓 tbody 中的每一行對鼠標懸浮狀態(tài)作出響應。

在線運行

列對齊方式

按照 Material Design 的規(guī)范，應該把表格中的文本列左對齊，數(shù)值列右對齊。

MDUI 中表格列默認使用左對齊，在數(shù)值列的 <th> 標簽上添加類 .mdui-table-col-numeric 即可使該列向右對齊。

在線運行

列選擇

在 .mdui-table 元素上添加類 .mdui-table-selectable 即可在每一行的前面添加一個復選框。

選中復選框后，會在該行的 <tr> 元素上添加類 .mdui-table-row-selected。

也可以預先在 <tr> 元素上添加類 .mdui-table-row-selected，使該行處于默認選中狀態(tài)。

在線運行

動態(tài)生成的表格

如果你的表格是動態(tài)生成的，或者動態(tài)修改了表格屬性，則需要調(diào)用 mdui.updateTables() 方法來重新初始化表格。

該方法可以接受一個含 <table class="mdui-table"> 元素的 CSS 選擇器、或者 DOM 元素、或者 DOM 元素組成的數(shù)組作為參數(shù)，表示只重新初始化指定的表格。如果沒有傳入?yún)?shù)，則將重新初始化頁面中所有的表格。

CSS 類名列表