tablesaw是一款响应式的表格插件,非常实用、方便。当浏览器窗口尺寸发生变化时,Tablesaw可以自动的变换表格排列方式,同时,它还支持手势滑动操作、可设置列的显示和隐藏,支持迷你地图等。非常适合用在响应式网页中。
表模式
Stack
当窗口宽度小于40em(640px)时,表头与左头切换为两栏布局
<table class="tablesaw tablesaw-stack" data-tablesaw-mode="stack">
如果你只是想使用Stack Table,而不需要使用下面的所有的额外的功能(保存自己的一些字节),Tablesaw提供了一个只有Stack的版本。
Toggle(切换)
纵列切换键允许用户选择哪些列可见。
<table data-tablesaw-mode="columntoggle">
表头必须有data-priority
属性才可以切换。data-priority
属性的数值是从1-6,默认视图会在其中一列显示。首个版本的默认值为:
<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>
多个列可以重用相同的优先级值。
增加迷你地图
<table data-tablesaw-mode="columntoggle" data-tablesaw-minimap>
Swipe(滑动)
允许用户使用滑动手势(或使用左,右按钮)来浏览列。
<table data-tablesaw-mode="swipe">
列遵从data-priority="persist"
属性。
<th data-tablesaw-priority="persist"><!-- Always shows --></th>
增加迷你地图
<table data-tablesaw-mode="swipe" data-tablesaw-minimap>
点此查看滑动示例
高级配置:
增加一个Tablesawconfig
。
Tablesaw.config = { swipe: { horizontalThreshold: 15, verticalThreshold: 20 } };
点此查看示例
Mini Map(迷你地图)
使用数据迷你地图添加一系列的小点来显示那些列是可见的,那些是隐藏的。仅适用于滑动和纵列切换。示例参看上文介绍。
模式转换
<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">
点此查看示例
Sortable(排序)
允许用户通过点击表头进行排序。
<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> ...
使用
data-sortable-switch
添加一个表单元素对选择的排序顺序。点此查看示例
自定义排序功能
// 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; } }; });
整合表格
将上述所有功能组合在一个表里
点此查看示例
开始使用
如果需要在IE8支持TableSaw,那么需要引入 Respond.js
假设我们使用Stack-Only表
<link rel="stylesheet" href="tablesaw.css"> <!--[if lt IE 9]><script src="dependencies/respond.js"></script><!--<![endif]--> <script src="tablesaw.js"></script>
然后:
<table class="tablesaw tablesaw-stack" data-tablesaw-mode="stack">
<table class="tablesaw tablesaw-stack" data-tablesaw-mode="stack">
如果想要其他模式,那么,要增加一个jquery
<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>