百度搜索jQuery Flexigrid 表格插件官網(wǎng)，進入之后如圖
創(chuàng)新互聯(lián)建站致力于成都做網(wǎng)站、網(wǎng)站制作,成都網(wǎng)站設計,集團網(wǎng)站建設等服務標準化，推過標準化降低中小企業(yè)的建站的成本，并持續(xù)提升建站的定制化服務水平進行質(zhì)量交付，讓企業(yè)網(wǎng)站從市場競爭中脫穎而出。 選擇創(chuàng)新互聯(lián)建站，就選擇了安全、穩(wěn)定、美觀的網(wǎng)站建設服務！
點擊官網(wǎng)DownLoad進入Flexigrid 的GitHub主頁，下載插件包
解壓剛剛下載插件包，查看目錄：
README.md 里面介紹了當前版本的一些特性和證書等信息
Css目錄存放該插件需要的樣式表，
Js目錄存放插件的js文件
Demo即為作者提供的一些使用例子
使用：
(1)在插件包中自帶了，幾個例子，讀者可以借鑒下:里面介紹了不同數(shù)據(jù)格式 （如：JSON，XML）如何綁定到flexgrid表格中，具體參考源代碼學習
(2)如何根據(jù)自定義需求向表格中插入數(shù)據(jù)及控件
下面給出一個簡單例子：需求如下圖
步驟：a、利用eclipse/Myeclipse或Visual Studio(具體用什么工具根據(jù)喜好，也可以只用文本編輯器)創(chuàng)建一個web工程
b、工程中添加jquery插件，F(xiàn)lexigrid 插件
c、新建TestFlexigrid.html頁面進行編輯,html代碼為：
!DOCTYPE html
html
head
meta charset="UTF-8"
titleTest Flexigrid/title
link rel="stylesheet" type="text/css" href="js/flexigrid/css/flexigrid.css"
script type="text/javascript" src="js/jquery-1.8.3.js"/script
script type="text/javascript" src="js/flexigrid/js/flexigrid.js"/script
/head
body onload="init();"
table id="tb_account1"
/table
/body
/html
js部分代碼：
script
function init() {
$('#tb_account1').flexigrid({
'url': false
, 'width': 500
, 'dataType': 'json'
, 'colModel': [
{ 'display': 'Name', 'name': 'Name', 'width': 100, 'sortable': false, 'align': 'left', 'dataAlign': 'left' }
, { 'display': 'Age', 'name': 'Age', 'width': 100, 'sortable': false, 'align': 'left', 'dataAlign': 'left' }
, { 'display': 'Option', 'name': 'Option', 'width': 300, 'sortable': false, 'align': 'left', 'dataAlign': 'left' }
]
, 'resizable': false
, 'striped': true
, 'singleSelect': true
, 'showToggleBtn': false
, 'minheight': 30
, 'height': 150
, 'preProcess': function (data) {
return data;
}
, 'doDbClick': function () {
}
});
var tbData1 = { 'total': 1, 'rows': [] };
for (var i = 0; i 4; i++) {
tbData1['rows'].push({ 'cell': ["name", "10", "buttonAdd/button buttonModify/button"] });
}
$('#tb_account1').flexAddData(tbData1);
}
/script
最終界面顯示效果如下；
大多數(shù)前端er都把網(wǎng)頁中的table標簽替換為div，主要就是因為div要比table更容易添加CSS樣式。但是我們在日常應用中仍然要用到table表格，其中最好的例子就是對照表。今天彬Go將向大家推薦15個jQuery表格插件讓你對數(shù)據(jù)表格進行顯示、排序、篩選和操控。如jQuery表格排序插件、jQuery表格拖拽插件、jQuery樹形表格插件、設置顏色、點擊、替換等效果。
1.DataTables-強大的jQuery表格插件
datatables-jquery-插件
DataTables是提供了大量特性的強大jQuery表格插件。例如:你可以自動輕松篩選、Ajax預讀取數(shù)據(jù)、分頁、列排序、高亮排序列、擴展插件支持、使用CSS或jQuery UI ThemeRoller 定制主題和完整文檔。
2.uiTableFilter-jQuery表格過濾插件
ui-table-filter-jquery-插件
uiTableFilter是一個用于表格行篩選的jQuery插件。插件作者提供了詳細的例子來告訴大家如何將自己的表格和插件整合在一起并完成表格篩選。
3.Scrollable HTML Table-jQuery表格滾動插件
scrollable-html-table-jquery
Scrollable HTML Table jQuery插件可以讓你的表格變得可以滾動控制。
買空間、服務器就上主機網(wǎng)（CNIDC.COM） 虛擬主機評測+IDC導航=IDC123.COM。
4.Tablesorter-jQuery表格排序插件
tablesorter-jquery-插件
Tablesorter這個jQuery插件是用來將一個包含thead和tbody標簽的標準HTML表格轉變?yōu)闊o頁面刷新的可排序表格。它不但支持多列排序，而且跨瀏覽器兼容并且能通過widget系統(tǒng)進行擴展。
5.Flexigrid-Web2.0 jQuery表格插件
flexigrid-jquery
Flexigrid 是一個輕量級的Web2.0 jQuery插件。它包含很多非常Cool的特性，如主題定制、分頁、工具欄、搜索、排序、ajax讀取數(shù)據(jù)源、調(diào)整列寬高尺寸等。
6.HeatColor-jQuery表格顏色插件
heatcolor-jquery
HeatColor可以讓你根據(jù)元素的值來為元素設置顏色。 它的值的比對時根據(jù)預設的一個范圍來進行比較，最后對他們自動進行顏色值的設置。
買空間、服務器就上主機網(wǎng)（CNIDC.COM） 虛擬主機評測+IDC導航=IDC123.COM。
7.JQTreeTable-jQuery樹形表格插件
jqtreetable-jquery
使用JQTreeTable插件你可以得到一個樹形表格，如果用戶的瀏覽器禁用了JavaScript，那么他們也能看到普通形式的表格，并不影響可訪問性。
8.Ingrid-jQuery表格插件
ingrid-jquery-表格-插件
Ingrid是另一個數(shù)據(jù)表jQuery插件。它也有很多特性，比如列調(diào)整尺寸、排序、行列添加樣式等。在作者網(wǎng)站提供了很棒的文檔來告訴大家如何從頭使用這個jQuery表格插件。
9.jQuery ColumnManager plugin
jquery-column-manager-jquery-表格插件
columnManager是可以控制任意表格列顯示或隱藏的jQuery插件，而且它可以保存當前表格的狀態(tài)至你下次訪問。這個jQuery插件非常小巧輕量，僅3.6kb。
買空間、服務器就上主機網(wǎng)（CNIDC.COM） 虛擬主機評測+IDC導航=IDC123.COM。
10.jQuery treeTable-jQuery樹形表格插件
jquery-treetable-樹形表格插件
jQuery treeTable是小型的JQTreeTable, 它也能讓你的table顯示成樹形結構. 這個插件也可以在瀏覽器禁用JavaScript時保持文檔整潔并讓原始table可以使用.
11.CSV2Table-CSV格式讀取表格插件
csv2table-jQuery表格插件
CSV2Table 可以讀取CSV文件，它從CSV文件中讀取內(nèi)容并創(chuàng)建成table表格.
12.Table Pagination-jQuery表格分頁插件
table-pagination-jQuery表格插件
這個jQuery表格分頁插件可以在表格下面創(chuàng)建分頁元素，你還可以通過各種設置來定制分頁。
買空間、服務器就上主機網(wǎng)（CNIDC.COM） 虛擬主機評測+IDC導航=IDC123.COM。
13.jQuery TableRowCheckboxToggle
jquery-table-插件
這個jQuery表格插件可以讓你再點擊表格行的時候改變多選框狀態(tài)并修改該行CSS樣式。
14.Table Drag and Drop jQuery plugin-jQuery表格拖拽插件
這個簡單的jQuery插件可以讓用戶使用拖拽行的方式重新排列表格各行，任意單獨行可以設置為不可拖拽和/或不可放置。
15.uiTableEdit
uiTableEdit是由Greg Weber制作的很酷的jQuery表格編輯插件，它允許用戶編輯表格內(nèi)容。
其實沒有最好用，只是個人用的習慣不一樣。常用的有下面幾個。 DataTables。DataTables是一個jQuery的表格插件。這是一個高度靈活的工具，依據(jù)的基礎逐步增強，這將增加先進的互動控制，支持任何HTML表格。 tablesorter。
jquery樹形表格treetable插件使用方法步驟：
第一步：
1.上官網(wǎng)下載。
2.插件引用，當下載的時候，會有很多個文件，但是根據(jù)api來看，如果只想做簡單的效果，js除了引用juquery外，只需要引用jquery.treetable.js插件，如果想讓它有默認的外觀樣式還需要引入它們的jquery.treetable.css和jquery.treetable.theme.default.css
第二步：建立table格式
table id="example-advanced"
tr data-tt-id="1"
td大家電/td
/tr
tr data-tt-id="2" data-tt-parent-id="1"
td---電視/td
/tr
tr data-tt-id="3" data-tt-parent-id="1"
td---洗衣機/td
/tr
tr data-tt-id="4" data-tt-parent-id="1"
td---冰箱/td
/tr
/table
第三步：引入JS
/* 初始化數(shù)據(jù) */
$("#example-advanced").treetable({ expandable: true });/* 高亮顯示 */$("#example-advanced tbody").on("mousedown", "tr", function() {
$(".selected").not(this).removeClass("selected");
$(this).toggleClass("selected");
});/* 點擊展開關閉 */a href="#" class="btn btn-blue" onclick="jQuery('#example-advanced').treetable('expandAll'); return false;"展開/a
a href="#" class="btn btn-blue" onclick="jQuery('#example-advanced').treetable('collapseAll'); return false;"關閉l/a
jQuery Tabledit 是 HTML 表格的 inline 編輯器，兼容 Bootstrap。
它可以像電子表格那樣編輯 inline，或者用按鈕在編輯和視圖模式之間進行切換。
重慶分公司
重慶分公司
