制表符可编辑参数覆盖 rowClick 处理程序

Question

使用制表器 5.6。

问题示例

创建“管理模式”类型的交互。

在此示例中，我有一个应该可以基于布尔变量进行编辑的表。可选的编辑文档有一个回调函数示例，用于检查“Editor”参数的真/假，但是编辑器参数似乎覆盖了“rowClick”处理程序（我假设编辑器类似于“cellClick”事件，因此一旦设置了编辑器，您实际上无法单击该行）。

我想要的功能是，如果可编辑变量/参数为 false，表将处理“rowClick”事件。如果可编辑变量为 true，则它应该允许编辑单元格并且不应使用“rowClick”处理程序。我想避免使用一个额外的列来保存对编辑函数的调用。

使用以下代码，createHandlers() 添加“rowClick”处理程序，并且它按预期工作。

this.columns =
            [
                {
                    title: "User",
                    field: "userId",
                    editor: "input",
                    formatter: "textarea", //Editor properties
                    validator:"required", //Require input if being editted
                    cellEdited:function(cell) {
                        cell.getElement().style.color= "#ffffff";              //CHANGE CELL WHITE FONT
                        cell.getElement().style.backgroundColor = "#e68a00";   //CHANGE CELL GOLD COLOR
                    },
}]
this.createHandlers();

private createHandlers(): void {
        this.table.on("rowClick", (e, row) => {
            this.table.selectRow(row);
            //Additional functionality, updates some child tables etc
        });
    }

添加可编辑参数后，表格显示以下行为。

1.) editable = true -> 将选择单元格进行编辑，并且将发生“rowClick”事件（从前端用户的角度来看，这令人沮丧。 2.) editable = false -> 该单元格将不可编辑，并且“rowClick”功能将不会发生。

this.columns =
            [
                {
                    title: "User",
                    field: "userId",
                    editor: "input",
                    formatter: "textarea", //Editor properties
                    editable: true/false,
                    validator:"required", //Require input if being editted
                    cellEdited:function(cell) {
                        cell.getElement().style.color= "#ffffff";              //CHANGE CELL WHITE FONT
                        cell.getElement().style.backgroundColor = "#e68a00";   //CHANGE CELL GOLD COLOR
                    },
}]
this.createHandlers();

我尝试了几件事：

尝试使用“cellClick”事件来处理参数本身的添加/删除。看来“cellClick”事件是在可编辑功能发生之后发生的，因此单元格仍然可以选择进行编辑，从而产生与上面相同的交互。

let editCheck = (): boolean => this.editable;

cellClick: (e, cell) => {
                        if (editCheck()) {
                            cell.getColumn().updateDefinition({ editable: true});
                        }
                        else {
                            this.table.getColumnDefinitions().forEach(e => {
                                delete e.editable;
                            });
                            const t = cell.getRow();
                            this.table.selectRow(t);
                            //Additional functionality, updates some child tables etc
                        }
                    },

我还尝试删除处理程序并在 this.editable 更新时重新添加它，这会引发错误，就好像处理程序根本没有添加或者它被可编辑回调覆盖一样。

private admin(): void {
        this.editable = !this.editable;
        (this.editable) ? this.table.off("rowClick") : this.createHandlers();
    }

我不知道这是否意味着每次选择管理模式时我都必须重新绘制表格（我不喜欢这个选项）。

非常感谢任何帮助，我一直在努力哈哈。

Answer 1

我能够回答我自己的问题。

循环并添加/删除属性的解决方案是正确的，但在上面的示例中，我只是添加/删除“可编辑”属性。有必要添加/删除“可编辑”和“编辑器”属性。然后您必须重新绘制表格。

例如：

public enableEdit(): void {
    this.editable = !this.editable; //switch boolean
    this.adminColors(this.editable); //Enable visual cue
    this.columns.forEach(e => { //add editable property

        if (this.editable && e?.editable != false) {
            e.editable = true;
            e.editor = "input";
        } else {
            delete e?.editable;
            delete e?.editor;
        }
    });

    if (this.editable) {
        // this.mT.removeHandler("rowClick");
        // this.mT.rebuildTable();

        this.mT.handlers = [];
        this.buildTable();
    } else {
        //this.buildTable();
        this.buildTable();
        this.createHandlers();
    }
}

所以当添加管理模式时，会调用enableEdit()。 （任何调用此函数的方式都可以）

this.columns 是输入到制表器的列数组。如果您不分配/存储此数组，则可以使用类似于以下内容的方法来获取列定义。这是一个原生制表函数。

this.table.getColumnLayout()

在上述函数中进行迭代并添加/删除两个属性并重新加载表可以正常工作。确保在重绘之前列显示新属性（可编辑、编辑器）。

关于处理程序，我发现在制表符表定义中清除处理程序数组更容易。使用“off”属性会引发错误，但这可能只是我的实现。

this.table.handlers = [];