jquery表格插件哪個(gè)

大多數(shù)前端er都把網(wǎng)頁(yè)中的table標(biāo)簽替換為div，主要就是因?yàn)閐iv要比table更容易添加CSS樣式。但是我們?cè)谌粘?yīng)用中仍然要用到table表格，其中最好的例子就是對(duì)照表。今天彬Go將向大家推薦15個(gè)jQuery表格插件讓你對(duì)數(shù)據(jù)表格進(jìn)行顯示、排序、篩選和操控。如jQuery表格排序插件、jQuery表格拖拽插件、jQuery樹形表格插件、設(shè)置顏色、點(diǎn)擊、替換等效果。

創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比沾益網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式沾益網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋沾益地區(qū)。費(fèi)用合理售后完善，10年實(shí)體公司更值得信賴。

1.DataTables-強(qiáng)大的jQuery表格插件

datatables-jquery-插件

DataTables是提供了大量特性的強(qiáng)大jQuery表格插件。例如:你可以自動(dòng)輕松篩選、Ajax預(yù)讀取數(shù)據(jù)、分頁(yè)、列排序、高亮排序列、擴(kuò)展插件支持、使用CSS或jQuery UI ThemeRoller 定制主題和完整文檔。

2.uiTableFilter-jQuery表格過(guò)濾插件

ui-table-filter-jquery-插件

uiTableFilter是一個(gè)用于表格行篩選的jQuery插件。插件作者提供了詳細(xì)的例子來(lái)告訴大家如何將自己的表格和插件整合在一起并完成表格篩選。

3.Scrollable HTML Table-jQuery表格滾動(dòng)插件

scrollable-html-table-jquery

Scrollable HTML Table jQuery插件可以讓你的表格變得可以滾動(dòng)控制。

買空間、服務(wù)器就上主機(jī)網(wǎng)（CNIDC.COM） 虛擬主機(jī)評(píng)測(cè)+IDC導(dǎo)航=IDC123.COM。

4.Tablesorter-jQuery表格排序插件

tablesorter-jquery-插件

Tablesorter這個(gè)jQuery插件是用來(lái)將一個(gè)包含thead和tbody標(biāo)簽的標(biāo)準(zhǔn)HTML表格轉(zhuǎn)變?yōu)闊o(wú)頁(yè)面刷新的可排序表格。它不但支持多列排序，而且跨瀏覽器兼容并且能通過(guò)widget系統(tǒng)進(jìn)行擴(kuò)展。

5.Flexigrid-Web2.0 jQuery表格插件

flexigrid-jquery

Flexigrid 是一個(gè)輕量級(jí)的Web2.0 jQuery插件。它包含很多非常Cool的特性，如主題定制、分頁(yè)、工具欄、搜索、排序、ajax讀取數(shù)據(jù)源、調(diào)整列寬高尺寸等。

6.HeatColor-jQuery表格顏色插件

heatcolor-jquery

HeatColor可以讓你根據(jù)元素的值來(lái)為元素設(shè)置顏色。 它的值的比對(duì)時(shí)根據(jù)預(yù)設(shè)的一個(gè)范圍來(lái)進(jìn)行比較，最后對(duì)他們自動(dòng)進(jìn)行顏色值的設(shè)置。

買空間、服務(wù)器就上主機(jī)網(wǎng)（CNIDC.COM） 虛擬主機(jī)評(píng)測(cè)+IDC導(dǎo)航=IDC123.COM。

7.JQTreeTable-jQuery樹形表格插件

jqtreetable-jquery

使用JQTreeTable插件你可以得到一個(gè)樹形表格，如果用戶的瀏覽器禁用了JavaScript，那么他們也能看到普通形式的表格，并不影響可訪問(wèn)性。

8.Ingrid-jQuery表格插件

ingrid-jquery-表格-插件

Ingrid是另一個(gè)數(shù)據(jù)表jQuery插件。它也有很多特性，比如列調(diào)整尺寸、排序、行列添加樣式等。在作者網(wǎng)站提供了很棒的文檔來(lái)告訴大家如何從頭使用這個(gè)jQuery表格插件。

9.jQuery ColumnManager plugin

jquery-column-manager-jquery-表格插件

columnManager是可以控制任意表格列顯示或隱藏的jQuery插件，而且它可以保存當(dāng)前表格的狀態(tài)至你下次訪問(wèn)。這個(gè)jQuery插件非常小巧輕量，僅3.6kb。

買空間、服務(wù)器就上主機(jī)網(wǎng)（CNIDC.COM） 虛擬主機(jī)評(píng)測(cè)+IDC導(dǎo)航=IDC123.COM。

10.jQuery treeTable-jQuery樹形表格插件

jquery-treetable-樹形表格插件

jQuery treeTable是小型的JQTreeTable, 它也能讓你的table顯示成樹形結(jié)構(gòu). 這個(gè)插件也可以在瀏覽器禁用JavaScript時(shí)保持文檔整潔并讓原始table可以使用.

11.CSV2Table-CSV格式讀取表格插件

csv2table-jQuery表格插件

CSV2Table 可以讀取CSV文件，它從CSV文件中讀取內(nèi)容并創(chuàng)建成table表格.

12.Table Pagination-jQuery表格分頁(yè)插件

table-pagination-jQuery表格插件

這個(gè)jQuery表格分頁(yè)插件可以在表格下面創(chuàng)建分頁(yè)元素，你還可以通過(guò)各種設(shè)置來(lái)定制分頁(yè)。

買空間、服務(wù)器就上主機(jī)網(wǎng)（CNIDC.COM） 虛擬主機(jī)評(píng)測(cè)+IDC導(dǎo)航=IDC123.COM。

13.jQuery TableRowCheckboxToggle

jquery-table-插件

這個(gè)jQuery表格插件可以讓你再點(diǎn)擊表格行的時(shí)候改變多選框狀態(tài)并修改該行CSS樣式。

14.Table Drag and Drop jQuery plugin-jQuery表格拖拽插件

這個(gè)簡(jiǎn)單的jQuery插件可以讓用戶使用拖拽行的方式重新排列表格各行，任意單獨(dú)行可以設(shè)置為不可拖拽和/或不可放置。

15.uiTableEdit

uiTableEdit是由Greg Weber制作的很酷的jQuery表格編輯插件，它允許用戶編輯表格內(nèi)容。

jquery樹形表格treetable插件怎么用

jquery樹形表格treetable插件使用方法步驟：

第一步：

1.上官網(wǎng)下載。

2.插件引用，當(dāng)下載的時(shí)候，會(huì)有很多個(gè)文件，但是根據(jù)api來(lái)看，如果只想做簡(jiǎn)單的效果，js除了引用juquery外，只需要引用jquery.treetable.js插件，如果想讓它有默認(rèn)的外觀樣式還需要引入它們的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---洗衣機(jī)/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");

});/* 點(diǎn)擊展開關(guān)閉 */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;"關(guān)閉l/a

jquery 要做一個(gè)樹的表格怎么做只有3層

你給一條數(shù)據(jù)綁定2個(gè)值不就行了 data-lb=1 data-id=1 (類別=1 id=1) 隨便點(diǎn)都知道點(diǎn)的是什么類

asp.net 如何實(shí)現(xiàn)jquery easyui中的treegrid樹形表格？？

你只需要把 treegrid 參數(shù)里的 url 變成 ASP.NET 頁(yè)面地址即可，此頁(yè)面上傳輸JSON數(shù)據(jù)。

jquery-easyui的datagrid（樹表），復(fù)選框怎么半選？

沒(méi)有單選，只能設(shè)置多選 checkbox，如果你要單選，只能js控制了。

var rows = grid.getCheckedRows();

rows.length ==1