Tabulator javascript data grid数据表格控件v5.1.0 发布说明

迷南。 2023-10-01 17:30 10阅读 0赞

## 发行说明 ##

*  [编辑器配置][Link 1]
 *  [文件导入][Link 2]
 *  [阿贾克斯][Link 3]
 *  [键绑定][Link 4]
 *  [菜单][Link 5]
 *  [分页][Link 6]
 *  [列][Link 7]
 *  [可移动行][Link 8]
 *  [排序][Link 9]
 *  [格式化][Link 10]
 *  [数据树][Link 11]
 *  [下载][Link 12]
 *  [Bug修复][Bug]

### 编辑器配置 ###

一个新的***.editorconfig***文件已添加到 Tabulator 项目中，以使开发人员更容易以正确的意图和其他浏览器设置为项目做出贡献

### 文件导入 ###

此版本中添加了一个新的导入模块来处理将非 JavaScript 数据类型加载到表中

#### **从本地文件导入尝试交互式演示** ####

您可以使用***导入***功能让用户从本地磁盘中选择文件。它将向用户显示一个标准的文件打开对话框，然后他们可以在其中选择要加载到表中的文件。

该函数的第一个参数是导入器，它将解析文件并将其转换为行数据数组，这可以是表示内置导入器之一的字符串，也可以是自定义导入器的函数。如果缺少此参数，导入模块将默认使用***importFormat***选项的值。

第二个参数是文件输入的***接受***属性的值，用于限制用户可以选择的文件，该参数将接受任何对[输入元素的接受字段][Link 13]有效的值。如果缺少此参数，用户将能够在文件选择器中选择任何文件类型。

table.import("json", ".json")
 .then(() => {
 //文件成功导入
 })
 .catch(() => {
 //出问题了
 })

导入函数返回一个 promise，当数据成功加载到表中时该 promise

#### **从数据导入** ####

如果您已经拥有来自文件的格式化数据并且不需要向用户显示文件选择器，那么您可以使用***importFormat选项告诉 Tabulator 在将数据传递到******数据***选项或***setData***时如何将数据导入表中功能。

importFormat选项可以采用任何内置的导入器或自定义导入***器***的函数。

**使用数据选项导入**

这可用于在加载表时导入自定义数据。

//定义一些CSV数据
 var csvData = `“奥利”、“伦敦”、“23”
 “吉姆”、“曼彻斯特”、“53”`;
 
 //定义表
 var table = new Tabulator("#example-table", {
 数据：csv数据，
 导入格式：“csv”，
 列：[...]，
 });

**使用自动列导入数据选项**

启用autoColumns***后***，您可以完全从 CSV 数据构建表格，只要数据的第一行包含列标题

//定义一些CSV数据
 var csvData = `“姓名”、“位置”、“年龄”
 “奥利”、“伦敦”、“23”
 “吉姆”、“曼彻斯特”、“53”`;
 
 //定义表
 var table = new Tabulator("#example-table", {
 数据：csv数据，
 导入格式：“csv”，
 自动列：真，
 });

使用此设置在表上调用***setData***或***导入***函数将导致它再次从任何未来导入中解析列标题

**使用 setData 函数导入**

这可用于在表格加载后的任何时候导入自定义数据。

//定义一些CSV数据
 var csvData = `“奥利”、“伦敦”、“23”
 “吉姆”、“曼彻斯特”、“53”`;
 
 //定义表
 var table = new Tabulator("#example-table", {
 导入格式：“csv”，
 });
 
 //稍后加载数据
 table.setData(csvData);

#### **内置进口商** ####

Tabulator 带有许多预配置的导入器，如下所述。

**注意：**有关将您自己的进口商添加到此列表的指南，请查看[扩展制表符][Link 14]部分。

**JSON**

***json***导入器会将 JSON 格式的文件加载到表中。

table.import("json", ".json");

**数据格式**  
数据必须存储为与[从数组加载数据][Link 15]部分中定义的对象数组结构相匹配的有效 json 字符串。

**CSV**

***csv***导入器会将 csv 格式的文件加载到表中。

table.import("csv", ".csv");

CSV 文件可以包含列标题行，只要标题与列标题匹配，该行就会被 Tabulator 安全忽略

由于 CSV 中包含的数据按简单列排列，因此 CSV 中的每一列将按顺序加载并匹配到表中对应索引的列。

**数据格式**  
数据必须以有效的 csv 格式存储，行用回车分隔，列用逗号分隔。

**自动列**  
如果在表格上启用了***autoColumns***选项，那么 CSV 数据的第一行应该是列标题。

#### **自定义进口商** ####

除了内置的导入器，您还可以使用自定义导入器函数定义导入器。

importer 函数接受一个参数，即要导入的文件的文本内容字符串。

该函数可以返回两个选项之一。[在从数组加载数据][Link 15]部分中定义的行对象数组。

或者是包含列的二维行数组，然后 Tabulator 将使用它从列在数组中的位置推断列。如果在表上启用了***autoColumns***选项，则数组的第一行应该是列标题。

//定义自定义导入器
 函数 customJsonImporter(fileContents){
 返回 JSON.parse(fileContents);
 }
 
 //使用自定义导入器触发导入
 table.import(customJsonImporter, ".json");

#### **文件阅读器** ####

使用***导入***功能加载文件时，Tabulator 使用[文件阅读器][Link 16]读入文件。

默认情况下，Tabulator 将以纯文本形式读取文件，这是所有内置导入程序使用的格式。如果您需要以不同格式读取文件数据，则可以使用***importReader***选项指示文件阅读器以不同格式读取文件。

var table = new Tabulator("#example-table", {
 importReader:"buffer", //读取导入的文件作为缓冲区
 });

可用的读者是：

*  **text** \- 以纯文本形式读取文件
 *  **buffer** \- 将文件读取为 ArrayBuffer
 *  **binary** \- 以字符串格式将文件读取为原始二进制文件
 *  **url** \- 将文件作为数据 url 读取

### 阿贾克斯 ###

#### **实时 Ajax 参数** ####

您现在可以通过将回调传递给***ajaxParams***选项来为每个请求生成 ajax 参数。

每次发出请求时都会调用此函数，并应返回包含请求参数的对象。

var table = new Tabulator("#example-table", {
 ajaxURL:"http://www.getmydata.com/now", //ajax URL
 ajaxParams：函数（）{
 返回 {key1:"value1", key2:"value2"},
 }
 });

#### **数据加载错误消息超时** ####

添加了***dataLoaderErrorTimeout***选项以允许配置显示数据加载错误消息的时长和显示时间。

此选项将接受一个整数，表示消息应显示的毫秒数*（默认为 3000 毫秒）*。

var table = new Tabulator("#example-table", {
 ajaxURL:"http://www.getmydata.com/now", //ajax URL
 dataLoaderErrorTimeout:2000, //显示错误信息2秒
 });

### 键绑定 ###

键绑定模块在此版本中收到了许多更新。

#### **更新的键绑定** ####

过去使用***ctrl***键的键绑定，现在也有第二个绑定，它使用***元***键来提高 Mac 上的可用性

<table> 
 <thead> 
 <tr> 
 <th style="text-align:left;">行动</th> 
 <th style="text-align:left;">默认组合键（键码）</th> 
 <th style="text-align:left;">功能</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td style="background-color:#ffffff;border-color:#999999 #999999 #999999 #222222;">撤消</td> 
 <td style="background-color:#ffffff;border-color:#999999;">ctrl + z ("ctrl + 90") 或 meta(cmd) + z ("meta + 90")</td> 
 <td style="background-color:#ffffff;border-color:#999999 #222222 #999999 #999999;">撤消上次用户数据编辑</td> 
 </tr> 
 <tr> 
 <td style="background-color:#f9f9f9;border-color:#999999 #999999 #999999 #222222;">重做</td> 
 <td style="background-color:#f9f9f9;border-color:#999999;">ctrl + y ("ctrl + 89") 或 meta(cmd) + y ("meta + 89")</td> 
 <td style="background-color:#f9f9f9;border-color:#999999 #222222 #999999 #999999;">重做上次用户数据编辑</td> 
 </tr> 
 <tr> 
 <td style="background-color:#ffffff;border-color:#999999 #999999 #222222 #222222;">复制到剪贴板</td> 
 <td style="background-color:#ffffff;border-color:#999999 #999999 #222222;">ctrl + c ("ctrl + 67") 或 meta(cmd) + c ("meta + 67")</td> 
 <td style="background-color:#ffffff;border-color:#999999 #222222 #222222 #999999;">将表格数据复制到剪贴板</td> 
 </tr> 
 </tbody> 
</table>

#### **多个组合键** ####

现在可以通过将字符串数组传递给其属性来为单个操作绑定多个组合键：

var table = new Tabulator("#example-table", {
 键绑定：{
 "redo" : ["ctrl + 82", "meta + 82"], //将重做函数绑定到 ctrl + r 或 meta + r
 },
 });

#### **键码查找** ####

如果您将操作绑定到***a - z***键，那么现在可以使用字符本身并让 Tabulator 为您查找键码：

var table = new Tabulator("#example-table", {
 键绑定：{
 "redo" : "ctrl + r", //将重做函数绑定到 ctrl + r
 },
 });

### 菜单 ###

菜单模块在此版本中进行了大修，使用交互管理器从根本上减少了所需的事件侦听器的数量并提高了效率。它还添加了几个新功能。

#### **容器元素** ####

默认情况下，Tabulator 会将菜单元素附加到 DOM 的***主体***元素，因为这允许菜单在绝大多数情况下正确显示。

在某些情况下，您可能希望将菜单附加到不同的元素，例如模式的主体，以便菜单包含在该元素中。

在这些情况下，您可以使用***menuContainer***选项来指定菜单应附加到的元素。

var table = new Tabulator("#example-table", {
 menuContainer:"#modal-div", //追加菜单到这个元素
 });

menuContainer选项可以接受以下值之一***：***

*  **false** \- 将菜单附加到正文元素*（默认）*
 *  **true** \- 将菜单附加到表格
 *  **CSS 选择器字符串**\- 一个有效的 CSS 选择器字符串
 *  **DOM 节点**\- 一个 DOM 节点

如果 Tabulator 无法从属性中找到匹配的元素，它将默认为文档***正文***元素。

**容器位置**  
菜单元素绝对定位在其容器内。出于这个原因，您必须确保您的容器在 CSS 中定义了它的***位置***

**父元素**  
传入***menuContainer***选项的元素必须是表格元素的父元素，否则将被忽略

#### **菜单事件** ####

添加了新的菜单事件以帮助跟踪用户与菜单的交互。

**菜单已打开**

menuOpened回调在菜单打开***时***触发。

table.on("menuOpened", function(component){
 //component - 打开菜单的组件（可以是单元格、行或列，具体取决于菜单）
 });

**菜单关闭**

***菜单关闭时触发 menuClosed***回调。

table.on("menuClosed", function(component){
 //component - 菜单已关闭的组件（可能是单元格、行或列，具体取决于菜单）
 });

### 分页 ###

#### **分页计数器** ####

您现在可以选择在页脚的左下角显示一个分页计数器，该计数器显示当前总行数的摘要。

要启用此功能，您需要在表构造函数中设置***paginationCounter***选项。

var table = new Tabulator("#example-table", {
 分页：真，
 paginationCounter:"rows", //添加分页行计数器
 });

**内置计数器**

Tabulator 带有几个内置的计数器，可以根据不同的需要对页面计数器进行不同的格式化

***paginationCounter***选项可以采用两个内置字符串值之一：

*  **rows** \- 以“Showing XX of X rows”格式显示当前显示行的摘要
 *  **pages** \- 以“Showing X of X pages”格式显示当前显示页面的摘要

**注意：**有关将您自己的计数器添加到此列表的指南，请查看[扩展制表符][Link 17]部分。

**自定义计数器**

如果您想拥有一个完全自定义的计数器，那么您可以将一个函数传递给***paginationCounter***选项

格式化函数接受 5 个参数：

*  **pageSize** \- 每页显示的行数
 *  **currentRow** \- 第一个可见行位置
 *  **currentPage** \- 当前页面
 *  **totalRows** \- 表中的总行数
 *  **totalPages** \- 表中的总页数

该函数必须返回计数器的内容，计数器的文本值、有效的 HTML 或 DOM 节点

var table = new Tabulator("#example-table", {
 分页：真，
 paginationCounter:function(pageSize, currentRow, currentPage, totalRows, totalPages){
 返回“显示”pageSize +“行”+totalRows +“total”；
 }
 });

**计数器元素**

默认情况下，计数器将显示在表格页脚的左侧。如果您希望它显示在另一个元素中，请将该元素的 DOM 节点或 CSS 选择器传递给***paginationCounterElement***选项。

var table = new Tabulator("#example-table", {
 分页：真，
 paginationCounter：“行”，
 paginationCounterElement:"#page-count", // 在这个元素中显示计数器而不是页脚
 });

**Ajax 总行数**

使用远程 ajax 分页时，表不知道有多少总行可用，因为它一次只加载一页行数据。

如果您使用带有计数器的远程分页，那么您需要在您的响应数据中包含***last\_row***值，该值设置为可用的总行数

{
 "last_page":15, //可用页面总数（该值必须大于0）
 "last_row":246, //页面总行数（该值必须大于0）
 "data":[ // 行数据对象数组
 {id:1, name:"bob", age:"23"}, //示例行数据对象
 ]
 }

如果您的远程响应缺少***last\_row值，则 Tabulator 将尝试通过将页面大小乘以******last\_page***值来估计行数

**计数器的本地化**

您可以使用lang 模块中的***counters***分页属性自定义内置计数器的文本

var table = new Tabulator("#example-table", {
 语言环境：真，
 语言：{
 “默认”：{
 “分页”：{
 “柜台”：{
 "显示": "显示",
 “的”：“的”，
 “行”：“行”，
 “页”：“页”，
 }
 },
 }
 },
 });

有关如何调整本地化的完整详细信息，请阅读[本地化模块][Link 18]文档

### 列 ###

#### **最大初始宽度** ####

maxInitialWidth列定义选项可用于在表格初始渲染时设置列的最大宽度，以像素为单位***。***

然后，用户可以将大于此的列大小调整为***maxWidth***限制（如果已设置）

{title:"Name", field:"name", initialMaxWidth:100, maxWidth:200} //允许列在初始渲染时达到最大 100px 宽，但允许用户将其调整为 200px

### 可移动行 ###

#### **新活动** ####

添加了几个新的外部事件来帮助跟踪行移动

**行移动开始**

rowMoving事件将在开始拖动行时触发***。***

table.on("rowMoving", function(row){
 //row - 行组件
 });

**行移动已取消**

当行已被移动但未更改表中的位置时，将触发***rowMoveCancelled事件。***

table.on("rowMoveCancelled", function(row){
 //row - 行组件
 });

### 排序 ###

#### **日期时间排序** ####

***date***、***time***和***datetime***排序器已更新以解析 ISO 日期格式。

***您可以通过将“iso”值传递给******sorterParams***对象的***格式***属性来启用 ISO 格式支持：

{标题：“示例”，字段：“示例”，排序器：“日期时间”，排序器参数：{
 格式：“iso”，
 }}

### 格式化 ###

#### **日期时间格式** ####

***datetime***和***datetimediff***排序器已更新以解析 ISO 日期格式。

***您可以通过将“iso”值传递给******formatterParams***对象的***inputFormat***属性来启用 ISO 格式支持：

{标题：“示例”，字段：“示例”，格式化程序：“日期时间”，格式化程序参数：{
 输入格式：“iso”，
 }}

### 数据树 ###

#### **行组件函数** ####

函数已添加到行组件以允许查询行树状态。

**检查树是否展开**

如果行展开并显示其子项，isTreeExpanded***函数***将返回***true ，如果折叠则返回******false***。

var 扩展 = row.isTreeExpanded();

### 下载 ###

#### **JSON 下载器** ####

***json***格式化程序现在支持使用***titleDownload***列定义来设置 json 输出中的字段名称

{title:"Name", field:"name", downloadTitle:"Persons Name"}

示例 json 输出：

[
 {
 “年龄”：22，
 “红色”，
 “人名”：“史蒂夫”
 }
 ]

#### **JSON 行下载器** ####

新的***jsonLines***下载器会将数据格式化为一系列由回车符分隔的 JSON 编码行对象。

这种格式通常与 Apache Spark、Hadoop 和 Hive 结合使用。

### Bug修复 ###

#### **v5.1.0 发布** ####

进行了以下次要更新和错误修正：

*  行大小调整不再触发控制台错误
 *  修复了使用单元格导航功能或***tabEndNewRow***选项时引发异常的问题
 *  现在可以通过交互模块正确处理组标题点击事件的交互监控
 *  提高水平虚拟 DOM 的稳定性
 *  修复了单元格列定义中未触发***cellEdited回调的问题***
 *  修复了物化主题中缺少的分页按钮
 *  选定行的突出显示现在可以与具体化主题一起正常工作
 *  现在在调用***rowFormatter之前设置行初始化标志***
 *  使用严格比较来处理单元格数据更改检查以允许在错误值之间进行更改
 *  修复了内部***数据刷新***事件名称中的拼写错误
 *  基本的垂直渲染器现在在尝试重新渲染它们之前清除行，以防止行布局损坏
 *  在交互管理器中添加了控制台警告，以在尝试侦听错误重新初始化的表上的事件时警告开发人员
 *  模拟单元组件现在正确传递给***headerFilterParams***回调
 *  修正了验证模块中的回归
 *  GroupRows 模块现在可以在设置表列后自行组合，以确保在加载时对行进行正确分组
 *  修复了浏览器缩放不是 100% 时重绘循环的问题
 *  ***当鼠标移到冻结的行上时， rowMouseOver***事件不再引发错误
 *  修复了表格处于 RTL 模式时列标题排序箭头的布局问题

[Link 1]: http://tabulator.info/docs/5.1/release#config
[Link 2]: http://tabulator.info/docs/5.1/release#import
[Link 3]: http://tabulator.info/docs/5.1/release#ajax
[Link 4]: http://tabulator.info/docs/5.1/release#keybindings
[Link 5]: http://tabulator.info/docs/5.1/release#menu
[Link 6]: http://tabulator.info/docs/5.1/release#page
[Link 7]: http://tabulator.info/docs/5.1/release#columns
[Link 8]: http://tabulator.info/docs/5.1/release#move-row
[Link 9]: http://tabulator.info/docs/5.1/release#sort
[Link 10]: http://tabulator.info/docs/5.1/release#format
[Link 11]: http://tabulator.info/docs/5.1/release#tree
[Link 12]: http://tabulator.info/docs/5.1/release#download
[Bug]: http://tabulator.info/docs/5.1/release#bugfix
[Link 13]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept
[Link 14]: http://tabulator.info/docs/5.1/modules#module-import
[Link 15]: http://tabulator.info/docs/5.1/release#array
[Link 16]: https://developer.mozilla.org/en-US/docs/Web/API/FileReader
[Link 17]: http://tabulator.info/docs/5.1/modules#module-page
[Link 18]: http://tabulator.info/docs/5.1/localize