分享

37款开源jQuery表格插件

 hhulxm99 2011-04-11

 

我们一般使用HTML表格来显示数据,我们都知道div更容易设计,更灵活。但是现在你使用这些精彩的jQuery表格插件,将更简单、灵活、更多风格。下面介绍了37款开源jQuery表格插件。

感谢FineReport报表软件公司的整理。

 

jQuery网格插件 jqGrid

jqGrid 是一个用来显示网格数据的jQuery插件,文档比较全面,附带中文版本。

主要特点:
-Full control with JavaScript API
-Data returned from the server is XML
-Simple configuration
-Ability to load big datasets (paging)
-Resizable columns
-Server-side sorting
-Support of links, images, checkboxes
-You can add more than one grid on a sigle page (master-detail)
-Paging

  • 授权协议: MIT
  • 开发语言: JavaScript
  • 操作系统: 跨平台 

 

jQuery表格插件 jQuery grid view plugin

jqGridView是新的,富客户端的,基于XML Ajax网格插件的jQuery库。 jqGridView提供专业的解决方案,代表和编辑表格数据在网络上。精心设计的,具有强大的脚本API的,这可编辑网格是很简单的DHTMLXML 的配置,并显示出令人信服的成果与大量数据。 jqGridView可以轻松地执行好期待(管理通过的CSS jqGridView并不平台根据插件,它可用于不同的网络编程平台,如: ASP技术.NET /ASP PHP中,爪哇岛, CGI脚本等jqGridView已高度鲍泽兼容性。

主要特性:

* Column resizing.
* Server-side sorting.
* Server-side paging.
* Server-side filtering.
* 100% XML support.
* Inline row edit.
* Columns templates.

支持的浏览器包括:

* Opera 9.0
* Firefox 1.5
* Safari 3.0
* IE 6.0

  • 授权协议: 未知
  • 开发语言: JavaScript
  • 操作系统: 跨平台 

 

jQuery表格插件 Flexigrid for jQuery

Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。

  • 授权协议: MIT
  • 开发语言: JavaScript
  • 操作系统: 跨平台 

 

jQuery表格插件 DataTables

DataTables是一个jQuery的表格插件。这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格。主要特点:

  • 自动分页处理
  • 即时表格数据过滤
  • 数据排序以及数据类型自动检测
  • 自动处理列宽度
  • 可通过CSS定制样式
  • 支持隐藏列
  • 易用
  • 可扩展性和灵活性
  • 国际化
  • 动态创建表格
  • 免费的

  • 授权协议: 未知
  • 开发语言: JavaScript
  • 操作系统: 跨平台 

 

jQuery表格排序插件 tablesorter

Tablesorter 是一个用来直接在浏览器上对表格数据进行排序的jQuery插件,无需再次刷新页面,支持多种单元格数据类型,例如数值、字符串、日期和自定义排序。

主要的特点包括:

  • 多列排序
  • 支持文本、URL地址、数值、IP地址、日期类型,以及自定义类型排序
  • 支持 TH 元素的 ROWSPAN COLSPAN 属性
  • 支持第二个隐藏域排序
  • 可扩展外观
  • 程序简小,打包后只有 7.4K
程序效果:

  • 授权协议: 未知
  • 开发语言: JavaScript
  • 操作系统: 跨平台

 

jQuery Table Display

This plugin creates the methods "showRow", "hideRow" and "toggleRow", to manage the display of table rows.

Tested in FF 3.0 and IE7.

Created by Gabriel Langhans, Lucas Leite and Maicon Martins

  • 授权协议: 未知
  • 开发语言: JavaScript
  • 操作系统: 跨平台 

 

jQuery treeTable

jQuery treeTable 插件的功能跟 JQTreeTable 类似,是在一个表格内显示树状结果,如下图所示:

  • 授权协议: 未知
  • 开发语言: JavaScript
  • 操作系统: 跨平台 

 

UI Table Edit

uiTableEdit是由Greg Weber制作的很酷的jQuery表格编辑插件,它允许用户编辑表格内容。

var t = $('table')
$.uiTableEdit( t ) // returns t

  • 授权协议: 未知
  • 开发语言: JavaScript
  • 操作系统: 跨平台 

 

jQuery表格插件 Flexigrid

Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。

  • 授权协议: MIT
  • 开发语言: JavaScript
  • 操作系统: 跨平台 

jQueryDataGrid插件 Ingrid

Ingrid 是一个 jQuery 的电子数字表格插件,主要功能有列宽度变化、分页、行和列的样式等。

  • 授权协议: 未知
  • 开发语言: JavaScript
  • 操作系统: 跨平台 

jQuery表格分页插件 Table Pagination

这个jQuery表格分页插件可以在表格下面创建分页元素,你还可以通过各种设置来定制分页

  • 授权协议: 未知
  • 开发语言: JavaScript
  • 操作系统: 跨平台 

jQuery树形表格插件 jQTreeTable

使用JQTreeTable插件你可以得到一个树形表格,如果用户的浏览器禁用了JavaScript,那么他们也能看到普通形式的表格,并不影响可访问性。

  • 授权协议: 未知
  • 开发语言: JavaScript
  • 操作系统: 跨平台 

jQuery电子表格插件 jQuery.sheet

jQuery.sheet是一个 Web电子表格jQuery插件。功能、界面风格与MS Excel相似。

  • 授权协议: GPLv2
  • 开发语言: JavaScript
  • 操作系统: 跨平台 

jQuery表格插件 TiamatGrid

TiamatGrid 是一个jQuery表格插件,它是基于 jqGridView 插件开发的,尽管功能没它强,却比它快

主要特性:

* Events return array with the data selected
* Multiselect and singleselect mode
* Server-side paging.
* Server-side filtering.

兼容的浏览器:

* Firefox 2.0
* IE 7.0
* Opera 9.0
* Safari 3.0

  • 授权协议: 未知
  • 开发语言: JavaScript
  • 操作系统: 跨平台 

DataGrid jQuery Plugin

DataGrid jQuery 插件允许你创建一个在您的网页DataGrid组件。 DataGrid的是轻量级的,但强大的功能如下:

  • Resizable columns
  • Can convert an ordinary table
  • Paging
  • Toolbar
  • Create columns from tags
  • Checkbox Selecting
  • Show row numbers
  • Sortable columns
  • Frozen columns
  • Column group
  • Format cell
  • ...

  • 授权协议: 未知
  • 开发语言: JavaScript
  • 操作系统: 跨平台 

jQuery插件 jExpand

jExpand是一个可以让表格具备可伸缩功能的jQuery插件。利用这个功能可以帮助你更好地组织表格,让表格承载更多的消息比如图片,列表,图表和其它元素。

  • 授权协议: 未知
  • 开发语言: JavaScript
  • 操作系统: 跨平台 

CSV格式读取表格插件 csv2table

CSV2Table 可以读取CSV文件,它从CSV文件中读取内容并创建成table表格

  • 授权协议: 未知
  • 开发语言: JavaScript
  • 操作系统: 跨平台 

Ingrid, a jQ datagrid

Ingrid is an unobtrusive jQuery component that adds datagrid behaviors (column resizing, paging, sorting, row and column styling, and more) to your tables. The goal here is to give jQuery a robust, native datagrid that's up to snuff with those found in the EXT or YUI libraries.

Currently Ingrid supports the following:

  • resizable columns
  • paging toolbar
  • sorting (server-side)
  • row & column styling

Forthcoming features:

  • row selection model (single -or- multi w/ checkbox)
  • exposing the internal methods (ingrid.load(), ingrid.getColumn(), etc) as an API to respond to external events

Feature requests and bug reports are welcome.

  • 授权协议: 未知
  • 开发语言: JavaScript
  • 操作系统: 跨平台 

UI Table Filter

allows table rows to be filtered (made invisible)

t = $('table')
$.uiTableFilter( t, phrase )

 

documentation at http:///projects/uitablefilter

  • 授权协议: 未知
  • 开发语言: JavaScript
  • 操作系统: 跨平台 

Scrollable HTML Table

Scrollable HTML Table 这个 jQuery 插件用来在一个固定高度的表格中显示滚动行的数据,如下图所示:

  • 授权协议: 未知
  • 开发语言: JavaScript
  • 操作系统: 跨平台 

快速的jQuery插件和PHP表格生成器 Watajax

Watajax 是一个PHPjQuery结合起来用来快速生成网页表格数据的解决方案。

示例代码:

PHP
<?php
  // Connect to the database first if you plan on using the Sql version of Watajax.

  require_once("lib/Watajax.class.php");
  $Watajax = new WatajaxSql();
  $Watajax->columns = array(
    "id" => array("name" => "#", "sort_type" => "numeric", "hide" => true),
    "firstname" => array("name" => "First name", "transform" => '<img src="'.URI.'/images/icons/vcard.png" valign="absmiddle" /> !firstname'),
    "lastname" => array("name" => "Last name"),
    "email" => array("name" => "E-mail adress", "transform" => '<a href="show_reciptient.php?id=!id">!email</a>'),
    "tools" => array("name" => "", "virtual" => true, "transform" => '<a href="edit.php?id=!id">edit</a>'));
  $Watajax->run();
?>

jQuery
<script type="text/javascript">
  $(document).ready(function() {
    $("#watajax_table").watajax({ajax_connector:"ajax.php", table_id: "contacts"});
  })
</script>

jQuery电子表格插件 JQuery.Spreadsheet UI

这是一个采用jQuery开发的Web电子表格。经测试支持的浏览器包括:Firefox2/3 IE7/8Epiphony2Opera9Safari3

  • 授权协议: BSD
  • 开发语言: JavaScript
  • 操作系统: 跨平台 

jQuery Fixed Table Header Plugin

这是一个可以固定表头的jQuery插件。当表格向下滚动时,表头不会跟着动。

  • 授权协议: MIT
  • 开发语言: JavaScript
  • 操作系统: 跨平台 

jQuery表格过滤插件 uiTableFilter

uiTableFilter 是一个用来过滤表格中的行的jQuery插件。

  • 授权协议: 未知
  • 开发语言: JavaScript
  • 操作系统: 跨平台

jQuery Gird

基于Jquery实现的简单Gird插件,兼容多种浏览器。

  • 授权协议: 未知
  • 开发语言: JavaScript
  • 操作系统: 跨平台 

jQuery插件 tableFormSynch

tableFormSynch是一个表格与表单数据相互更新的jQuery插件。它提供的功能包括:基于表单中的数据,新增行。删除所选择行,并清除表单 中的所有数据。tableFormSynch支持所有表单控件包括:checkboxesradiobuttonsselect

  • 授权协议: 未知
  • 开发语言: JavaScript
  • 操作系统: 跨平台 

HeatColor可以让你根据元素的值来为元素设置颜色。 它的值的比对时根据预设的一个范围来进行比较,最后对他们自动进行颜色值的设置。

  • 授权协议: 未知
  • 开发语言: JavaScript
  • 操作系统: 跨平台 

jQuery插件 KeyTable

KeyTable是一个轻量级jQuery插件(5kb左右),用于为任意html表格添加键盘导航选择支持。该插件提供一种类似于Excel的导航选择方式和单击单元格可以编辑功能。此外KeyTable还可以与DataTables结合使用。

  • 授权协议: BSD
  • 开发语言: JavaScript
  • 操作系统: 跨平台 

jQuery表格插件 ayGrid

ayGrid是一个基于jQuery的表格插件,可实现在表格上在线修改、增加、删除、保存数据!其中,单元格的编辑可以实现CheckBoxComboBoxInput的输入方式。表格数据传输基于JSON
  • 授权协议: 未知
  • 开发语言: JavaScript
  • 操作系统: 跨平台 

Table Library

jquery plugin for working with tables and table rows
* create table objects and table row objects and use convenience methods
* serialize objects to table rows and extract objects from table rows
* support for saving object properties as row attributes
* advanced querying of table rows

documentation at http:///projects/tablelib

plugin dependent on lib/iterator.js (included in tarball)

  • 授权协议: 未知
  • 开发语言: JavaScript
  • 操作系统: 跨平台 

Table Scroller

This implements a table scroller. It is passed a single argument which is the height in pixels of the scrolled region. It will replace the original table with the scrolled table.

  • 授权协议: 未知
  • 开发语言: JavaScript
  • 操作系统: 跨平台 

tableFilter

Table filtering/sorting/paging on steroids. Multi-column sorting and filtering.

tableFilter allows you to do simple client-side pagination, as well as auto-filtering and auto-sorting on multiple columns simultaneously using ctrl-click. If jquery.cookies is present, it will remember custom settings automatically. tableFilter also supports plugins for added functionality such as automatic aggregation for columns of numeric data (sum/avg/min/max). All of this yours for the low, low price of $('table').tableFilter(); See site for details and demos.

  • 授权协议: 未知
  • 开发语言: JavaScript
  • 操作系统: 跨平台

jQuery表格编辑插件 TableEditor

TableEditor 提供了灵活的对表格进行即时编辑功能,用户可自定义编辑的处理函数,例如调用 Ajax 方法更新数据等。

  • 授权协议: 未知
  • 开发语言: JavaScript
  • 操作系统: 跨平台 

tableHover

tableHover一个jQuery插件当鼠标经过时,能够对表格的一整列或行进行着色加亮。支持colspansrowspans的表格。

  • 授权协议: MIT/GPL
  • 开发语言: JavaScript
  • 操作系统: 跨平台 

TableHandler

Use this to search the text of your table, check the column out.
init table to searchable

jQuery('#table1').tablehandler();


search your text

jQuery('#table1').searchTable({
value : jQuery('#value1').val()
})

 

  • 授权协议: 未知
  • 开发语言: JavaScript
  • 操作系统: 跨平台

FireScope Grid

FireScope Grid 是一个 jQuery 插件,用 HTML 表格增加了数据表格的常用功能,这些功能都在客户端上直接完成,如下图所示:
  • 授权协议: GPLv2
  • 开发语言: JavaScript
  • 操作系统: 跨平台 

表格排序插件 TableSort

A rewrite of the original table sort script that includes a few more features and a much faster sort routine architecture

  • 授权协议: 未知
  • 开发语言: JavaScript
  • 操作系统: 跨平台 

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多