响应式表格插件-tablesaw

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

苏州实时公交查询

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

表模式

Stack

当窗口宽度小于40em(640px)时,表头与左头切换为两栏布局

<table class="tablesaw tablesaw-stack" data-tablesaw-mode="stack">

stack

Stack Table 演示

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

只有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>

stack

点此查看切换示例

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>

stack
点此查看滑动示例
高级配置:
增加一个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">

stack
点此查看示例

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

// 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>

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

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

支付宝扫一扫打赏

微信扫一扫打赏