Cyh的博客

本文搜集了大量 jQuery 表格插件，幫助 Web 設(shè)計(jì)者更好地駕御 HTML 表格，你可以對(duì)表格進(jìn)行橫向和豎向排序，設(shè)置固定表頭，對(duì)表格進(jìn)行搜索，對(duì)大表格進(jìn)行分頁，對(duì)表格進(jìn)行滾動(dòng)，拖放操作等等。這些插件很多都包含詳細(xì)的教程。

jQuery 表格插件

Flexigrid – Web 2.0 Javscript Grid for jQuery - 可變列寬，自動(dòng)適應(yīng)表頭寬度，可通過 Ajax 連接 XML 數(shù)據(jù)源，類似 Ext Grid，但基于 jQuery 因此更輕量小巧。

Chromatable JQuery Plugin - 固定表頭，可滾動(dòng)內(nèi)容區(qū)，內(nèi)容區(qū)滾動(dòng)的時(shí)候表頭位置保持不變。

Ingrid, the jQuery Datagrid - 在 HTML 表格上加入列寬調(diào)整，分頁，排序，行列式樣等功能（演示 ）。

JQTreeTable - 在表格中加入樹形結(jié)構(gòu)

Scrollable HTML table - 將普通 HTML 表格變?yōu)榭蓾L動(dòng)狀態(tài)。將表頭部分放入 THEAD 區(qū)，內(nèi)容部分放入 TBODY 區(qū)，腳注部分放入 TFOOT 區(qū)域，引用 webtoolkit.scrollabletable.js 文件，然后在每個(gè)表格后面創(chuàng)建 ScrollableTable() 對(duì)象即可（演示 ）。

KeyTable - 象 Excel 那樣，在單元格之間巡游，可以現(xiàn)場編輯。

graphTable - 借助 flot 將 HTML 表格中的內(nèi)容變成圖形（演示 ）。

DataTables - 非常強(qiáng)大的 jQuery 表格插件，可變寬頁碼瀏覽，現(xiàn)場過濾。多列排序，自動(dòng)探測數(shù)據(jù)類型，智能列寬，可從幾乎任何數(shù)據(jù)源獲取數(shù)據(jù)。

jqGrid Plugin - 基于 Ajax 的 jQuery 表格插件，可以 Ajax 方式從服務(wù)器端獲取數(shù)據(jù)填充進(jìn)來（演示 ）。

Visualize: Accessible Charts & Graphs from Table Elements - 從 HTML 表格收集數(shù)據(jù)，并借助 HTML5 Canvas 對(duì)象轉(zhuǎn)換為圖表。

Grider - 一個(gè)簡單的 jQuery 插件，可以對(duì) HTML 表格進(jìn)行計(jì)算，平均，累加，最大值，最小值等。

表格功能增強(qiáng)

Table Drag and Drop - 通過拖放，對(duì)表格中的數(shù)據(jù)重新排列，可以設(shè)置禁止拖放的行。

Table Pagination - 在表格下方自動(dòng)生成分頁導(dǎo)航。

tableRowCheckboxToggle - 可根據(jù) class name 對(duì)表格的行自動(dòng) check on/off

BS Table Crosshair Plugin - 鼠標(biāo)在表格上移動(dòng)時(shí)，所經(jīng)過的單元格自動(dòng)交叉加亮

jqtable2csv - 將 HTML 表格轉(zhuǎn)換為 SVG 字符串。

Colorize - 自動(dòng)對(duì)表格間隔行使用不同背景顏色

jExpand - 一個(gè)非常輕量的 jQuery 插件，可以展開/關(guān)閉表格單元格，使表格可以容納更多內(nèi)容。

columnHover - 鼠標(biāo)經(jīng)過時(shí)，可以整列加亮，甚至支持 colspans 和 rowspans

HeatColor - 根據(jù)規(guī)則，或自動(dòng)對(duì)表格中的值進(jìn)行分析，對(duì)不同范圍的值按不同顏色區(qū)分。

Fixed Header Table - 固定表頭可滾動(dòng)表格

表格搜索，篩選

tableFilter - 給表格添加簡單的篩選功能。

uiTableFilter - 根據(jù)條件篩選（隱藏）表格行

Tablesorter 2.0 - 將普通的，擁有 THEAD 和 TBODY 標(biāo)簽的表格轉(zhuǎn)換為可排序表格，可以分析多種數(shù)據(jù)，支持多列排序。

PicNet Table Filter - 實(shí)時(shí)的，Google 式篩選功能

jQuery tinysort - 排序

LiveFilter 1.1 - 非常輕量的表格篩選插件，部署非常簡單。

jQtablesearch - 快速搜索，非常快

Quicksearch - 簡單的搜索功能

jQuery 現(xiàn)場編輯

TableEditor – Flexible in place editing of TableSorter - 現(xiàn)場編輯表格內(nèi)容，用戶可以插入 Ajax 機(jī)制回存數(shù)據(jù)

jGridEditor - 現(xiàn)場編輯，可配置 Ajax 回存數(shù)據(jù)

本材料原始來源：Nope jQuery HTML Table Toolbox (原文作者:Paul Andrew )