当所有列设置 editable:false 时,制表符 rowClick 不起作用

问题描述 投票:0回答:1

我有一个制表器 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);
            },
        });
javascript tabulator
1个回答
0
投票

5.5 版本之后发生了一些变化,导致了这种行为。我目前使用的是 5.5 版本,即使列具有 editable:false,我仍然可以选择一行。我最近尝试切换到新版本,但它破坏了我的行选择行为(即使在更新到新的行选择语法之后)。我现在不确定这是否是一个错误或可编辑属性的预期行为。

© www.soinside.com 2019 - 2024. All rights reserved.