首页 / JQUERY / 25个顶级的jQuery表格插件

25个顶级的jQuery表格插件

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了25个顶级的jQuery表格插件，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2986字，纯文字阅读大概需要5分钟。

内容图文

　　jQuery 表格插件可以让你创建各种各样的表格布局，表格布局是报纸和杂志中最常见的布局，现在的网站中也很常见，在这篇文章中，我向大家推荐25个jQuery 的表格插件，你可以任意控制表格的行和列，用文本和图片进行填充。我用了顶级的来形容这个些插件，我可以肯定你了解它们之后会觉得很酷。

1. Gridify

　　Gridify 是轻量级的 jQuery 插件，用来创建一个类似 Pinterest 图片加载网格插件。支持图像加载事件，支持窗口缩放事件，支持非常长的高度项，支持动态项宽度，支持动画 (CSS3 transition)。

2. Freewall

　　Freewall是一个跨浏览器和响应式的jQuery插件，以帮助您创建多种类型的网格布局：灵活布局，图像布局，嵌套网格，流体网格，Metro风格布局，类似于pinterest的布局...。此外还拥有漂亮的CSS3动画效果和回调事件。 Freewall是所有功能于一身的解决方案。可以为桌面，移动和平板创建动态的网格布局。

3. Responsive Equal Height Blocks

　　Responsive Equal Height Blocks是用JavaScript和CSS实现的。它实际上是把一上列表按每一行来展示，通过每一行中最高的条目来设置和其它条目的位置。

4. MatchHeight.js

　　MatchHeight.js 能使所有选定元素的高度正好相等。这是一个更强大的相同高度的插件，正确处理混合填充，边距，边框，框的大小，行，组。它通过在需要的时候自动更新图像处理和响应式布局。

5. Gridmanager.js

　　Gridmanager允许你在表格布局中创建、记录、更新、删除行和列，创建可编辑区域的网格布局，每一个网格可编辑定义大小和数量以及调整它的位置。GridManager需要jQuery、jQueryUI和Bootstrap 3.x，可选TinyMCE CKeditor。

6. S Gallery

　　S Gallery是一个jQuery图片集的插件，它在响应式的表格中展示这你的图片。它的灵感来自于Sony的产品，当一个条目被选中，界面中会出现选择前一个/后一个的按钮，你也可以通过点击其它位置回到整体的表格布局中。

7. Elastic Columns

　　Elastic Columns是一个轻量级响应式网格布局插件，可以非常容易的按照宽度值来定义网格，监测浏览器的大小自适应网格显示。

8. Mason.js

　　Mason.js是一个jQuery插件，巧妙地填充了网格的间隙。当创建一个网格时候，插件就开始计算这些间隙，然后就使用预定义的元素或是在网格中复制的内容来填充这些间隙。可以定义用于元素的大小，列/行的大小，断点的大小，或者布局是流动还是固定的。

9. rowGrid.js

　　RowGrid.js 是个非常小的，轻量级的 jQuery 插件，可以对图像进行直排，而且是响应式的，可以无限滚动阅览。

10. BttrLazyLoading

　　BttrLazyLoading 是一款响应式图像延迟加载的 jQuery 插件，允许用户的 web 应用延迟图片的加载直到图像滚动。BttrLazyLoading 提供四种不同的屏幕大小版本：手机 (<768px), 平板 (≥768px), 桌面 (≥992px) 和大型的桌面 (≥1200px)。

11. jqGrid

　　jqGrid 是一个用来显示网格数据的jQuery插件，通过使用jqGrid可以轻松实现前端页面与后台数据的ajax异步通信。

12. Masonry

　　Masonry是一款很好用的jquery网页布局插件，它可以去掉不同高度div之间的空白，让你的网页看上去更加的整齐、漂亮！

13. jQuery Shapeshift

　　jQuery拖拽插件Shapeshift，拖放可以重新排列在一个容器或甚至将在多个物品使容器变形。拖动元素周围可以改变他们的索引位置在它们的父容器。

14. jQuery Nested

　　Nested是一个帮助你创建多列的，动态的网格布局，和其它的类似的类库或者jQuery插件不一样，它帮助你去掉所有的间隙。使用这个插件它将帮助你扫描所有的间隙的尺寸，以便重新排序元素，这和其它的类库或者插件类似，但是Nested最后一步会帮助你缩放元素，以便消除所有的间距。

16. Wookmark jQuery Plugin

　　Wookmark jQuery plugin 是一个用来实现现在很流行的瀑布流的网页布局效果的 jQuery 插件。

17. jQuery Waterfall

　　jQuery Waterfall是用li标签制作多列瀑布流布局鼠标滚动页面图片无限加载效果。

18. Grid –A-Licious

　　Grid-A-Licious 是一个简单易用的 jQuery 插件，可用于创建响应式瀑布流布局，针对不同设备可自动适应宽度。你可以通过参数设置它的宽度以及动态显示时的速度、延迟等等，定制性是比较高的。

19. Gridster

　　gridster.js 是一个 jQuery 插件用来构建直观的可拖放的布局，支持多列布局，你还可以动态的添加和删除表格中的元素。

20. Gridly

　　Gridly是个网格式的拖放移位jQuery插件，这个插件交互不错，我们在拖动的时候会显示一些移动动画，效果很好看。

　　此插件还有其它特色功能，比如关闭、点击放大、增加模块等等。

21. College Plus

　　CollagePlus是一个jQuery表格插件，你可以定义图片之间的距离，通过CSS给它们加边框。

22. Griddy

　　Griddy是一个轻量级的插件，但是它能实现几乎所有的效果，很多属性是可选的，比如行数、行高、列数、列高、颜色等等……

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

24. Ingrid

　　Ingrid在数据填充的操作上做了很多的简化，看上去更接地气一些。

25. Jui_datagrid

　　jui_datagrid 是一个 Ajax 的 jQuery 表格插件，可用于操作表格数据，通过简单和强大的 API 进行主题定制、本地化支持等。

via：gbtags

原文：http://www.cnblogs.com/xiaochao12345/p/4128507.html

内容总结

以上是互联网集市为您收集整理的25个顶级的jQuery表格插件全部内容，希望文章能够帮你解决25个顶级的jQuery表格插件所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1214140.html

来源：【匿名】

【下一篇】学习php+jQuery+Ajax实现点赞效果的方法

更多 ►

【25个顶级的jQuery表格插件】教程文章相关的互联网学习教程文章

25个顶级的jQuery表格插件

jQuery 表格插件可以让你创建各种各样的表格布局，表格布局是报纸和杂志中最常见的布局，现在的网站中也很常见，在这篇文章中，我向大家推荐25个jQuery 的表格插件，你可以任意控制表格的行和列，用文本和图片进行填充。我用了顶级的来形容这个些插件，我可以肯定你了解它们之后会觉得很酷。1. Gridify　　Gridify 是轻量级的 jQuery 插件，用来创建一个类似 Pinterest 图片加载网格插件。支持图像加载事件，支持窗口缩放事件，支持...

jquery判断表格的第几列被双击【代码】

一.前提：　　表格的列是动态添加的代码如下：$("#tableId").on(‘dblclick‘, ‘tbody tr td:eq(3)‘, function(){//dosomethiing });dblclick 表示双击，tbody tr td:eq(3)表示第表格的第四列注意：eq是从0开始的（jquery），而在：nth-child是从1开始的（css3的选择器）原文：https://www.cnblogs.com/dengyongkang/p/8976544.html

jquery+easy ui 实现表格列头筛选【代码】

示例代码1、筛选的下拉<a href="javascript:void(0)" id="filterStatus" class="easyui-splitbutton" data-options="menu:‘#mm‘"onclick="javascript:void(0)">当状态</a><div id="mm" style="width: 100px;"><div data-options="name:‘ALL‘">全部</div><div data-options="name:‘1‘">成功</div><div data-options="name:‘2‘">失败</div></div>2、筛选事件　　　　　　　　　　　　　　$(‘#mm‘).menu({onClick: function...

jquery 版本的动态编辑表格三【代码】

<!DOCTYPE html> <html> <head><meta charset="utf-8"/><title>练习</title> </head> <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <style type="text/css">.user{color: #DFDFDF;}table {border: 1px solid black;/*修正单元格之间的边框不能合并*/border-collapse: collapse;width:600px;}table td {border: 1px solid black;width: 25%;}table th {border: 1px solid black;width: 25%;}tbody th {b...

支持10种格式的 HTML 表格导出 jQuery 插件【图】

HTML 表格导出 jQuery 插件可以帮助用户导出 HTML 表格到 JSON、XML、PNG、CSV、TXT、SQL、MS-Word、MS-Excel、MS-PowerPoint 和 PDF 格式。您可以轻松地设置字体大小，分隔符，导出类型等。您可能感兴趣的相关文章Web 开发中很实用的10个效果【附源码下载】精心挑选的优秀jQuery Ajax分页插件和教程12款经典的白富美型 jQuery 图片轮播插件让网站动起来！12款优秀的 jQuery 动画插件精心挑选的美轮美奂的 jQuery 图片特效插件立...

关于jquery简单操作简单表格【代码】

最近在摸索jquery中，想着学习过程中还是记下点自己的东西比较好，不管是日后自己查阅，亦或是对于他人有些许帮助。也是一件两全其美的事情了。下面我就简单贴上自己的html中重要部分了。具体实现了的内容有： 1. 光标附上表格隔行变色效果 2. 点击全选按钮，选中所有未选中项；或者全选时，取消全选 3. 选中项删除行操作jquery版本： jquery-3.1.1一，页面样式表与布局 <div class="tab-ope"><table><caption>数据管理</capti...

JQuery EasyUI 学习——Struts2与EasyUI DataGrid数据表格结合使用显示数据库数据【图】

因为EasyUI DataGrid只要取出后台传过来的一定格式的JSON数据，就可以在前台页面数据表格中，以一定形式显示数据库中的数据。此处，我们使用Struts2框架整合DataGrid，实现数据的显示。一、页面内容为了在页面中显示数据库中字段内容，需要定义一个table，通过EasyUI内部设计，自动显示数据，如下：<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib prefix="s" uri="/struts-tags" %> <% ...

使用jquery创建表格，添加、删除行【代码】【图】

最近搞前端，某页面功能中需要动态添加和删除表格行。比较常用的场景是通过一个添加按钮添加表格行，每一行都有一个删除按钮进行删除。谷歌了一下找到一个示例代码挺适合新手学习使用的。效果如下： HTML代码如下： 1<label>Please indicate the number of attendees in your group including yourself.2<select id="participants" class="input-mini required-entry"> 3<option value="1">1</op...

用JQuery实现表格隔行变色和突出显示当前行【图】

用JQuery实现表格隔行变色和突出显示当前行上源码<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>表格隔行背景和突出显示当前行</title> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <style type="text/css"> ...

jQuery之表格隔行变色【代码】

表格隔行变色示例：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>表格隔行变色</title><style type="text/css">div, span, p {width: 140px;height: 140px;margin: 5px;background: #aaa;border: #000 1px solid;float: left;font-size: 17px;font-family: Verdana;}div.mini {width: 55px;height: 55px;background-color: #aaa;font-size: 12px;}div.hide {display: none;}#data {width: 600px;}#data, td...

【JQuery插件】把网页或某div或table表格内容转为图片并下载【代码】

今天介绍一个非常好用的JQuery插件，它可以把网页或某个div或table表格内容转为图片并下载保存。这个插件叫 html2canvas ，它只有一个js文件 html2canvas.js ，而使用起来也非常简单。先看一个实例html代码，后面再介绍如何使用。<html><head><script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script src="html2canvas.js"></script></head><body><div id="html-content-holder" style="background...

小谷实战Jquery(二)--可以编辑的表格【代码】

今天实现的是一个表格的例子,通过获取表格的奇数行,设置背景色属性,使得奇偶行背景色不同.这个表格可以在单击时编辑,回车即更改为新输入的内容;ESC还原最初的文本.表格的实现思路很清晰,只是在实现的过程中会出现一些小bug.通过jQuery函数就可以一一解决.下面看下HTML代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www....

jquery 表格行计算【代码】

表格行计算总金额：function jisuanTrJinE(obj){var curTab = $(obj).closest("table");var curTr = $(obj).closest("tr");var curTabId = curTab.attr("id");var zongJinE = 0;//alert(curTabId);var danjia = curTr.find("input[class=‘danjia‘]").val();var shuliang = curTr.find("input[class=‘shuliang‘]").val();if(danjia==""){ danjia=0;}if(shuliang==""){ shuliang=0;} zongJinE = danjia*shuliang;curTr.find("...

JQuery动态操作表格【代码】

新人，小白一枚，刚刚参加工作，所以会在这里记录一些遇到的问题。　　最近要做的东西，是对一个表格动态的添加行，删除行，并且对表格中内容进行非空验证。<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title><script src="scripts/jquery-1.10.2.js"></script><script type="text/javascript"> $(function () { //获取表格的...

jquery动态表格，动态添加表格行【图】

转载收藏于：https://www.cnblogs.com/zhangqs008/archive/2013/05/09/3618459.html 效果图： Html：<html><head> <title>jquery表格操作</title> <script language="javascript" src="jquery.table.tr.js"></script> <style type="text/css"> table { border: black solid 1px; border-collapse: collapse; } td { border: black solid 1px; ...

首页 / JQUERY / 25个顶级的jQuery表格插件

25个顶级的jQuery表格插件

内容导读

内容图文

内容总结

内容备注

内容手机端

【25个顶级的jQuery表格插件】教程文章相关的互联网学习教程文章

表格 - 相关标签

插件 - 相关标签

JQUERY - 技术教程分类

JQUERY - 最新教程

JQUERY - 最热教程