一个新的.editorconfig文件已添加到 Tabulator 项目中,以使开发人员更容易以正确的意图和其他浏览器设置为项目做出贡献
此版本中添加了一个新的导入模块来处理将非 JavaScript 数据类型加载到表中
您可以使用导入功能让用户从本地磁盘中选择文件。它将向用户显示一个标准的文件打开对话框,然后他们可以在其中选择要加载到表中的文件。
该函数的第一个参数是导入器,它将解析文件并将其转换为行数据数组,这可以是表示内置导入器之一的字符串,也可以是自定义导入器的函数。如果缺少此参数,导入模块将默认使用importFormat选项的值。
第二个参数是文件输入的接受属性的值,用于限制用户可以选择的文件,该参数将接受任何对输入元素的接受字段有效的值。如果缺少此参数,用户将能够在文件选择器中选择任何文件类型。
<span style="color:#333333"><span style="background-color:#333333">table.import("json", ".json")
.then(() => {
//文件成功导入
})
.catch(() => {
//出问题了
})
</span></span>
导入函数返回一个 promise,当数据成功加载到表中时该 promise
如果您已经拥有来自文件的格式化数据并且不需要向用户显示文件选择器,那么您可以使用importFormat选项告诉 Tabulator 在将数据传递到数据选项或setData时如何将数据导入表中功能。
importFormat选项可以采用任何内置的导入器或自定义导入器的函数。
使用数据选项导入
这可用于在加载表时导入自定义数据。
<span style="color:#333333"><span style="background-color:#333333">//定义一些CSV数据
var csvData = `“奥利”、“伦敦”、“23”
“吉姆”、“曼彻斯特”、“53”`;
//定义表
var table = new Tabulator("#example-table", {
数据:csv数据,
导入格式:“csv”,
列:[...],
});
</span></span>
使用自动列导入数据选项
启用autoColumns后,您可以完全从 CSV 数据构建表格,只要数据的第一行包含列标题
<span style="color:#333333"><span style="background-color:#333333">//定义一些CSV数据
var csvData = `“姓名”、“位置”、“年龄”
“奥利”、“伦敦”、“23”
“吉姆”、“曼彻斯特”、“53”`;
//定义表
var table = new Tabulator("#example-table", {
数据:csv数据,
导入格式:“csv”,
自动列:真,
});
</span></span>
使用此设置在表上调用setData或导入函数将导致它再次从任何未来导入中解析列标题
使用 setData 函数导入
这可用于在表格加载后的任何时候导入自定义数据。
<span style="color:#333333"><span style="background-color:#333333">//定义一些CSV数据
var csvData = `“奥利”、“伦敦”、“23”
“吉姆”、“曼彻斯特”、“53”`;
//定义表
var table = new Tabulator("#example-table", {
导入格式:“csv”,
});
//稍后加载数据
table.setData(csvData);
</span></span>
Tabulator 带有许多预配置的导入器,如下所述。
注意:有关将您自己的进口商添加到此列表的指南,请查看扩展制表符部分。
JSON
json导入器会将 JSON 格式的文件加载到表中。
<span style="color:#333333"><span style="background-color:#333333">table.import("json", ".json");</span></span>
数据格式
数据必须存储为与从数组加载数据部分中定义的对象数组结构相匹配的有效 json 字符串。
CSV
csv导入器会将 csv 格式的文件加载到表中。
<span style="color:#333333"><span style="background-color:#333333">table.import("csv", ".csv");</span></span>
CSV 文件可以包含列标题行,只要标题与列标题匹配,该行就会被 Tabulator 安全忽略
由于 CSV 中包含的数据按简单列排列,因此 CSV 中的每一列将按顺序加载并匹配到表中对应索引的列。
数据格式
数据必须以有效的 csv 格式存储,行用回车分隔,列用逗号分隔。
自动列
如果在表格上启用了autoColumns选项,那么 CSV 数据的第一行应该是列标题。
除了内置的导入器,您还可以使用自定义导入器函数定义导入器。
importer 函数接受一个参数,即要导入的文件的文本内容字符串。
该函数可以返回两个选项之一。在从数组加载数据部分中定义的行对象数组。
或者是包含列的二维行数组,然后 Tabulator 将使用它从列在数组中的位置推断列。如果在表上启用了autoColumns选项,则数组的第一行应该是列标题。
<span style="color:#333333"><span style="background-color:#333333">//定义自定义导入器
函数 customJsonImporter(fileContents){
返回 JSON.parse(fileContents);
}
//使用自定义导入器触发导入
table.import(customJsonImporter, ".json");
</span></span>
使用导入功能加载文件时,Tabulator 使用文件阅读器读入文件。
默认情况下,Tabulator 将以纯文本形式读取文件,这是所有内置导入程序使用的格式。如果您需要以不同格式读取文件数据,则可以使用importReader选项指示文件阅读器以不同格式读取文件。
<span style="color:#333333"><span style="background-color:#333333">var table = new Tabulator("#example-table", {
importReader:"buffer", //读取导入的文件作为缓冲区
});
</span></span>
可用的读者是:
您现在可以通过将回调传递给ajaxParams选项来为每个请求生成 ajax 参数。
每次发出请求时都会调用此函数,并应返回包含请求参数的对象。
<span style="color:#333333"><span style="background-color:#333333">var table = new Tabulator("#example-table", {
ajaxURL:"http://www.getmydata.com/now", //ajax URL
ajaxParams:函数(){
返回 {key1:"value1", key2:"value2"},
}
});</span></span>
添加了dataLoaderErrorTimeout选项以允许配置显示数据加载错误消息的时长和显示时间。
此选项将接受一个整数,表示消息应显示的毫秒数(默认为 3000 毫秒)。
<span style="color:#333333"><span style="background-color:#333333">var table = new Tabulator("#example-table", {
ajaxURL:"http://www.getmydata.com/now", //ajax URL
dataLoaderErrorTimeout:2000, //显示错误信息2秒
});</span></span>
键绑定模块在此版本中收到了许多更新。
过去使用ctrl键的键绑定,现在也有第二个绑定,它使用元键来提高 Mac 上的可用性
行动 | 默认组合键(键码) | 功能 |
---|---|---|
撤消 | ctrl + z ("ctrl + 90") 或 meta(cmd) + z ("meta + 90") | 撤消上次用户数据编辑 |
重做 | ctrl + y ("ctrl + 89") 或 meta(cmd) + y ("meta + 89") | 重做上次用户数据编辑 |
复制到剪贴板 | ctrl + c ("ctrl + 67") 或 meta(cmd) + c ("meta + 67") | 将表格数据复制到剪贴板 |
现在可以通过将字符串数组传递给其属性来为单个操作绑定多个组合键:
<span style="color:#333333"><span style="background-color:#333333">var table = new Tabulator("#example-table", {
键绑定:{
"redo" : ["ctrl + 82", "meta + 82"], //将重做函数绑定到 ctrl + r 或 meta + r
},
});</span></span>
如果您将操作绑定到a - z键,那么现在可以使用字符本身并让 Tabulator 为您查找键码:
<span style="color:#333333"><span style="background-color:#333333">var table = new Tabulator("#example-table", {
键绑定:{
"redo" : "ctrl + r", //将重做函数绑定到 ctrl + r
},
});</span></span>
菜单模块在此版本中进行了大修,使用交互管理器从根本上减少了所需的事件侦听器的数量并提高了效率。它还添加了几个新功能。
默认情况下,Tabulator 会将菜单元素附加到 DOM 的主体元素,因为这允许菜单在绝大多数情况下正确显示。
在某些情况下,您可能希望将菜单附加到不同的元素,例如模式的主体,以便菜单包含在该元素中。
在这些情况下,您可以使用menuContainer选项来指定菜单应附加到的元素。
<span style="color:#333333"><span style="background-color:#333333">var table = new Tabulator("#example-table", {
menuContainer:"#modal-div", //追加菜单到这个元素
});</span></span>
menuContainer选项可以接受以下值之一:
如果 Tabulator 无法从属性中找到匹配的元素,它将默认为文档正文元素。
容器位置
菜单元素绝对定位在其容器内。出于这个原因,您必须确保您的容器在 CSS 中定义了它的位置
父元素
传入menuContainer选项的元素必须是表格元素的父元素,否则将被忽略
添加了新的菜单事件以帮助跟踪用户与菜单的交互。
菜单已打开
menuOpened回调在菜单打开时触发。
<span style="color:#333333"><span style="background-color:#333333">table.on("menuOpened", function(component){
//component - 打开菜单的组件(可以是单元格、行或列,具体取决于菜单)
});</span></span>
菜单关闭
菜单关闭时触发 menuClosed回调。
<span style="color:#333333"><span style="background-color:#333333">table.on("menuClosed", function(component){
//component - 菜单已关闭的组件(可能是单元格、行或列,具体取决于菜单)
});</span></span>
您现在可以选择在页脚的左下角显示一个分页计数器,该计数器显示当前总行数的摘要。
要启用此功能,您需要在表构造函数中设置paginationCounter选项。
<span style="color:#333333"><span style="background-color:#333333">var table = new Tabulator("#example-table", {
分页:真,
paginationCounter:"rows", //添加分页行计数器
});</span></span>
内置计数器
Tabulator 带有几个内置的计数器,可以根据不同的需要对页面计数器进行不同的格式化
paginationCounter选项可以采用两个内置字符串值之一:
注意:有关将您自己的计数器添加到此列表的指南,请查看扩展制表符部分。
自定义计数器
如果您想拥有一个完全自定义的计数器,那么您可以将一个函数传递给paginationCounter选项
格式化函数接受 5 个参数:
该函数必须返回计数器的内容,计数器的文本值、有效的 HTML 或 DOM 节点
<span style="color:#333333"><span style="background-color:#333333">var table = new Tabulator("#example-table", {
分页:真,
paginationCounter:function(pageSize, currentRow, currentPage, totalRows, totalPages){
返回“显示”pageSize +“行”+totalRows +“total”;
}
});</span></span>
计数器元素
默认情况下,计数器将显示在表格页脚的左侧。如果您希望它显示在另一个元素中,请将该元素的 DOM 节点或 CSS 选择器传递给paginationCounterElement选项。
<span style="color:#333333"><span style="background-color:#333333">var table = new Tabulator("#example-table", {
分页:真,
paginationCounter:“行”,
paginationCounterElement:"#page-count", // 在这个元素中显示计数器而不是页脚
});</span></span>
Ajax 总行数
使用远程 ajax 分页时,表不知道有多少总行可用,因为它一次只加载一页行数据。
如果您使用带有计数器的远程分页,那么您需要在您的响应数据中包含last_row值,该值设置为可用的总行数
<span style="color:#333333"><span style="background-color:#333333">{
"last_page":15, //可用页面总数(该值必须大于0)
"last_row":246, //页面总行数(该值必须大于0)
"data":[ // 行数据对象数组
{id:1, name:"bob", age:"23"}, //示例行数据对象
]
}</span></span>
如果您的远程响应缺少last_row值,则 Tabulator 将尝试通过将页面大小乘以last_page值来估计行数
计数器的本地化
您可以使用lang 模块中的counters分页属性自定义内置计数器的文本
<span style="color:#333333"><span style="background-color:#333333">var table = new Tabulator("#example-table", {
语言环境:真,
语言:{
“默认”:{
“分页”:{
“柜台”:{
"显示": "显示",
“的”:“的”,
“行”:“行”,
“页”:“页”,
}
},
}
},
});</span></span>
有关如何调整本地化的完整详细信息,请阅读本地化模块文档
maxInitialWidth列定义选项可用于在表格初始渲染时设置列的最大宽度,以像素为单位。
然后,用户可以将大于此的列大小调整为maxWidth限制(如果已设置)
<span style="color:#333333"><span style="background-color:#333333">{title:"Name", field:"name", initialMaxWidth:100, maxWidth:200} //允许列在初始渲染时达到最大 100px 宽,但允许用户将其调整为 200px</span></span>
添加了几个新的外部事件来帮助跟踪行移动
行移动开始
rowMoving事件将在开始拖动行时触发。
<span style="color:#333333"><span style="background-color:#333333">table.on("rowMoving", function(row){
//row - 行组件
});</span></span>
行移动已取消
当行已被移动但未更改表中的位置时,将触发rowMoveCancelled事件。
<span style="color:#333333"><span style="background-color:#333333">table.on("rowMoveCancelled", function(row){
//row - 行组件
});</span></span>
date、time和datetime排序器已更新以解析 ISO 日期格式。
您可以通过将“iso”值传递给sorterParams对象的格式属性来启用 ISO 格式支持:
<span style="color:#333333"><span style="background-color:#333333">{标题:“示例”,字段:“示例”,排序器:“日期时间”,排序器参数:{
格式:“iso”,
}}</span></span>
datetime和datetimediff排序器已更新以解析 ISO 日期格式。
您可以通过将“iso”值传递给formatterParams对象的inputFormat属性来启用 ISO 格式支持:
<span style="color:#333333"><span style="background-color:#333333">{标题:“示例”,字段:“示例”,格式化程序:“日期时间”,格式化程序参数:{
输入格式:“iso”,
}}</span></span>
函数已添加到行组件以允许查询行树状态。
检查树是否展开
如果行展开并显示其子项,isTreeExpanded函数将返回true ,如果折叠则返回false。
<span style="color:#333333"><span style="background-color:#333333">var 扩展 = row.isTreeExpanded();</span></span>
json格式化程序现在支持使用titleDownload列定义来设置 json 输出中的字段名称
<span style="color:#333333"><span style="background-color:#333333">{title:"Name", field:"name", downloadTitle:"Persons Name"}</span></span>
示例 json 输出:
<span style="color:#333333"><span style="background-color:#333333">[
{
“年龄”:22,
“红色”,
“人名”:“史蒂夫”
}
]</span></span>
新的jsonLines下载器会将数据格式化为一系列由回车符分隔的 JSON 编码行对象。
这种格式通常与 Apache Spark、Hadoop 和 Hive 结合使用。
进行了以下次要更新和错误修正: