我有一个制表器 6.2.1 表,其中所有列最初设置为可编辑:false。我想要做到这一点,以便当单击一行时它会被选中,并且当双击该行时它会变得可编辑。
当我单击或双击一行时,没有任何反应。
当所有列设置为 editable:false 时,制表符似乎会阻止 cellClick、rowClick 和 rowDblClick 事件。
要将所有可见列设置为可编辑,我使用一个名为 setRowEditable(row, editable) 的函数,该函数循环遍历一行中的所有单元格,如果单元格可见并且有一个字段,它会通过将 editable 选项更改为值来修改其定义可编辑参数(true 或 false)。
这是代码:
// Function to set row editable or not.
function setRowEditable(row, editable) {
row.getCells().forEach(function (cell) {
let col = cell.getColumn();
if (col.isVisible() && col.getField()) {
col.updateDefinition({ editable: editable });
}
});
row.getTable().redraw(); // I make sure the changes are applied visually.
}
// Sample Data
var tableData = [
{ id: 1, name: "John Doe", age: 28, gender: "Male" },
{ id: 2, name: "Jane Smith", age: 32, gender: "Female" },
{ id: 3, name: "Billy Bob", age: 44, gender: "Male" },
];
// Table setup
var table = new Tabulator("#example-table", {
data: tableData, // Datos para la tabla
layout: "fitColumns", // Ajuste automático de columnas
columns: [
{
headerSort: false, frozen: true, width:30, minWidth: 30,
formatter: function (cell) {
let el = cell.getElement();
el.style.backgroundColor = "#E0DFE3";
}
},
{ title: "ID", field: "id", editable: false },
{ title: "Name", field: "name", editable: false },
{ title: "Age", field: "age", editable: false },
{ title: "Gender", field: "gender", editable: false },
],
rowClick: function (e, row) {
console.log('rowClick');
row.selected();
},
rowDblClick: function (e, row) {
console.log('rowDblClick');
row.selected();
setRowEditable(row, true);
},
});
5.5 版本之后发生了一些变化,导致了这种行为。我目前使用的是 5.5 版本,即使列具有 editable:false,我仍然可以选择一行。我最近尝试切换到新版本,但它破坏了我的行选择行为(即使在更新到新的行选择语法之后)。我现在不确定这是否是一个错误或可编辑属性的预期行为。