jquery表校验_12个惊人的jQuery表

jquery表校验

这篇有关jQuery Tables的热门文章已于2016年11月10日更新,以反映jQuery table插件的当前状态。

表格是HTML中最古老的元素之一。 曾经有一段时间,表格被广泛用于内容和Web布局。 值得庆幸的是,基于表的布局基本上已经死了(不包括HTML电子邮件),如今当您需要一个表时,它的目的就是为了创建表数据而最初创建该表。

作为HTML规范的较旧部分,表通常不适合以移动设备为中心的设计,也不提供任何开箱即用的高级功能。 表基本上只是显示您的数据,对于某些用例来说,这很好。

但是,通常您会希望表变得更现代,或者通过证明响应式布局或通过提供其他功能(例如搜索,过滤,排序或其他高级功能)完全支持移动生态系统。

在本文中,我们将通过一系列jQuery驱动的插件来创建,扩展或增强您的表。 这些插件的范围从轻改版到功能齐全的解决方案。

可动的

Dynatable是一个功能强大且深入的表格插件,除其他功能外,它还创建具有强大功能(例如过滤,排序和分页)的表格。 Dynatable专注于开发人员,使您可以控制表格的呈现方式,过滤和搜索的操作方式,并总体上为您提供高度可定制的解决方案。

一张显示Dynatable如何运作的表格

如果您正在寻找可让您控制一切工作方式的插件,那么绝对值得一看。 如果您是JavaScript / jQuery的新手,那么其中的一些示例和/或作者的文档可能会让您大吃一惊。 但是,通过使用默认配置,所有内容都可以设置并完美运行,因此无需进一步自定义。

一件令人惊讶的事情是该插件相对较旧(其上一次主要提交时间为2014年)。 在此过程中,已经进行了几次提交,并且得到了社区的参与,但是很难判断插件是否仍在积极开发中(这可能会影响您是否想获得帮助或贡献)。 除此之外,它还是一个不错的插件,并提供了很多功能,其中大多数功能都可以在任何网站上正常工作。

网站
Github

引导表

CSS框架仍然很流行,并且Bootstrap就在那里。 Bootstrap Table插件被用作功能丰富,轻巧的即插即用表插件,该插件以最少的开发工作即可提供您所需的所有功能。

这个插件的功能和范围相当令人印象深刻。 您可以使用它来重新设置表格样式,使其具有响应性和美观性,此外还可以添加新功能,例如过滤,搜索,有条件地显示列(例如,为简单起见可以隐藏列)以及其他有用的花絮,例如导出到CSV和JSON。

运行中的Bootstrap表示例

示例页面概述了如何配置这些元素 。 您必须花一些时间来了解文档,但是当结果是一个很棒的表且具有这些功能时,就值得这么做。

您要么需要运行一个Bootstrap项目,要么可以选择将Bootstrap CSS和JS文件添加到您的项目中。 该插件可以通过表上的标准HTMTL data属性(概述所需的功能/选项)来工作,也可以通过更传统的JS方法来工作。 如果您已经在Bootstrap项目中,那么这是一个很好的开始。 如果您正在从事除Bootstrap以外的其他工作,则需要权衡利弊。

多年来,该插件已进行了广泛的维护,包括数十名贡献者和数千次提交。 这是一个持续不断发展的开源项目。 很难说它是否会扩展到Bootstrap 4中(因为它需要Bootstrap 2/3),但是目前看来,它将继续保持下去是一个很好的选择。

如果您正在寻找一个在历史上有出色支持并不断迭代的插件(并且通过扩展,您会认为它们已经消除了大多数错误),那么此插件可能是您的最佳选择。 您还可以在这里查看一些开发人员为此所做的有趣的“扩展”

网站
演示版

固定表头

固定标头表完全按照您的预期进行操作:它在表的顶部显示一个固定标头,因此在滚动时不会丢失对列的跟踪。

免费学习PHP!

全面介绍PHP和MySQL,从而实现服务器端编程的飞跃。

原价$ 11.95 您的完全免费

固定头jQuery插件示例表

该插件可与标准HTML表标记一起使用。 它将使用您的<thead>或可选的<tfoot>标记为表创建一个固定的标题。 还有其他一些选项,例如能够将页眉克隆到页脚并可以选择显示/隐藏表。 总体而言,此插件的用途很简单,并且几乎没有什么元素可以最大程度地减少复杂性。 如果需要,将需要手动添加样式和功能。

如果您正在寻找提供额外功能的解决方案,那么其他库可能更合适。 另外,请注意,这是一个较旧的插件(早于2011年),因此可以放心地认为开发人员不会积极更新或扩展此插件。 如果您对使用旧版插件感到满意,则取决于您。

网站/演示

数据表

这个高度灵活的jQuery表旨在扩展基本HTML表,以使其更加直观和实用。

DataTables是一个扩展插件,用于为表提供其他功能,例如排序,过滤,分页和自定义主题。

带有搜索,分页和条目数的jQuery DataTables示例图像

该插件可以像您期望的那样直接使用,但是它还提供了大量的文档,因此您可以控制表格的外观,感觉和操作。

广泛的功能和自定义使其成为针对开发人员的扩展。 该插件不仅提供多种选择,而且在其站点上均提供可靠的文档和强大的论坛系统

与CSS框架集成以更改插件样式的功能相当令人印象深刻。 它与Bootstrap,Foundation,jQuery UI等兼容。 其他方面,例如通过AJAX访问事件,API系统和动态数据,使DataTables成为可靠的选择。

插件的另一方面是它们提供高级支持。 大多数插件将通过GitHub错误报告或通过直接与开发人员的联系获得某种类型的支持,但是这些人通过他们的论坛提供支持,您可以通过购买其许可证之一来访问它们。 尽管有些人可能会想到支付不受欢迎的支持费用,但通过查看论坛,看来大多数问题都已相对较快地得到解决。

关于支持主题,如果您有兴趣将DataTables集成到企业系统或某些关键任务中,则可以购买企业许可证,这些许可证为您提供了来自开发人员的直接支持并可以访问请求的功能。

总体而言,这是一个有趣的插件,提供了非常以开发人员为中心的功能,并在需要时提供了可选的支持和帮助元素。

网站/演示

jQuery HighchartTable

HighchartTable是一个有用的插件,可以通过从表数据动态创建Highcharts交互式图表来工作。

具有提取的Highchart的简单表格元素

该插件在您的表元素上放置了一系列data属性。 它利用Highcharts将表数据呈现为动态/交互式图表。

它的网站展示了所有选项 ,并为每个选项概述了一个简单的JSFiddle,以便您了解它们的工作方式。 您可以控制图形,颜色,标签和其他交互式元素的类型以满足您的需求。

要考虑的一件事是,该插件实际上并未进行图表转换。 这是由Highcharts处理的,这意味着您还需要包括其JS和CSS文件才能使其正常工作。 另外,尽管此插件有一些活动/开发,但看起来它的开发人员在GitHub上并不过分活跃,这意味着如果针对Highcharts推出了新的更新或功能,则由他们决定是否更新此插件以支持它。 。

另外要考虑的另一个因素是Highcharts并非免费用于商业用途。 要合法使用它,您需要一个许可证(如果您是为客户开发的,则属于该类别)。 公平地说,Highcharts非常漂亮,并提供了大量的选择 ,因此,如果您要从中获利,则有必要付费使用该库。

网站
演示版
的GitHub

制表符

Tabulator是一个jQuery插件,用于从HTML,JavaScript数组,Ajax数据源或JSON数据动态生成交互式可扩展表。 制表器具有多种功能,例如过滤,排序,可调整的列宽,表格数据的智能加载,分页和直接表格输入编辑。

展示如何使用Tabulator创建交互式表

制表器之所以在此列表中,是因为其深入的文档,其各种功能以及整体的灵活性。 它的网站概述了它可以提供的所有功能,以及与多个内联示例一起使用的易于理解的文档。 即使文档很长且涉及很多,它也提供了启动和运行该插件所需的一切。

该插件的可扩展性意味着您可以按照自己的方式自定义表格。 您可能希望将表中的行分组到标题下,创建简单的工具提示以解释有关悬停的数据,对行内容进行分页,或利用其他一些出色的功能来帮助改善用户体验。 对于开发人员来说,这是一个很棒的工具,而我之前已经使用过几次。

Tabulator的开发人员在GitHub上非常活跃,每隔几个月更新一次,并在一年中进行大量提交和错误修复。 该插件的2.7版于2016年10月发布,可以安全地假设该插件本身将随着时间的推移而不断发展。 这对于您选择表插件时可能是一个重要因素,因为有时您可能需要支持或遇到错误。

网站
演示版
的GitHub

花式网格

FancyGrid通过附加的功能为您的标准表提供动力。 无论您是想要一个简单,样式简单的表,还是具有过滤,排序或分页功能的表,FancyGrid都可以为您的用户提供出色的表体验。

展示FancyGrid的示例双网格图像

多种使用Fancy Grid的方法 ,具体取决于您要如何使用插件。 您可以使用它来设置表格样式,提供新功能或将其与Highcharts集成以提供数据可视化。

FancyGrid的文档概述了您可以自定义的所有各种表功能,包括分页,分组,自定义事件,数据验证等。 这里有大量的文档-足以使您不堪重负-但它们提供了几个快速的示例来帮助您快速入门和运行。 它开箱即用,默认设置也很好。

需要考虑的一个有趣事情是,该插件没有开放的GitHub存储库。 您可以从他们的网站免费下载该文件供个人使用,但要用于商业用途,则需要购买许可证才能使用。 Highcharts(用于2D图表)还需要获得使用许可,因此您需要考虑是否愿意为项目购买这些元素。

另一个有趣的地方:我发现加载他们的网站时遇到了麻烦(有时加载失败,或者生成示例需要一些时间)。 这很可能只是一个孤立的问题,但值得注意的是(因为没有人喜欢等待文档/示例加载的年龄)。 另外,移动支持是偶然的,没有记录在案。 很难说这是否是因为该插件从来没有设计来适应手机,或者只是文档不是最新的。 如果您希望通过移动支持获得无缝的,很棒的餐桌体验,那么其他插件可能更合适。

总体而言,FancyGrid是一个相当全面的插件,具有广泛的自定义选项,您可以为您的网站利用这些选项。

网站/演示

jQuery KingTable

KingTable是一个复杂的,以开发人员为中心的表格解决方案,您可以利用它创建复杂的搜索/过滤条件,非常适合帐户,项目管理或其他以数据为重点的活动。

KingTable jQuery表插件示例

与我们的某些其他插件不同,KingTable完全记录在GitHub上, 带有专用的Wiki页面 ,概述了该插件的所有各种设置和用例。

从功能上讲,该插件提供了主题支持(但总体目标是根据您自己的需要对其进行自定义),以及几个您可以加入的过滤器和事件,以简化数据管理。 为了透明起见,此插件感觉非常像是一个专注于开发人员的插件,假设您可以轻松创建自己的自定义过滤器和数据机制 。 如果您正在寻找提供基本设置的插件,那么其他插件可能更合适。 但是,如果您想严格控制表的运行方式,那么这是一个很好的解决方案。

移动响应能力是另一个值得讨论的元素。 该插件对移动设备没有任何特殊作用,因此您的表将像往常一样响应(例如,侧向滚动或压缩较小设备上的列)。 您可以自己进行调整,但这不是插件可以为您处理的事情。 不过,在类似的主题上,KingTable为传统键盘用户提供了出色的桌面支持,其中包括标签支持,通过左右键(或A / D)进行的分页控制以及其他一些小的改进。

KingTable已经工作了一段时间,并且在一年中进行了多次提交和更新。 它可能比这里提到的其他一些插件要小,但是它仍然是一个健壮而有用的插件,您可能会在以后的项目中发现它。

网站/ GitHub

说明文件(Wiki)

简单演示 / 复杂演示

Stackable.js

Stackable.js是一个以移动设备为中心的jQuery插件,旨在通过调整较小设备的布局来使您的表移动友好。

桌面和移动jQuery Stackable的并排比较

与其他添加了附加功能的插件不同,stackable.js仅用于确保表格元素在移动设备上有用。 为了简单起见,它将每行条目一个接一个地堆叠在一起,键/值元素并排列出。

只有几个选项,文档有限,但其全部目的是将标准表元素转换为对移动设备更友好的内容。

在过去的一年中,开发人员一直在维护和调整插件,因此它看起来不像旧版插件。 但是,由于它是一个相对较小/基本的插件,因此我不希望即将有太多功能更改。 如果您正在寻找一个复杂的,功能全面的插件来为您提供其他功能,则最好尝试我们清单上的其他一些插件。

的GitHub
网站/演示

jQuery稳定

该插件可以使您的表具有更好的移动响应能力,将每行条目转换为一系列li项,以改善布局及其可滚动性。

桌面和移动设备上jQuery ReStable的比较图

就像stackable.js一样,此插件旨在使您的表更加移动友好。 在小屏幕显示器上查看时,该插件通过调整每行的布局来工作。 它将每一行的列堆叠为另一列,使其易于阅读。

该插件本身仅适合移动设备的调整:它没有添加任何功能或没有任何实际选项可配置; 这是一个简单的拖放样式插件。 只要您HTML标记正确无误,并添加一些基本的jQuery来启动所有内容,它就会自动整理。

ReStable是一个很小的插件,因此它在GitHub上有一些提交。 这不是一个社区/团队项目,它本身很好,但是如果您需要帮助的支持,则可能需要考虑这一点。 像大多数较小的项目一样,您应该“按原样”使用它,并希望取得最好的结果。

网站/演示
的GitHub

脚步表

FooTable是一个受Boostrap启发的表格扩展插件,可提供搜索,过滤和其他功能以增强表格。

一个简单的jQuery FooTable

FooTable可能看起来像我们之前看过的Boostrap表,但是与FooTable的不同之处在于它可以与Boostrap一起使用,也可以不与Boostrap一起使用,这意味着不需要包含任何引导文件即可启动和运行。

该插件支持过滤,分页,排序和内联编辑。 当所有这些功能一起使用时,可以为您提供一张不错的表,您可以将其用作前端表编辑解决方案。

该网站概述了您可以使用的各种设置,但是FooTable专用文档可在其中找到大部分所需内容。 首先,该文档非常注重开发人员,并假定您熟悉事件,设置和其他深入的元素。 如果您正在寻找一个既可以用作简单的即用型激活又可以自定义的简单插件,那么这是一个不错的选择。

FooTable是一个长期的标准项目,在数十个贡献者中进行了数百次提交。 有持续的活动和改进。 如果您正在寻找经过测试,迭代和改进的插件(具有利用一组熟练的撰稿人的能力),那么此插件可能对您来说是完美的。 该插件的版本3进行了全面的修改,因此您可能会发现偶发的错误/问题,但是从我所看到的情况来看,它几乎不需要任何配置即可工作。

网站/演示
的GitHub

Tabella.js

Tabella是一个动态表格生成插件,致力于提供触摸/滑动功能以轻松滚动长/复杂表格。

使用的Tabella.js示例

与其他插件不同,您可以使用Tabella生成表。 您选择要用作表容器的元素,然后将数据作为对象提供(概述标题和列值)。 如果此插件可以获取原始JSON数据或将其传递到现有表中以进行抓取和呈现,那将是很好的选择,但是总体而言,它运行良好,为您提供了适合移动设备使用的表。

如果您的主要目标是使长表响应,那么此插件将在视觉上简单但可交互的程序包中提供解决方案。

自2015年以来,Github上的插件回购未见任何动作,但考虑到其基本功能集,这完全可以。 如果您需要自定义它或需要支持,则可能需要自己照顾自己,但这在较小的插件中是可以预期的。

如果您想要一些花哨的东西来确保桌子可以在手机上使用,那么绝对值得一看。

的GitHub
网站/演示

结语

这些只是您可以在项目中使用的一些插件,用于扩展和改进表的功能和外观。 无论您是只对简单样式感兴趣,还是需要其他功能(例如搜索,过滤,列排序,Ajax / JSON加载),都有一个jQuery插件可简化您的生活并改善用户体验。

您还使用其他基于表的插件吗? 如果您使用了上面未列出的出色表格插件,我们很乐意收到您的来信。

最后,如果您想提高自己JavaScript技能,请查看我们的JavaScript书库

翻译自: https://www.sitepoint.com/12-amazing-jquery-tables/

jquery表校验

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值