我们一般使用HTML表格来显示数据,我们都知道div更容易设计,更灵活。但是现在你使用这些精彩的jQuery表格插件,将更简单、灵活、更多风格。下面介绍了37款开源jQuery表格插件。
感谢FineReport报表软件公司的整理。
jqGrid 是一个用来显示网格数据的jQuery插件,文档比较全面,附带中文版本。
jQuery表格插件 jQuery grid view plugin
jqGridView是新的,富客户端的,基于XML , Ajax网格插件的jQuery库。 jqGridView提供专业的解决方案,代表和编辑表格数据在网络上。精心设计的,具有强大的脚本API的,这可编辑网格是很简单的DHTML与XML 的配置,并显示出令人信服的成果与大量数据。 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
jQuery表格插件 Flexigrid for jQuery
DataTables是一个jQuery的表格插件。这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格。主要特点:
Tablesorter 是一个用来直接在浏览器上对表格数据进行排序的jQuery插件,无需再次刷新页面,支持多种单元格数据类型,例如数值、字符串、日期和自定义排序。
主要的特点包括:
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
uiTableEdit是由Greg Weber制作的很酷的jQuery表格编辑插件,它允许用户编辑表格内容。
var t = $('table')
$.uiTableEdit( t ) // returns t
Ingrid 是一个 jQuery 的电子数字表格插件,主要功能有列宽度变化、分页、行和列的样式等。
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
DataGrid jQuery 插件允许你创建一个在您的网页DataGrid组件。 DataGrid的是轻量级的,但强大的功能如下:
jExpand是一个可以让表格具备可伸缩功能的jQuery插件。利用这个功能可以帮助你更好地组织表格,让表格承载更多的消息比如图片,列表,图表和其它元素。
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:
Forthcoming features:
Feature requests and bug reports are welcome.
allows table rows to be filtered (made invisible)
t = $('table')
$.uiTableFilter( t, phrase )
documentation at http://gregweber.info/projects/uitablefilter
Watajax 是一个PHP和jQuery结合起来用来快速生成网页表格数据的解决方案。
示例代码:
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 Fixed Table Header Plugin
uiTableFilter 是一个用来过滤表格中的行的jQuery插件。
HeatColor可以让你根据元素的值来为元素设置颜色。 它的值的比对时根据预设的一个范围来进行比较,最后对他们自动进行颜色值的设置。
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://gregweber.info/projects/tablelib
plugin dependent on lib/iterator.js (included in tarball)
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.
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.
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()
})
联系客服