为什么 Tabulator rowTapHold 方法不适用于 iOS 设备?
Why is the Tabulator rowTapHold method not working with iOS devices?
我似乎不明白为什么 Tabulator rowTapHold()
方法不适用于移动设备。以下是我非常简单的代码片段:
HTML
<link href="~/css/Dailies/tabulator.css" rel="stylesheet" />
<div id="example-table"></div>
<script src="~/js/Dailies/tabulator.js"></script>
JavaScript
var tabledata = [
{ Laborcode: "select a code", Memo: "test row #1" },
{ Laborcode: "select a code", Memo: "test row #2" },
{ Laborcode: "select a code", Memo: "test row #3" },
{ Laborcode: "select a code", Memo: "test row #4" },
{ Laborcode: "select a code", Memo: "test row #5" }
];
var laborCodes = ["1001", "1002", "1003"];
var table = new Tabulator("#example-table", {
columns: [
{ title: "Labor Code", field: "Laborcode", responsive: 0, hozAlign: "center", editor: "select", editorParams: function (cell) { values: []; return { values: laborCodes }; } },
{ title: "Memo", field: "Memo", responsive: 0, hozAlign: "left", editor: "input" },
],
data: tabledata,
height: "100%",
layout: "fitDataFill",
reactiveData: true, //enable reactive data
responsiveLayout: "collapse",
rowContextMenu: [
{
label: "Add Row",
action: function (e, row) { row.getTable().addRow({ Laborcode: "select a code", Memo: "add a memo" }, false); }
},
{
label: "Delete Row",
action: function (e, row) { row.delete(); }
}
],
rowTapHold: [
{
label: "Add Row",
action: function (e, row) { row.getTable().addRow({ Laborcode: "select a code", Memo: "add a memo" }, false); }
},
{
label: "Delete Row",
action: function (e, row) { row.delete(); }
}
]
});
Tabulator rowContextMenu
方法在我测试过的桌面浏览器中运行良好。我需要可比较的 rowTapHold
方法来为移动设备工作。
一如既往,非常感谢任何帮助。
编辑
通过删除 Tabulator moveableRows
方法,我能够使 rowTapHold
方法与 Android 设备一起使用。我仍然无法使用 iOS 设备的 rowTapHold
功能。
我在 jsFiddle 添加了第二个(非常简单)Tabulator
示例:https://jsfiddle.net/0fqhupox/.
问题是因为 rowTapHold 选项旨在用作回调,因此您必须将函数传递给该选项.
您似乎正在将一组菜单选项传递给 rowTapHold 属性。这个不支持菜单触发,只支持触发时的回调函数运行
如果向此 属性 传递一个函数,您将看到当用户点击按住一行时调用该函数
Row Callbacks Documentation 解释了行事件回调的正确使用。
更新
从 Tabulator 的 4.8 版开始 (今天发布) 上下文菜单现在自动为移动设备上的 tapHold
添加绑定以改进移动功能
我似乎不明白为什么 Tabulator rowTapHold()
方法不适用于移动设备。以下是我非常简单的代码片段:
HTML
<link href="~/css/Dailies/tabulator.css" rel="stylesheet" />
<div id="example-table"></div>
<script src="~/js/Dailies/tabulator.js"></script>
JavaScript
var tabledata = [
{ Laborcode: "select a code", Memo: "test row #1" },
{ Laborcode: "select a code", Memo: "test row #2" },
{ Laborcode: "select a code", Memo: "test row #3" },
{ Laborcode: "select a code", Memo: "test row #4" },
{ Laborcode: "select a code", Memo: "test row #5" }
];
var laborCodes = ["1001", "1002", "1003"];
var table = new Tabulator("#example-table", {
columns: [
{ title: "Labor Code", field: "Laborcode", responsive: 0, hozAlign: "center", editor: "select", editorParams: function (cell) { values: []; return { values: laborCodes }; } },
{ title: "Memo", field: "Memo", responsive: 0, hozAlign: "left", editor: "input" },
],
data: tabledata,
height: "100%",
layout: "fitDataFill",
reactiveData: true, //enable reactive data
responsiveLayout: "collapse",
rowContextMenu: [
{
label: "Add Row",
action: function (e, row) { row.getTable().addRow({ Laborcode: "select a code", Memo: "add a memo" }, false); }
},
{
label: "Delete Row",
action: function (e, row) { row.delete(); }
}
],
rowTapHold: [
{
label: "Add Row",
action: function (e, row) { row.getTable().addRow({ Laborcode: "select a code", Memo: "add a memo" }, false); }
},
{
label: "Delete Row",
action: function (e, row) { row.delete(); }
}
]
});
Tabulator rowContextMenu
方法在我测试过的桌面浏览器中运行良好。我需要可比较的 rowTapHold
方法来为移动设备工作。
一如既往,非常感谢任何帮助。
编辑
通过删除 Tabulator moveableRows
方法,我能够使 rowTapHold
方法与 Android 设备一起使用。我仍然无法使用 iOS 设备的 rowTapHold
功能。
我在 jsFiddle 添加了第二个(非常简单)Tabulator
示例:https://jsfiddle.net/0fqhupox/.
问题是因为 rowTapHold 选项旨在用作回调,因此您必须将函数传递给该选项.
您似乎正在将一组菜单选项传递给 rowTapHold 属性。这个不支持菜单触发,只支持触发时的回调函数运行
如果向此 属性 传递一个函数,您将看到当用户点击按住一行时调用该函数
Row Callbacks Documentation 解释了行事件回调的正确使用。
更新
从 Tabulator 的 4.8 版开始 (今天发布) 上下文菜单现在自动为移动设备上的 tapHold
添加绑定以改进移动功能