响应式表格jQuery插件Responsive Tables

发布时间:2020年6月14日 查看次数:92

移动互联网时代传统pc网站已经无法满足时代的变化,于是“多屏时代,网站需要跨屏”成为共识,针对于相对简单的企业网站来说,跨屏响应式是最合适的一种方案,而做网站前端开发的都知道,响应式中表格的响应式是最为麻烦的一类,因为其结构的特殊性,所以一时没有更好的解决方法,下面推荐的这块响应式表格jQuery插件Responsive Tables 将帮助到你。

这个Responsive tables jQuery插件依赖于Bootstrap 3使用,比BS自带的自适应多了一些好用的功能,比如筛选显示,Focus选定、Table头滑动固定等,以及高级的参数和配置。

1.Responsive Tables介绍

Demo地址:http://gergeo.se/RWD-Table-Patterns/#demo

注:这个jQuery插件要在Bootstrap 3前端框架上使用。

1.自定义显示表格列,在表格右上角可以看到,点Display all则显示全部。

另外我最喜欢的就是这个data-priority=””属性,它可以定义数据在特定分辨率显示或者隐藏掉,类似Bootstrap的class=”col-md/col-lg”栅格技巧,具体请看使用教程。

2.Table头部Fixed定位,当你向下滑动时,Table头部会自动固定在顶部。有点像scroll to fixed的jQuery功能。

3.Focus选中状态,点击Focus按钮开启,然后你试试点击某行表格数据,你会看到你选中的一行表格会高亮显示,而其它数据则变灰了。

2.Responsive Tables使用教程

Step1: CSS样式表

在HTML头部引入这个插件的样式表

<head>
...
<link rel="stylesheet" href="css/rwd-table.min.css">
</head>

Step2: js

把JS添加到<head>前或<body>…</body>里面

<body>
...
<script type="text/javascript" src="js/rwd-table.js"></script>
<script>
$(function() {
$('.table-complex').responsiveTable({
adddisplayallbtn: true,
addfocusbtn: true,
fixednavbar: '#navbar'//In case you have a fixed navbar.
})
});
</script>
</body>

Step3: IE兼容

<!--[if lt IE 7 ]> <html lang="en" class="no-js lt-ie10 lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js lt-ie10 lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js lt-ie10 lt-ie9"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js lt-ie10"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->

Step4: HTML

Bootstrap的响应式表格要在table外面添加一个<div class=”table-responsive”>。

<div class="table-responsive">
<table id="example-table" class="table table-complex table-bordered table-striped">
...
</table>
</div>

Step5: 配置Table

通过data-priority属性可以定义表格列在不同屏分辨显示与隐藏,这个属性请设置在<th data-priority=””>上。

data-priority=”” 总是可见的,不会出现在右上角的筛选下拉列表。
data-priority=”1″ 保持可见,但可以在下拉列表筛选隐藏。
data-priority=”2″ 480px 分辨率以下可见
data-priority=”3″ 640px 以下可见
data-priority=”4″ 800px 以下可见
data-priority=”5″ 960px 以下可见
data-priority=”6″ 1120px 以下可见

插件下载地址:Github | 在线DEMO

转载此文章须经作者同意,并附上出处及文章链接。 http://kuaping.com/jquery-responsive-tables/

跨屏Sass平台网站一键适配手机方案

只需要在原网站上加一行JS代码即可快速适配手机,3分钟即可部署上线

电话:027-81777732

邮箱:fuwu@kuaping.com

地址:武汉光谷SBI创业街特1栋单元1903

网址:www.kuaping.com