时间戳

首页 > 解决方案 > 制表符 - 自定义单元格编辑器未完全打开

reactjs - 制表符 - 自定义单元格编辑器未完全打开

问题描述

要求是对基于制表符的表格中的某些单元格进行“内联编辑”。该单元格需要自定义编辑器，因为输入是自定义组件（已在 Tabulator 之外以另一种形式使用）。

我们的环境是 React + Tabulator (v4.7) + BlueprintJS 作为组件库。

问题是该组件不会在 Tabulator 中作为自定义编辑器完全打开，而在 Tabulator 之外以常规形式正常工作。

为什么组件不会完全打开？

用作此单元格的“编辑器”的自定义组件使用蓝图 (BP) 的“弹出框”，因此它具有弹出框目标和内容。这是它在表单编辑中的样子： 表单编辑模式

问题是，单击时，弹出框目标正在呈现，但弹出框内容未呈现，因此自定义“下拉”输入组件永远不会出现： 在制表符中

相关代码部分

制表符列定义：

{
  title: "Some Col Title",
  field: "someField",
  formatter: someFieldFormatter,
  editor: "someFieldEditor" as Tabulator.Editor,
  editorParams: (cell) => {
    return { cell, zones: zonesDataTree };
  },
},

定义自定义单元格编辑器：

Tabulator.prototype.extendModule("edit", "editors", {
    someFieldEditor: (
        cell: CellComponent,
        onRendered: Function,
        success: Function,
        cancel: Function,
        editorParams: SomeFieldCellEditorParams
    ): Element => {
        const elem = document.createElement("div");

        // SomeFieldCellEditor is a React component that wraps around the same component used in 
        // the "regular form" scenario mentioned in the screenshot
        const someFieldCellEditorComponent: any = React.createElement(SomeFieldCellEditor, {
            theData: editorParams.data,
        });
        
        ReactDOM.render(someFieldCellEditorComponent, elem);
        return elem;
    },
});

标签： reactjstabulatorblueprintjs

解决方案

发生这种情况是因为元素包含在单元格内部。

为了防止表格布局损坏，制表单元格overflow:hidden在其 CSS 上进行了定义。

大多数下拉库都有一个选项，可让您设置应在 DOM 中附加列表的位置。您可以使用此药水将列表附加到body应该解决问题的标签上。

附带说明一下，您是否知道 Tabulator 带有内置的选择和自动完成编辑器

推荐阅读