更新狂欢
我很高兴宣布我们对 DataTables 扩展和网站进行了一系列重大更新,这标志着整个项目的重大进步。已经筹划和撰写了数月,因此我们终于能够全面分享更新内容,真是无比激动。
此版本的重点是连贯性 - 主要在于如何初始化扩展以及如何呈现 API,这些都与 DataTables 初始化选项和 API 结构融为一体。样式也十分关键,现在 DataTables 和其所有扩展全面支持四个样式框架(更多正在筹划中)
- DataTables 自身样式
- Bootstrap
- Foundation
- jQuery UI
在本文中,我将对更新和新发布进行总结,在未来几周的其他文章中,将进一步详细撰写更新内容(有很多新功能!)。
网站
作为实现 DataTables 及其扩展一致性这一目标的一部分,DataTables 网站进行了更新。提供了新的下载生成器和更新的参考部分。
下载生成器
当您 下载 新软件时,您可能会注意到第一个变化。提供了一个新的下载生成器,可让您使用单击式界面选择要使用的软件。产生的文件能够在本地下载,或托管在 DataTables CDN 上。下载生成器将帮助解决任何依赖关系,同时还能够优化文件的加载,因为它们可以被级联到一个 minified 文件中。
下载生成器旨在让使用 DataTables 扩展变得更简单,尤其是在最近更新中为各种样式框架提供全面的样式支持之后。决定需要包含哪些文件现在是一个简单的单击练习,而不是查看下载包并逐个包含文件。
因此,您可以使用下载生成器选择要与 DataTables 一起使用的样式框架,它会自动为您包含所有正确的代码。引导样式表现在非常简单!
参考
该网站的 参考部分 也进行了更新,其中包含了有关选项的信息、API、事件和按钮(见下面的新按钮扩展)适用于所有扩展和 DataTables 核心。这些选项被明确标记出来,因此您知道每个属性所需什么软件,使查找所需的属性变得更加容易!
编辑
今天还发布了 Editor 1.5.0 — 这是 Editor 软件的一次重大更新,引入了多项新功能
- 多行编辑!
- 一次在表中编辑多行!
- 通过 API 完全公开,允许AutoFill和RowReorder与 Editor 一起操作
- 服务器端事件在执行特定操作时执行操作 - 可用PHP和.NET文档。
- 使用
upload
和uploadMany
字段类型,现已将每个字段一个或多个文件的上传支持内置到核心库中。 - 如果有更改,则可以选择不向服务器提交数据(默认情况下,行内编辑时启用此项) -
form-options
)。
请注意:要对 Editor 1.5 中添加多行编辑功能进行升级,需要对 Editor 使用的客户端/服务器通信协议进行更改。如果您只使用 Editor 库却不访问原始数据,则不需要进行任何更改。但是,如果您直接访问数据,则必须为此更新代码,否则可以禁用多行编辑并使用旧版协议。对于从 1.4 升级的用户,请参阅升级文档。
新扩展
已为此版本创建了三个新扩展,极大地提高了 DataTables 的实用性。
按钮
按钮与新的选择扩展一起取代了现已弃用的 TableTools 和 ColVis 扩展。按钮提供一个通用 API 和样式框架,以显示以某种方式与 DataTable 交互的按钮。它被分割成核心软件,虽然它本身作用很小,但它提供了定义您自己的按钮的框架,以及可以选择包括的四个模块(使用下载构建器!)。
- HTML5 导出选项 可能是 DataTables 最需要的功能之一!旧的 TableTools 扩展使用 Flash 来导出,但 Flash 现在已经逐渐被淘汰,HTML API 开始提供我们需要用于本地文件创建的内容。可以使用表中包含的数据创建 CSV、XLSX 和 PDF 文件。XLSX 文件需要JSZip,PDF 文件需要pdfmake - 不利之处在于这些文件会显著增加页面所需的 JavaScript 数量,但它们提供极佳的灵活性,例如PDF 中的图片!
- Flash 导出选项 - HTML5 导出选项需要 IE10+ 或常青浏览器(Chrome、Firefox、Edge、Safari、Opera)中的某个,因此对于旧浏览器,仍可以选择使用 Flash 导出。Excel 导出选项已从 TableTools 升级为导出真正的 XLSX 文件。
- 打印视图 - 显示可打印表格
- 列可见性控件 - 这是用于取代旧的 ColVis 库的模块,确保按钮的样式与页面上的所有其它按钮类似。
行重新排序
RowReorder 向 DataTables 阵容中引入了全新功能,通过单击并拖动即可重新排列行。它主要设计用于排列顺序列表,因此遵循数据交换原则(即,松开的行采用它替换的行中的数据,并且表中的其他行都移动,以保持顺序)。
它还与 编辑器的多行编辑 完全集成,所以只需单击并拖动事件,就可以更新数据库中的多行。
选择
选择 取代了已退役的 TableTools 扩展的行选择方面,并通过提供选择列和单元格以及行的能力而对其进行了扩展。可以使用单击执行行选择,还可使用其他复杂选项,例如 shift 单击以选择范围,以及 cmd/ctrl 单击以切换各个项目。
选择还 具有与之紧密集成的功能 DataTables API 让获取所选项目信息的超级容易。例如
var table = $('#myTable').DataTable();
table.rows( { selected: true } ).data();
将收集已选行的中的数据。
重写的扩展
除了上面介绍的三个全新扩展外,还完全重写了三个老朋友,以便利用 DataTables 1.10 提供的功能,并与其选项和 API 实现紧密集成。
请注意,这些重写 不向后兼容。请参阅各自的文档页面,了解有关如何使用每个重写内容的说明。
自动填充
自动填充 2 的代码库比以前更加紧凑且简单。它仍然提供与 DataTable 的相同基本交互,单击并拖动以用数据填充单元格,但是 v2 通过其新的多填充选项增加了大量的灵活性。现在,用户可以选择如何填充数据(例如水平、垂直或递增值),并且可以轻松添加新的填充样式。现在还提供了与 DataTables 支持的样式框架的完全样式集成。
KeyTable
KeyTable 2 也进行了一次重写,以简化和扩展其代码库的能力。KeyTable 仍然提供相同的基本功能,例如 DataTables 的电子表格导航,但现在它做得更好了!
KeyTable 现在还直接支持 Editor 的内联编辑模式。 keys.editor
选项可用于传入要使用的 Editor 实例,立即添加内联编辑所需的一切。
固定页眉
固定页眉 3 已重写以采用一种新的方法将表头和表脚固定到页面上。它不显示克隆元素,而将“真实”元素移动到浮动容器中,并将克隆占位符克隆到原始表中,以阻止它四处移动。
这样做的最大的好处是原始元素始终是最终用户可以展示给最终用户的元素,所以将输入放入元素中之类的复杂行为仍然能起作用。作为一个微不足道的例子,DataTables 附加到列标题上的排序侦听器自动工作,因为显示的是原始的标题。
下一步
我认为这已经成为一个史诗性的 DataTables 版本,一年长期规划和对该规划进行四个月的直接工作所积累而成。12 个软件和 50k 行代码构成了这个版本。从您自己和使用 DataTables 的其他开发者的角度出发,这个版本进行了有计划的演进,但同时对新的 DataTables 开发者和新项目也做出了重大改变。
尽管还有大量的工作在等着,但我仍然会在开始思考 DataTables 下一个主要版本之前盘点这个版本。不可避免地,总会有错误需要修复,我计划引入更好的浏览器/npm 支持,这将成为未来几个月计划工作的主要内容。
尽情享受吧!