在几秒钟内根据任何 JSON 数据创建动态表

本文由Stephan Max和Simon Codrington进行了同行评审。感谢所有 SitePoint 的同行评审者使 SitePoint 内容达到最佳状态！ Play Next Unmute Current Time 0:05 / Duration 2:00 Fullscreen Backward Skip 10s Play Video Forward Skip 10s 服务员正在展开桌子 如果您只是尝试布局一些基本数据，那么标准 HTML 表格可能会很棒，但如果您想从表格中查找更多信息，该怎么办？如果您需要从外部 API 获取数据，使您的表格可排序或可编辑，那么您将需要一些功能更强大的东西。 如果这听起来很熟悉，那么Tabulator就是适合您的库。 Tabulator 是一个轻量级的 jQuery UI 插件，旨在使构建复杂的交互式表格变得轻而易举，只需使用几行 JavaScript，您就可以将几乎任何数据源转换为格式精美的交互式表格。

在本教程中，我将带您了解创建第一个制表器的基础知识，然后扩展一些可用于向表格添加额外功能的选项。 构建你的第一个制表机 Learn to Code with JavaScript 让我们从创建一个非常简单的表开始。 由于 Tabulator 是一个 jQuery 小部件，您需要包含jQuery和jQuery UI库，无论是来 中国海外亚洲号码数据 自本地源还是您选择的CDN 。 您需要获取 Tabulator 库的副本，并将tabulator.css和tabulator.js文件包含在您的项目中。 <创建一个<div>元素来保存表格： <div id="example-table"></div> 让我们用一些 JavaScript 将该元素转换为制表符： $("#example-table").tabulator(); 现在你已经有了一张可以正常使用的桌子！ 好吧，我们还没有完全做到这一点。为了完成我们的表，我们需要定义列并加载一些数据。



定义列 为了定义表的布局，我们需要提供有关其每列的一些信息。 我们通过将列定义数组传递给 Tabulator 构造函数来实现此目的。数组中的每个对象代表表的一列，并包含其设置参数大量可用的列参数，在本演示中我们将介绍其中的一些： title –必需– 将显示在列标题中的标题 field –必需– 数据数组中列的键 align – 列的文本对齐方式（左|中|右） width – 列宽（如果未设置，系统将确定最适合的宽度） sortable – 切换用户是否可以按列对数据进行排序 sorter – 如何对列中的数据进行排序（默认为字符串） formatter – 如何格式化列中的数据 （默认为字符串） onClick – 当用户单击列中的单元格时的回可见– 显示或隐藏列 将数据加载到表中 构建新制表器的最后阶段是加载一些数据。有多种选择，我们将在这里简要介绍每一种。