响应式表格插件-tablesaw

2015-04-28阅读(11096)评论(0)牵着狗狗看MM

苏州实时公交查询

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添加一个表单元素对选择的排序顺序。
sortable
点此查看示例
自定义排序功能

[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]

[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]

赞(1) 打赏
转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » 响应式表格插件-tablesaw
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏