响应式表格插件-tablesaw-Web前端(W3Cways.com)

tablesaw是一款响应式的表格插件，非常实用、方便。当浏览器窗口尺寸发生变化时，Tablesaw可以自动的变换表格排列方式，同时，它还支持手势滑动操作、可设置列的显示和隐藏，支持迷你地图等。非常适合用在响应式网页中。

表模式

Stack

当窗口宽度小于40em（640px）时，表头与左头切换为两栏布局

[html]<table class="tablesaw tablesaw-stack" data-tablesaw-mode="stack">
[/html]
stack

Stack Table 演示

如果你只是想使用Stack Table，而不需要使用下面的所有的额外的功能（保存自己的一些字节），Tablesaw提供了一个只有Stack的版本。

只有Stack的演示

Toggle(切换)

纵列切换键允许用户选择哪些列可见。

[html]<table data-tablesaw-mode="columntoggle">
[/html]

表头必须有data-priority属性才可以切换。data-priority属性的数值是从1-6，默认视图会在其中一列显示。首个版本的默认值为：

[html]
<th data-tablesaw-priority="persist"><!– Not eligible for toggle, always shows –></th>
<th data-tablesaw-priority="1"><!– Shows at (min-width: 20em) (320px) –></th>
<th data-tablesaw-priority="2"><!– Shows at (min-width: 30em) (480px) –></th>
<th data-tablesaw-priority="3"><!– Shows at (min-width: 40em) (640px) –></th>
<th data-tablesaw-priority="4"><!– Shows at (min-width: 50em) (800px) –></th>
<th data-tablesaw-priority="5"><!– Shows at (min-width: 60em) (960px) –></th>
<th data-tablesaw-priority="6"><!– Shows at (min-width: 70em) (1120px) –></th>
[/html]
多个列可以重用相同的优先级值。

增加迷你地图

[html]<table data-tablesaw-mode="columntoggle" data-tablesaw-minimap>
[/html]

stack

点此查看切换示例

Swipe(滑动)

允许用户使用滑动手势（或使用左，右按钮）来浏览列。

[html]<table data-tablesaw-mode="swipe">
[/html]

列遵从data-priority="persist"属性。

[html]<th data-tablesaw-priority="persist"><!– Always shows –></th>
[/html]

增加迷你地图

[html]<table data-tablesaw-mode="swipe" data-tablesaw-minimap>
[/html]

stack
点此查看滑动示例
高级配置：
增加一个Tablesawconfig。
[js]Tablesaw.config = {
swipe: {
horizontalThreshold: 15,
verticalThreshold: 20
}
};
[/js]
点此查看示例

Mini Map（迷你地图）

使用数据迷你地图添加一系列的小点来显示那些列是可见的，那些是隐藏的。仅适用于滑动和纵列切换。示例参看上文介绍。

模式转换

[html]<table data-tablesaw-mode-switch>

<!– With a different default mode –>
<table data-tablesaw-mode="swipe" data-tablesaw-mode-switch>

<!– Exclude a mode from the switcher –>
<table data-tablesaw-mode-switch data-tablesaw-mode-exclude="columntoggle">
[/html]
stack
点此查看示例

Sortable（排序）

允许用户通过点击表头进行排序。

[html]<table data-tablesaw-sortable>
<thead>
<tr>
<!– Default column –>
<th data-tablesaw-sortable-col data-tablesaw-sortable-default-col>Rank</th>
<th data-tablesaw-sortable-col>Movie Title</th>
<th data-tablesaw-sortable-col data-sortable-numeric>Year</th>
<th data-tablesaw-sortable-col data-sortable-numeric><abbr title="Rotten Tomato Rating">Rating</abbr></th>
<!– Unsortable column –>
<th>Reviews</th>
</tr>
</thead>
…
[/html]
使用data-sortable-switch添加一个表单元素对选择的排序顺序。

点此查看示例
自定义排序功能

[js]// Add a data function to the table header cell
$( "th#custom-sort" ).data( "tablesaw-sort", function( ascending ) {
// return a function
return function( a, b ) {
// use a.cell and b.cell for cell values
var dateA = a.cell.split( "/" ),
dateB = b.cell.split( "/" ),
yearA = parseInt( dateA[ 2 ], 10 ),
yearB = parseInt( dateB[ 2 ], 10 );

if( ascending ) {
return yearA > yearB;
} else { // descending
return yearA < yearB;
}
};
});
[/js]

整合表格

将上述所有功能组合在一个表里
点此查看示例

开始使用

如果需要在IE8支持TableSaw，那么需要引入 Respond.js
假设我们使用Stack-Only表
[html]<link rel="stylesheet" href="tablesaw.css">
<!–[if lt IE 9]><script src="dependencies/respond.js"></script><!–<![endif]–>
<script src="tablesaw.js"></script>
[/html]
然后：

[html]<table class="tablesaw tablesaw-stack" data-tablesaw-mode="stack">
[/html]

如果想要其他模式，那么，要增加一个jquery

[html]<link rel="stylesheet" href="tablesaw.css">

<!–[if lt IE 9]><script src="dependencies/respond.js"></script><!–<![endif]–>
<script src="dependencies/jquery.js"></script>
<script src="tablesaw.js"></script>
[/html]