博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
[转]响应式表格jQuery插件 – Responsive tables
阅读量:6161 次
发布时间:2019-06-21

本文共 1596 字,大约阅读时间需要 5 分钟。

本文转自:

这个Responsive tables jQuery插件依赖于Bootstrap 3使用,比BS自带的自适应多了一些好用的功能,比如筛选显示,Focus选定、Table头滑动固定等,下来看看介绍。

响应式表格jQuery插件 - Responsive tables

<img alt="响应式表格jQuery插件 - Responsive tables" src="http://images.shejidaren.com/wp-content/uploads/2014/04/075953Oq4.png" width="500" />

文章目录:

1.Responsive tables介绍

Demo地址:

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

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

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

响应式表格jQuery插件

<img alt="响应式表格jQuery插件" src="http://images.shejidaren.com/wp-content/uploads/2014/04/0759533m9.png" width="501" />

 

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

<img alt="jQuery插件" src="http://images.shejidaren.com/wp-content/uploads/2014/04/075953hZA.png" width="500" />

 

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

响应式表格jQuery插件

<img alt="响应式表格jQuery插件" src="http://images.shejidaren.com/wp-content/uploads/2014/04/075953srl.png" width="500" />

 

2.Responsive tables使用教程

Step1: CSS样式表

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

 ... 

Step2: js

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

 ...   

Step3: IE兼容

Step4: HTML

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

...

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 以下可见

插件下载地址: |

转载地址:http://gzefa.baihongyu.com/

你可能感兴趣的文章
调查问卷相关
查看>>
eclipse启动无响应,老是加载不了revert resources,或停留在Loading workbench状态
查看>>
1. Git-2.12.0-64-bit .exe下载
查看>>
怎样关闭“粘滞键”?
查看>>
[转]React 教程
查看>>
拓扑排序介绍
查看>>
eclipse打开工作空间(workspace)没有任务反应
查看>>
使用Sybmol模块来构建神经网络
查看>>
字符串去分割符号
查看>>
WPF中,多key值绑定问题,一个key绑定一个界面上的对象
查看>>
UML类图简明教程
查看>>
java反编译工具(Java Decompiler)
查看>>
Android开发之自定义对话框
查看>>
微信Access Token 缓存方法
查看>>
Eclipsed的SVN插件不能识别之前工作空间的项目
查看>>
Linux 查看iptables状态-重启
查看>>
amazeui学习笔记一(开始使用2)--布局示例layouts
查看>>
c#中lock的使用(用于预约超出限额的流程)
查看>>
ODI基于源表时间戳字段获取增量数据
查看>>
并发容器之CopyOnWriteArrayList(转载)
查看>>