前端各大Grid UI組件整理

 Flexigrid 

Flexigrid是一個類似於Ext Gird，但基於jQuery開發的Grid。它具有的功能包括：可以調整列寬，合並列標題，分頁，排序，顯示/隱藏表格等。Flexigrid顯示的數據能夠通過Ajax獲取或者從一個普通的表格轉換。

主頁：http://www.flexigrid.info/

下載：http://code.google.com/p/flexigrid/

示例：http://www.flexigrid.info/

 

 dhtmlxGrid 

dhtmlxGrid是一個Ajax-enabled JavaScript Grid。支持多種數據源包括：XML，JSON，CSV，JS數組和HTML表格。提供的功能有： 列寬大小調整，排序，拖動列，過濾，搜索，分組，分頁等。

主頁：http://dhtmlx.com/docs/products/dhtmlxGrid/

下載：http://www.dhtmlx.com/docs/download/dhtmlxGrid.zip

示例：http://dhtmlx.com/docs/products/dhtmlxGrid/

 

 Ingrid 

這個jQuery DataGrid提供的功能有：可以拖動調整列寬，分頁，排序，設置行/列樣式等。

主頁：http://www.reconstrukt.com/ingrid/

下載：http://www.reconstrukt.com/ingrid/#download

示例：http://www.reconstrukt.com/ingrid/example1.html

 

 Yahoo! UI Library: DataTable

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

主頁：http://developer.yahoo.com/yui/datatable/

下載：http://developer.yahoo.com/yui/download/

示例：http://developer.yahoo.com/yui/examples/datatable/index.html

 

 DataTables 

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

• 自適應列寬
• 可保存表格狀態
• 可隱含列
• 動態創建表格
• Ajax自動裝載數據
• 豐富的分頁類型
• 多欄排序和高亮顯示

主頁：http://datatables.net/

下載：http://datatables.net/download

示例：http://datatables.net/

 

Sigma Grid 

Sigma Grid是一個采用純javascript開發的Ajax數據表格。

• 基於CSS控制外觀，內置Classic、Vista、Mac、XP四種風格
• 提供單元格直接編輯功能，可以自定義編輯器，為單元格設置數學計算公式，自定義單元格表現方式
• 提供靈活的表頭控制功能比如：鎖定表頭，排序，拖動調整列寬
• 支持分頁，數據過濾，根據數據生成柱狀圖，餅狀圖，曲線圖
• 支持從多種數據源加載數據： JSON、XML、CSV等
• 支持多種瀏覽器：IE6.0+\FireFox2.0+\Safari3.0+\Opera9.0+

主頁：http://www.sigmawidgets.com/products/sigma_grid2/

下載：http://www.sigmawidgets.com/download.html

示例：http://www.sigmawidgets.com/products/sigma_grid2/demos/example_master_details.html

 

 KeyTable

KeyTable是一個輕量級jQuery插件(約5kb左右)，用於為任意html表格添加鍵盤導航選擇支持。該插件提供一種類似於Excel的導航選擇方式和單擊單元格可以編輯功能。此外KeyTable還可以與 DataTables結合使用。 

主頁：http://www.sprymedia.co.uk/article/KeyTable

下載：http://www.sprymedia.co.uk/software/KeyTable/KeyTable.zip

示例：http://www.sprymedia.co.uk/software/KeyTable/datatable.html

 

 Drag and drop table content with JavaScript

利用這個JavaScript Lib只需少量代碼就能夠實現表格內容的拖曳。可以將單元格中的內容拖至其它單元格或其它表格中。

主頁：http://www.redips.net/javascript/drag-and-drop-table-content/

下載：http://www.redips.net/my/tar/redips2.tar.gz

示例：http://www.redips.net/javascript/drag-and-drop-table-content/

 

 EJS TreeGrid 

主頁：http://www.treegrid.com/treegrid/www/

示例：http://www.treegrid.com/treegrid/www/?gclid=CKm0kMi6l8ACFU8HvAodBCkAVQ

 

 PlatinumGrid 

主頁：http://www.platinumgrid.com/export.php

示例：http://www.platinumgrid.com/export.php

 

 JQuery表格插件 MagicGrid

易於使用，易於擴展，雖然只提供有限的功能，但良好的設計使之非常容易擴展，只需少量代碼就可實現多項功能；多行表頭(multi headers)，行展開(expandable)，固定列(fixed column)

主頁：http://www.boarsoft.com/javascript/grid

下載：http://www.boarsoft.com/javascript/grid

示例：http://www.boarsoft.com/javascript/grid

 

 EditableGrid

EditableGrid是一個JavaScript Library，利用它能夠讓標准的HTML表格變成可編輯和可排序。這個Library能夠讓用戶自動使用適當的編輯器如textfields、checkbox等來編輯單元格，並內置多各個輸入校驗器（integer、double、URL、E-mail和Date）。此外EditableGrid還可選集成Open Flash Chart，能夠自動將表格中的數據轉成圖表。

主頁：http://www.webismymind.be/editablegrid/

下載：http://www.webismymind.be/editablegrid/

示例：http://www.webismymind.be/editablegrid/