本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分页,对表格进行滚动,拖放操作等等。这些插件很多都包含详细的教程。希望能对大家的开发有帮助。
jQuery 表格插件
Flexigrid – Web 2.0 Javscript Grid for jQuery - 可变列宽,自动适应表头宽度,可通过 Ajax 连接 XML 数据源,类似 Ext Grid,但基于 jQuery 因此更轻量小巧。
Chromatable JQuery Plugin - 固定表头,可滚动内容区,内容区滚动的时候表头位置保持不变。
Ingrid, the jQuery Datagrid - 在 HTML 表格上加入列宽调整,分页,排序,行列式样等功能(演示)。
JQTreeTable - 在表格中加入树形结构
Scrollable HTML table - 将普通 HTML 表格变为可滚动状态。将表头部分放入 THEAD 区,内容部分放入 TBODY 区,脚注部分放入 TFOOT 区域,引用 webtoolkit.scrollabletable.js 文件,然后在每个表格后面创建 ScrollableTable() 对象即可(演示)。
KeyTable - 象 Excel 那样,在单元格之间巡游,可以现场编辑。
graphTable - 借助 flot 将 HTML 表格中的内容变成图形(演示)。
DataTables - 非常强大的 jQuery 表格插件,可变宽页码浏览,现场过滤。多列排序,自动探测数据类型,智能列宽,可从几乎任何数据源获取数据。
jqGrid Plugin - 基于 Ajax 的 jQuery 表格插件,可以 Ajax 方式从服务器端获取数据填充进来(演示)。
Visualize: Accessible Charts & Graphs from Table Elements - 从 HTML 表格收集数据,并借助 HTML5 Canvas 对象转换为图表。
Grider - 一个简单的 jQuery 插件,可以对 HTML 表格进行计算,平均,累加,最大值,最小值等。
表格功能增强
Table Drag and Drop - 通过拖放,对表格中的数据重新排列,可以设置禁止拖放的行。
Table Pagination - 在表格下方自动生成分页导航。
tableRowCheckboxToggle - 可根据 class name 对表格的行自动 check on/off
BS Table Crosshair Plugin - 鼠标在表格上移动时,所经过的单元格自动交叉加亮
jqtable2csv - 将 HTML 表格转换为 SVG 字符串。
Colorize - 自动对表格间隔行使用不同背景颜色
jExpand - 一个非常轻量的 jQuery 插件,可以展开/关闭表格单元格,使表格可以容纳更多内容。
columnHover - 鼠标经过时,可以整列加亮,甚至支持 colspans 和 rowspans
HeatColor - 根据规则,或自动对表格中的值进行分析,对不同范围的值按不同颜色区分。
Fixed Header Table - 固定表头可滚动表格
表格搜索,筛选
tableFilter - 给表格添加简单的筛选功能。
uiTableFilter - 根据条件筛选(隐藏)表格行
Tablesorter 2.0 - 将普通的,拥有 THEAD 和 TBODY 标签的表格转换为可排序表格,可以分析多种数据,支持多列排序。
PicNet Table Filter - 实时的,Google 式筛选功能
jQuery tinysort - 排序
LiveFilter 1.1 - 非常轻量的表格筛选插件,部署非常简单。
jQtablesearch - 快速搜索,非常快
Quicksearch - 简单的搜索功能
jQuery 现场编辑
TableEditor – Flexible in place editing of TableSorter - 现场编辑表格内容,用户可以插入 Ajax 机制回存数据
jGridEditor - 现场编辑,可配置 Ajax 回存数据
原文:Nope jQuery HTML Table Toolbox (原文作者:Paul Andrew
jQuery 表格的更多相关文章
-
Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引
因为内容比较多,所以每篇讲解一些内容,最后会放出全部代码,可以参考.操作中总会遇到各式各样的问题,个人对部分问题的研究在最后一篇 问题研究 里.欢迎大家探讨学习. 代码都经过个人测试,但仍可能有各种未 ...
-
Web jquery表格组件 JQGrid 的使用 - 11.问题研究
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
-
Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数、ColModel API、事件及方法
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
-
Web jquery表格组件 JQGrid 的使用 - 5.Pager翻页、搜索、格式化、自定义按钮
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
-
Web jquery表格组件 JQGrid 的使用 - 6.准备工作 &; Hello JQGrid
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
-
Web jquery表格组件 JQGrid 的使用 - 7.查询数据、编辑数据、删除数据
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
-
Web jquery表格组件 JQGrid 的使用 - 8.Pager、新增数据、查询、刷新、查看数据
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
-
Web jquery表格组件 JQGrid 的使用 - 全部代码
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
-
25款*的jQuery表格插件
jQuery 表格插件可以让你创建各种各样的表格布局,表格布局是报纸和杂志中最常见的布局,现在的网站中也很常见,在这篇文章中,我向大家推荐25个jQuery 的表格插件,你可以任意控制表格的行和列,用 ...
-
jQuery 表格排序插件 Tablesorter 使用
jQuery 表格排序插件 Tablesorter 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面): <script src="lib/jquery-1.8.3.m ...
随机推荐
-
linux apache 配置URL地址栏大小写不敏感配置
1.apache配置 解决如下:把mod_speling.so放到apache目录下的 lib中... 然后修改http.conf文件, 加入:LoadModule speling_module /u ...
-
python: 模块发布
一.准备发布 1.为模块文件创建一个文件夹,并将模块文件复制到这个文件中(一般,文件夹的名字和模块的名字一样) 2.在文件夹中创建一个名为『setup.py』的文件,内容如下: #encoding:u ...
-
ASP.NET Web API 2 中的属性路由使用(转载)
转载地址:ASP.NET Web API 2 中的属性路由使用
-
HEOI2016游记
DAY -1: 省选前集训因为某些事情感觉心情和状态异常的糟糕 坐在窗户上吹了半个小时的冷风之后觉得回家休息一段时间 (反正我家在保定,大不了我省选的时候直接去河北大学就好辣) 在家里颓了三天吧,想清 ...
-
如何高效的编写Verlog HDL——菜鸟版
工欲善其事.必先利其器!要想高效的编写verilog没有一个好的编辑器可不行,所以我这里推荐两款十分好用的编辑器Notepad++和Gvim,这两款编辑器由于其强大的添加插件的功能,所以深受代码工作者 ...
-
代码重构:用工厂+策略模式优化冗余的if else代码块
最近在工作中优化了一段冗余的if else代码块,感觉对设计模式的理解和运用很有帮助,所以分享出来.鉴于原代码会涉及到公司的隐私,因此就不贴出来了.下面以更加通俗易懂的案例来解析. 假如写一个针对员工 ...
-
网站robots.txt &; sitemap.xml
1. 如何查看网站的robots.txt 网址/robots.txt, 比如小米 https://www.mi.com/robots.txt sitemap.xml
-
IMAP 读取含有附件邮件超慢问题
添加以下配置: Properties props = new Properties(); props.setProperty("mail.imap.partialfetch", & ...
-
IIS Web 服务器/ASP.NET 运行原理基本知识概念整理 转
转http://www.cnblogs.com/loongsoft/p/7272830.html IIS Web 服务器/ASP.NET 运行原理基本知识概念整理 前言: 记录 IIS 相 ...
-
vue-client脚手架使用
1.必须安装node环境 2.安装vue-client脚手架,在命令提示符中运行npm install -g vue-cli 3.创建项目 vue init 模板名 项目名 例如:vue init w ...