整理了12款Javascript 表格控件(DataGrid)

發(fā)布時(shí)間：2009-10-25 21:37:26 作者：佚名

12款JavaScript表格控件。表格控件(DataGrid )允許最終用戶閱讀和寫入到絕大多數(shù)數(shù)據(jù)庫的應(yīng)用程序。DataGrid 控件可以在設(shè)計(jì)時(shí)快速進(jìn)行配置，只需少量代碼或無需代碼。

當(dāng)在設(shè)計(jì)時(shí)設(shè)置了DataGrid 控件的 DataSource 屬性后，就會(huì)用數(shù)據(jù)源的記錄集來自動(dòng)填充該控件，以及自動(dòng)設(shè)置該控件的列標(biāo)頭。然后您就可以編輯該網(wǎng)格的列；刪除、重新安排、添加列標(biāo)頭、或者調(diào)整任意一列的寬度。

1. Flexigrid

Flexigrid是一個(gè)類似于Ext Gird，但基于jQuery開發(fā)的Grid。它具有的功能包括：可以調(diào)整列寬，合并列標(biāo)題，分頁，排序，顯示/隱藏表格等。Flexigrid顯示的數(shù)據(jù)能夠通過Ajax獲取或者從一個(gè)普通的表格轉(zhuǎn)換。

2. Yahoo! UI Library: DataTable (演示地址)

該DataTable控件提供的功能有：排序、列寬調(diào)整、分頁、inline editing、row selection等。

3. jqGrid

jqGrid是一個(gè)Ajaxed jQuery Grid插件。提供分頁功能，添加、編輯、刪除和搜索表中記錄，支持多種數(shù)據(jù)類型輸入：XML，JSON，Array等，多行選擇，支持子表格，集成日期選擇控件等等。

4. tableFormSynch (演示地址)

tableFormSynch是一個(gè)表格與表單數(shù)據(jù)相互更新的jQuery插件。它提供的功能包括：基于表單中的數(shù)據(jù)，新增行。刪除所選擇行，并清除表單中的所有數(shù)據(jù)。tableFormSynch支持所有表單控件包括：checkboxes、radio、buttons、select

5. DataTables

DataTables是一個(gè)jQuery插件，能夠讓HTML表格很方便地實(shí)現(xiàn)分頁、過濾和多欄排序等功能。DataTables可以使用本身自帶的CSS樣式，但還可以按自己的需要自定義CSS樣式。它具有以下特征：

自適應(yīng)欄寬
可保存表格狀態(tài)
可隱含列
動(dòng)態(tài)創(chuàng)建表格
Ajax自動(dòng)裝載數(shù)據(jù)
豐富的分頁類型
多欄排序和高亮顯示

6. OmniGrid

OmniGrid是一個(gè)采用Mootools1.2開發(fā)的表格控件與FlexGrid jQuery和SortableTable相似。具有分頁，排序，Ajax數(shù)據(jù)加載，添加/修改/刪除表格數(shù)據(jù)功能等。

7. moodgets Grid (演示地址)

moodgets Grid是一個(gè)基于Mootools框架開發(fā)，易于使用，可擴(kuò)展的表格控件。拖動(dòng)調(diào)整表格列寬，排序，多行或單行選擇，單擊表格單元格可編輯，分頁，通過Ajax加載數(shù)據(jù)。

8. MyTableGrid (演示地址)

MyTableGrid是一個(gè)基于是Prototype框架開發(fā)的DataGrid控件，用于以一種更易于瀏覽和更靈活的方式來展示數(shù)據(jù)。它提供Ajax支持的快速分頁和數(shù)據(jù)排序功能，可以拖動(dòng)調(diào)整數(shù)據(jù)列寬度，隱藏不需要顯示的列。