jQuery 表格插件整理

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)

赞 (0)

相关推荐

  • jQuery表格插件datatables用法详解

    jQuery表格插件datatables用法详解

    一.Datatables简介 DataTables是一个jQuery的表格插件.这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格.主要特点: 自动分页处理 即时表格数据过滤 数据排序以及数据类型自动检测 自动处理列宽度 可通过CSS定制样式 支持隐藏列 易用 可扩展性和灵活性 国际化 动态创建表格 免费的 二.如何使用 在做后台的时候并没有美工和前端工程师来配合你做页面,为了显示数据并有一定的美感,我们可以使用jQuery的DataTables插件来帮助我

  • jQuery表格插件datatables用法汇总

    DataTables是一个jQuery的表格插件,本文为大家分享了表格插件datatables用法,介绍了基础的部分知识,具体内容如下 一.初始化 在页面中 <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.css&

  • 一个可绑定数据源的jQuery数据表格插件

    一个可绑定数据源的jQuery数据表格插件

    固定表头 列宽可调整 单击列头可排序 双击单元格可编辑 可绑定数据源 看下效果吧:HTML - 模板代码: 复制代码 代码如下: <table id="test"> <tr class="header"> <td style="width: 100px;" sort='true'> 姓名 </td> <td style="width: 100px;" sort='true'

  • jQuery表格插件ParamQuery简单使用方法示例

    jQuery表格插件ParamQuery简单使用方法示例

    实现步骤:先在html的head中加入对jQuery和jQuery UI的引用: 复制代码 代码如下: <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/base/jquery-ui.css" /><script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/j

  • 基于jQuery的动态表格插件

    基于jQuery的动态表格插件

    在这里我们需要控制用户的输入验证,表格的添加删除,用户输入数据的统计聚合,还有相应的计算列比如商品的总价=商品的单价*商品数量,再如,同时在用户提交的时候我还要需要获取提交到后台服务端处理在存储到我们的数据库.本插件则简单的处理了这些繁琐的事情. 插件属性说明: 1:rowTemplate:这是插入列的模板,在模板中我们的序号这种行号标示的需要rownum 的class.在模板中的需要唯一编号的比如我们的radiobutton的name属性在每个td单元格需要唯一的name组,再如id这种需要唯

  • jQuery表格插件datatables用法总结

    DataTables是一个jQuery的表格插件.这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格. 官方网站及其下载地址:http:/www.datatables.net 当前最新版为1.10.2,读者可点此本站下载. 其主要特点如下: 1.自动分页处理 2.即时表格数据过滤 3.数据排序以及数据类型自动检测 4.自动处理列宽度 5.可通过CSS定制样式 6.支持隐藏列 7.易用 8.可扩展性和灵活性 9.国际化 10.动态创建表格 11.免费的 使用方

  • 创建自己的jquery表格插件

    创建自己的jquery表格插件

    在模仿easyui的dataGrid表格插件的同时,自己去封装了一个.实现了基本的json数据的动态加载,自动分页,全选全不选,鼠标悬浮变色,隔行变色等 由于涉及到ajax访问,所以必须部署到iis上才能看出效果,先给大家看一下效果图: css样式 /* CSS Document */ body { font: 14px/1.43 "Helvetica Neue", Tahoma, "Microsoft YaHei", Arial; color: #253443;

  • 再次分享18个非常棒的jQuery表格插件

    再次分享18个非常棒的jQuery表格插件

    1.DataTables 在线例子 2.tablesorter 在线例子 3.uiTableFilter 在线例子 4.columnHover 在线例子 5.Scrollable HTML 在线例子 6.columnManager 在线例子 7.Flexigrid 在线例子 8.Table Drag and Drop 在线例子 9.HeatColor 在线例子 10.JQTreeTable 在线例子 11.FireScope Grid 在线例子 12.Ingrid 在线例子 13.Animate

  • jqGrid jQuery 表格插件测试代码

    jqGrid jQuery 表格插件测试代码

    官方Demo地址:http://www.trirand.com/blog/jqgrid/jqgrid.html 效果图: 页面代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://w

  • jQuery 表格插件整理

    jQuery 表格插件整理

    jQuery 表格插件 Flexigrid – Web 2.0 Javscript Grid for jQuery - 可变列宽,自动适应表头宽度,可通过 Ajax 连接 XML 数据源,类似 Ext Grid,但基于 jQuery 因此更轻量小巧. Chromatable JQuery Plugin - 固定表头,可滚动内容区,内容区滚动的时候表头位置保持不变. Ingrid, the jQuery Datagrid - 在 HTML 表格上加入列宽调整,分页,排序,行列式样等功能(演示).

  • 23个超流行的jQuery相册插件整理分享

    23个超流行的jQuery相册插件整理分享

    这些jQuery插件包括演示.文档说明等,欣赏吧! 1. Galleriffic 下载与文档 查看演示 2. jPhotoGrid 下载与文档 查看演示 3. Galleria 下载与文档  查看演示 4. YoxView 下载与文档 查看演示 5. Micro Image Gallery 下载与文档 查看演示 6. AD Gallery 下载与文档 查看演示 7. slideViewerPro 下载与文档 查看演示 8. Galleryview 下载与文档 查看演示 9. Pikachoose

  • 神奇的7个jQuery 3D插件整理

    神奇的7个jQuery 3D插件整理

    1. Flip HTML content in 3D用jquery实现的3D翻转效果,支持html内容的翻转.2. Agile Carousel3D效果的jQuery跑马灯特效.3. RotationjQuery旋转3D特效.4. Tag Cloud使用jQuery创建的3D标签云.5. Sphere一个jQuery实现的3D星球.6. Flip!7. Faux 3D Effect

随机推荐