首页 > 代码库 > 前端各大Grid UI组件整理

前端各大Grid UI组件整理

2024-07-17 22:47:23   226人阅读

 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/


联系
我们