2KB项目,专业的源码交易网站 帮助 收藏 每日签到

12 款不容错过的 jQuery 表格插件

  • 时间:2019-05-17 12:57 编辑:2KB 来源:2KB.COM 阅读:463
  • 扫一扫,手机访问
  • 分享
摘要: 英文原文:12
英文原文:12 Amazing jQuery Tables

表格标签是最原始的HTML标签之一。已经有一段工夫,表格被普遍的使用于寄存页面的内容和页面结构。值得光荣的是,如今根本上不运用表格实行结构了(HTML电子邮件除外)。现在,当你需求运用表格的时分,大大多数设计表格的初志是为了显示表格的数据。

作为老的HTML标准的一部分,表普通不合适以Mobile端为中间的设计,也不供给任何进步前辈功用。表根本上只显示你的数据,并作为一些用例,这无疑是很好的。

但是,凡是你更盼望表格是更契合现有趋向的,不管是经过响应式的结构来充沛支撑Mobile真个生态系统,或供给额定的功用,如搜刮、过滤、排序或其他进步前辈的功用。

在这篇文章中,我们将经过一系列功用弱小的jQuery插件,来拓展或进步你创立的表格。这些插件将涵盖纤细的款式变更及功用丰厚的处理计划等。

Dynatable

dynatable是一个使人难以相信的弱小且深化的表格插件,详细来讲,它发明了很多弱小的功用,如过滤、排序和分页。dynatable专注于开发职员,教你怎么把持表的出现,怎么经过过滤和搜刮全面的为你供给了一个高度可定制的处理计划。

假如你正在寻觅一款插件,让你了解怎么把持这一切的运作,那末这款插件是绝对值得一看的。假如你刚接触JavaScript/jQuery,看一些例子或许作者的文档,很轻易让你读不下去。但是,这款插件的一切都可以设置,而且仅经过运用默许设置装备摆设就能够完满的任务,所以完整没有需要进一步实行定制。

可是,使人遗憾的是,该插件绝对比较陈腐(比来一次首要的更新是在2014)。现有的几种提交方法,包含来自社区的介入,很难辨别插件能否依然在努力开发(这可能会影响你获得协助或供给奉献)。除此以外,它是一个很好的插件,供给了大量的功用,此中的大部分功用在很多网站上都表示的很好。

官方网址
Github

Bootstrap 表格

现在,CSS 框架仍然很受欢送,而 Bootstrap 更是此中的表表者。Bootstrap 的表格插件功用相当完全,它即插即用,可让你用起码的开发量来取得它的一切功用。

此插件的功用和运用的范畴也相当不错。用它来重写表格可让它们更具有呼应性和更美观。别的,还可以用它来添加一些新功用,例如,过滤、搜刮、前提显示(可以暗藏某些列让表格看起来更简练)和其他一些小功用,例如,导出 CSV 和 JSON。

以上示例页面概述了这些元素的设置装备摆设方法。你需求花点工夫去浏览文档,不外假如最初可以取得一个功用完全屌炸天的表格,这是相当值得的。

你需求运转 Bootstrap 的项目或许在项目中有选择地参加 Bootstrap 的 CSS 和 JS 文件。 这个插件可以经过表格标签的 data-* 属性来设置装备摆设(只需求设置装备摆设你需求的功用和选项)或许经过传统的 JS 设置装备摆设和挪用。 假如你的项目曾经是基于 Bootstrap 的项目,这是一个很好的Start。假如它还在用 Bootstrap 之外的框架,你就需求花点工夫好好推敲推敲了。

这么多年来,这个插件曾经有数十个奉献者和不计其数次提交。 这是一个在不时开展的十分有性命力的开源项目。固然如今很难说它会不会被扩大到 Bootstrap 4 (它今朝需求 Bootstrap 2/3) 中去,可是依照今朝来看它继续保护延续下去的机率仍是很大的。

假如你还在找一个汗青长久而且还在不时迭代(意味着非常多你想象到的 BUG 都曾经被处理了)的插件,那末这个插件应当很合适你。 你也能够在这里看看一些开发者供给的风趣又有效的“扩大”。

官网网址
Demo

Fixed Header Table

Fixed Header Table 做的工作正如你所想:在表格顶部显示一个牢固的列头,如许在转动的时分就不必随时去找列信息了。

这个插件基于通俗的 table 标签任务。它会依据 <thead> 或 <tfoot> 标签来创立表头,此中 <tfoot> 不是必需的。另有一些其它的选项,比方将表头克隆到表尾的地位,和显示/暗藏表格。总的来讲,这个插件的目标很容易,经过唯一的几个元从来下降庞杂水平。假如你需求款式和功用的话,需求手工添加。

假如你的处理计划要供给其它功用,那末其它库可能更适宜。别的,请留意这是一个旧的插件(回到211年),所以最好假定开发者不会努力更新或许扩大这个插件。由你本人决议能否高兴的运用传统插件。

网站/演示

DataTables

这个高度灵敏的 jQuery 表格的目的是扩大根底的 HTML 表格,从而让它们更直观、更有效。

DataTables 是一个被普遍运用的插件,它为你的表格供给了额定的功用,例如:排序、过滤、分页和自定义主题。


这个插件如你所愿,开箱即用,它也供给了一个全面的文档,如许你就能够把持表格的模样、觉得和操作。

插件的大量特征和可定制性处理了开发者存眷的扩大性。这个插件不只供给几个选项,网站上另有牢靠的文档和强健的论坛系统,这是强有力的支撑。

集成 CSS 框架、改动插件款式的才能使人印象深入。它兼容 Bootstrap,Foundation,jQuery UI 和其它组件。其他方面也是不贰之选,如拜访事情,一个 API 系统,经过 AJAX 获得数据静态构建 DataTables

插件的另外一个方面是他们供给额定支撑。大大多数插件供给某品种型的支撑,如经过 GitHub bug 陈述或间接联络开发职员,你取得经过购置一个答应证可以取得他们供给的论坛支撑。固然有点人可能会感到经过领取来失掉支撑使人厌恶,可是经过察看论坛,仿佛大大多数问题都能疾速得以处理。

关于支撑的话题,假如你在为一个企业系统整合数据表或许一些关键Task感兴味,你可以购置企业答应证,然后开发商就能够给你供给间接技术支撑,拜访恳求的功用。

整体而言,它是一个风趣的插件,假如你需求它,它供给了以开发者为中间的功用与可选元素的支撑和协助。

网站 / 演示

其它翻译版本 (1) 加载中

jQuery HighchartTable

HighchartTable 用于从表格数据静态创立可交互的Highcharts图表。

这个插件在你的表格元素上放置了一系列 data 属性。它应用 Highcharts 在一个静态的/可交互的图表中衬着你的表格数据。

它的网站展现了一切选项,并为他们每个供给了 JSFiddle 演示。你可以把持图形、色彩、标签和其它交互元从来知足你的需求。

有一点需求思索的是,这个插件实践上并没有做图表转换任务,这个工作留给 Highchars 去干了。也就是说,你得引入它们的 JS 和 CSS 才干正常任务。别的,固然这个插件有一些活动/开发,但看起来它的开发者不怎样在 Github 上活泼。也就是说,Highcharts 假如更新或许参加了新的特征,就得思索这个插件能否会更新以支撑新版本的 Highcharts。

别的一个需求思索的要素是 Highcharts 用于贸易目标其实不收费。你需求一个受权(假如你在为某个客户开发,你将受此限制)。公道地说,Highcharts 相当美观而且供给了一堆选项,所以假如你经过它取得收益,领取一点公道用度也是应当的。

网站
演示
GitHub

Tabulator

Tabulator 是一个用于静态创立可交互,可扩大表格的 jQuery 插件。它可使用 HTML、JavaScript 数组、Ajax 数据源或许 JSON 数组来创立表格。Tabulator 有丰厚的特征,如挑选、排序、调剂列宽、智能加载表数据、分页和表内编辑等。

Tabulator 呈现这个列表上是由于它把详实的文档,多样的特征,灵敏可伸缩联合在一同成为一个全体。其网站上列出了它的一切功用,有易于了解的文档,并且文档中嵌入了很多示例。即便文档长而庞杂,你也可从中了解到关于运用这个插件所需求了解的一切。

这个插件具有扩大性,这意味着你可以以你想要的方法实行特性化定义。其扩大性答应在表头的下方组合一些列,在鼠标移到数据上方时显示一个容易的提醒,对行的内容分页,或许加一些其它特殊好的功用来供给用户体验。关于开发者来讲,这是一个十分棒的任务,我以之前还用过几回。

Tabulator 的开发者在 GitHub 上十分活泼,每几个月就会有一堆提交,修复大量 BUG。他如许做曾经一年多了。这个插件的 2.7 版是在 2016年10月宣布的,可以以为这个插件会跟着工夫推移不时开展,不会死掉。这多是你选择表格插件时要思索的一个主要的要素,由于在运用插件的时分可能会需求更新或许碰到 BUG。

网站
演示
GitHub

其它翻译版本 (1) 加载中

FancyGrid

FancyGrid 经过额定的功用和特征加强规范表格。假如你需求一个容易、轻量的表格,或许一个具有过滤、排序和分页功用的表格,FancyGrid 都可以经过选项设置装备摆设来为你创立,并为你的用户带来极好的体验。

有几种办法运用 FancyGrid,怎么选择取决于你想怎么运用这个插件。你可使用它来为表格供给款式,供给新的功用,或许与 Highcharts 整以供给数据可视化。

FancyGrid 的文档概述了你可以定制的各类表特征,包含分页、分组、自定义事情、数据验证等。有一堆文档 — 够你看的 — 不外它们供给了一些疾速的示例让你疾速运转。运用它默许的设置运转就很好了。

另有一件风趣的工作,这个插件没有在 GitHub 上建库。你可以避免费从他们的网站高低载,用于个人用处。可是假如需求用于贸易用处,需求购置答应证。运用 Highcharts (2D 图表) 也需求答应,因而你可能要思索能否为你的项目购置它们。

另外一点也很风趣:我发明他们的网站常常加载失败(有时分会加载失败,有时分需求花些工夫来生成示例)。这可能只是一个自力的问题,但却值得留意(没人爱好长工夫等候加载文档/示例)。另外,网站对Mobile装备的支撑欠安,并且没有相干文档[译者注:手机亲测无压力,不晓得作者碰到了甚么鬼]。很难说是否是由于这个插件在设计时就疏忽了敌手机的支撑或许只是文档忘了更新。假如你正在寻觅一个对Mobile装备支撑极好的插件,那末其它插件可能更适宜。

总的来讲,FancyGrid 是一个相当全面的插件,可以经过大量的选项实行特性化定制,用于你的网站也是个不错的选择。

网站/演示

jQuery KingTable

KingTable 是一个庞杂的,面向开发职员的表格处理计划,您可以应用它来创立庞杂的搜刮/过滤前提,完美的帐户,项目管理或其他大量面向数据的活动。

与其他插件分歧,KingTable 完整托管在 GitHub 上,有一个专门的Wiki页面,描绘了插件的一切设置和用例。

在特征方面,插件支撑主题(但整体需求本人依据需求定制),和几个过滤器和事情,它使您的数据管理更轻易。假如你爱好创立本人的过滤器和数据机制,或假如你想要更好的把持你的表格怎么操作,它会十分合适你。假如你正在寻觅一个供给根本设置的插件,那末其他插件可能更适宜。

Mobile呼应是值得会商的另外一个要素。该插件不会对Mobile装备做任何特别操作,因而您的表格将像凡是一样呼应(即横向转动或在较小装备上紧缩列),但这些需求你手动实行调剂,插件不会为你处置。响应的,KingTable 为传统键盘用户供给了很棒的桌面支撑,支撑 Tab 键,经过摆布键(或A / D)键实行分页把持和其他小改良。

KingTable曾经任务了一段工夫,有一些提交和更新。它可能小于这里提到的一些其他插件,但它依然是一个强健、有效的插件,您可能会期近将到来的项目中运用它。

官方网站/GitHub

文档 (Wiki)

容易演示/具体演示

Stackable.js

Stackable.js 是一个以Mobile为中间的 jQuery 插件,经过调剂表格结构使其更合适较小装备。

与添加额定功用的其他插件分歧,stackable.js 仅确保在Mobile装备上,您的表格元素是可用的。 容易起见,它将每一个读入的元素以键值对的方法陈列输出。

它只要几个选项,文档有限,但它的全体设计都是依照规范表格元素,使之更合适Mobile装备。

开发职员在过来一年不断保护和调剂插件,所以它在精益求精更新。 但是,因为它是一个绝对比较小,比较根底的插件,功用上不会有太大变更。 假如你正在寻觅一个庞杂的,全面的插件给你额定的功用,你可以在我们的列表中测验考试其他几个。

GitHub

Website/Demo

其它翻译版本 (1) 加载中 本文中的一切译文仅用于进修和交换目标,转载请务必注明文章译者、出处、和本文链接。 2KB翻译任务按照 CC 协议,假如我们的任务有进犯到您的权益,请实时联络我们。


2KB项目(www.2kb.com,源码交易平台),提供担保交易、源码交易、虚拟商品、在家创业、在线创业、任务交易、网站设计、软件设计、网络兼职、站长交易、域名交易、链接买卖、网站交易、广告买卖、站长培训、建站美工等服务

  • 全部评论(0)
资讯详情页最新发布上方横幅
最新发布的资讯信息
【计算机/互联网|】Nginx出现502错误(2020-01-20 21:02)
【计算机/互联网|】网站运营全智能软手V0.1版发布(2020-01-20 12:16)
【计算机/互联网|】淘宝这是怎么了?(2020-01-19 19:15)
【行业动态|】谷歌关闭小米智能摄像头,因为窃听器显示了陌生人家中的照片(2020-01-15 09:42)
【行业动态|】据报道谷歌新闻终止了数字杂志,退还主动订阅(2020-01-15 09:39)
【行业动态|】康佳将OLED电视带到美国与LG和索尼竞争(2020-01-15 09:38)
【行业动态|】2020年最佳AV接收机(2020-01-15 09:35)
【行业动态|】2020年最佳流媒体设备:Roku,Apple TV,Firebar,Chromecast等(2020-01-15 09:31)
【行业动态|】CES 2020预览:更多的流媒体服务和订阅即将到来(2020-01-08 21:41)
【行业动态|】从埃隆·马斯克到杰夫·贝佐斯,这30位人物定义了2010年代(2020-01-01 15:14)
联系我们

Q Q: 7090832

电话:400-0011-990

邮箱:7090832@qq.com

时间:9:00-23:00

联系客服
商家入住 服务咨询 投拆建议 联系客服
0577-67068160
手机版

扫一扫进手机版
返回顶部