0

我正在使用 angular slickgrid 来显示我的数据以及用于内联编辑数据。在 angular slickgrid 中，我使用默认的内联编辑器，使用如下所示的编辑器选项

editor: {
  model: Editors.longText,
  required: true,
  validator: CspfmDataValidator
},

现在我想添加一个编辑图标按钮，我想通过单击提供一个默认的内联编辑器。有可能提供这样的吗？

带有编辑图标的 slickgrid 单元格以打开编辑器

通过单击该自定义编辑铅笔图标，我想像这样打开默认的内联编辑器

单击编辑图标后打开的编辑器

4

1 回答 1

0

除非我误解了（你的问题不是很清楚），否则都在示例 3演示中。单击/双击由autoEdit布尔标志驱动。至于图标与编辑，如果要显示图标，则使用格式化程序，编辑器与图标无关（除了它们都使用的单元格值）。该示例有一个名为“Effort Driven”的列，其中有一个复选标记格式化程序，编辑器是一个复选框，可能看起来像您正在寻找的内容。如果这不能回答您的问题，那么您需要编辑您的问题并添加更多详细信息（通常一个好的 Stack Overflow 问题还包括您尝试过的代码）

编辑

根据您的问题更新，这并不是 SlickGrid 编辑的真正工作方式，但是如果您真的只想制作打开编辑器的图标，那么您可以通过事件阻止它（阻止除编辑图标单击之外的任何其他内容），您可以像这样做

{
        id: 'CspfmData',
        name: 'Institure',
        field: 'CspfmData',
        minWidth: 70,
        filterable: true,
        sortable: true,
        type: FieldType.string,
        editor: {
          model: Editors.longText,
          validator: CspfmDataValidator,
        },
        formatter: (row, cell, val) => {
          return val ? `${val} <span class="fa fa-pencil" style="padding: 2px; border: 1px solid #e0e0e0"></span>` : '';
        },
        onCellClick: (event) => {
          // cancel click event when it's not the edit icon
          if (!(event.target as HTMLSpanElement).classList.contains('fa-pencil')) {
            event.stopImmediatePropagation();
          }
        }
}

我个人认为这不是一个好主意，我从来没有真正在单元格内放置一个图标，因为它占用了我们通常没有的额外空间，但如果它真的是你想要的，那么这个解决方案应该可以工作。

我们使用的一种更好的方法是格式化可编辑的单元格，因此我们添加了一个额外的格式化程序以显示具有不同 css 样式的可编辑单元格，并且其优点是根本不占用任何空间，您可以看到示例 30上的演示具有蓝色背景的单元格是可编辑的（在我们的项目中，可编辑单元格上有一个简单的灰色轮廓）。这是一种更好的方法，因为它不占用任何空间

于 2022-01-13T13:38:55.617 回答