前端各大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/

前端各大Grid UI组件整理

时间： 2024-12-17 07:34:31

前端各大Grid UI组件整理的相关文章

专注手机端前端界面开发的ui组件和js组合

frozenui一款腾讯开发的简化版Bootstrap,只用于手机端 http://frozenui.github.io/ https://github.com/frozenui/frozenui zepto.js专注于手机端开发的js库 http://www.zeptojs.cn/            官方文档 http://www.css88.com/doc/zeptojs/         在线文档

前端UI组件复用工具

"懒"是第一生产力. 代码复用总是程序员喜闻乐见的,前端组件化的最终目的就是复用,今天我们就将深入探讨如何实现UI组件的复用. 通常我们所说的组件往往是包含业务逻辑的前端组件,而这类组件实际上很难实现广义上的复用,顶多能在同一条业务线上复用一下,但UI组件就不一样了,没有了业务的约束,只在UI层面上实现复用,那想象空间就很大了,所以这里我们只讨论UI组件. 首先界定一下,UI组件就是一个web界面的前端代码片段,虽然说不包含业务,但基本的JS效果是可以有的,比如表单验证.轮播图效果.选

工作流,WEB框架,UI组件网络收集整理

工作流,WEB框架,UI组件网络收集整理 在博客园上逛了好多年,随手收录了一些工作流,WEB开发框架,UI组件,现在整理一下与大家分享. 由于个人能力与精力有限,望各位园友在评论中补充,我将全部整理到正文: ? 工作流篇 RoadFlow工作流(收费):                  http://www.cqroad.cn/WorkFlow 驰骋工作流引擎 ccflow                       https://www.oschina.net/p/ccflow YbSof

目前流行前端几大UI框架 ----vue Vue的UI组件库

在前端项目开发过程中,总是会引入一些UI框架,已为方便自己的使用,很多大公司都有自己的一套UI框架,下面就是最近经常使用并且很流行的UI框架. 一.Mint UI 屏幕快照 2019-01-18 下午3.03.59.png Mint UI是 饿了么团队开发基于vue .js的移动端UI框架,它包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要. 官网:https://mint-ui.github.io/#!/zh-cn Github: https://github.com/Elem

交互设计：隐藏或显示大段文本的UI组件有哪些？

应用场景: 在手机上要给列表中的每一项添加一个大段的介绍,应该用什么UI组件 A: 这里可以用,模态对话框,弹出提示,工具提示这类组件.模态对话框的好处,就是用关闭的按钮,用户操作方便:而弹出提示和工具提示只能通过点击来切换 模态对话框: http://v2.bootcss.com/javascript.html#modals http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html Bootstrap 模态框(Modal)插件 模态

一枚前端UI组件库 KUI for Vue

一枚前端UI组件库 KUI for Vue 基于VUE 2.x 开发,在追求完美视觉体验的同时也保证了其性能高效. 欢迎批评.指正.吐槽.Star 和 捐助 文档 Docs: http://k-ui.xyz Blog: http://chuchur.com 特性 漂亮的UI,可定制主题 兼容IE9+ 组件丰富,功能强大 更新日志: Logs: http://vue.k-ui.xyz/log 安装 使用npm npm install kui-vue --save 使用CDN <!-- import

一枚前端UI组件库 KUI for React

一枚前端UI 组件库 for React 在追求完美视觉体验的同时也保证了其性能高效. 欢迎使用 .批评.指正.吐槽.Star? 特性 漂亮的UI,可定制主题 兼容IE9+ 组件丰富,功能强大 更新日志 logs:https://react.k-ui.cn/#/log 文档 Docs : https://react.k-ui.cn Github: https://gitee.com/chuchur/kui-react 安装 npm install react-kui 使用 ```js impor

史上最全“大数据”学习资源整理

史上最全"大数据"学习资源整理 当前,整个互联网正在从IT时代向DT时代演进,大数据技术也正在助力企业和公众敲开DT世界大门.当今"大数据"一词的重点其实已经不仅在于数据规模的定义,它更代表着信息技术发展进入了一个新的时代,代表着爆炸性的数据信息给传统的计算技术和信息技术带来的技术挑战和困难,代表着大数据处理所需的新的技术和方法,也代表着大数据分析和应用所带来的新发明.新服务和新的发展机遇. 为了帮助大家更好深入了解大数据,云栖社区组织翻译了GitHub Aweso

基于jquery开发的UI框架整理分析

根据调查得知,现在市场中的UI框架差不多40个左右,不知大家都习惯性的用哪个框架,现在市场中有几款UI框架稍微的成熟一些,也是大家比较喜欢的一种UI框架,那应该是jQuery,有部分UI框架都是根据jQuery研发出来的产品,现在也很常见了. 国产jQuery UI框架 (jUI) DWZ DWZ富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架.设计目标是简单实用,快速开发,降低ajax开发成本. jQuery 部件布局