aurelia - 如何在 aurelia slickgrid/slickgrid 中的 cloumn 值旁边显示图标？

Question

我想在金额列中的值旁边显示编辑图标。这是因为 Amount 列实际上是可编辑的。但是为了给用户一个提示，我想在它旁边显示一些编辑图标。如何在 aurelia slickgrid 中做到这一点？

或者也许有一种方法可以在悬停时突出显示一个字段？我正在使用 aurelia slickgrid 并查看aurelia slickgrid本身是否有一些选项。

Answer 1

转到 aurelia slickgrid 示例链接并单击示例源代码的链接

打开的时候有一个叫做defineGrids的方法

/* Define grid Options and Columns */
  defineGrids() {
    this.columnDefinitions1 = [
      ..., 
      ...,
      ...,
      ...,
      ...,
      { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', formatter: myCustomCheckmarkFormatter, type: FieldType.number, sortable: true, minWidth: 100 }
    ];
    ... rest of the code
  }

带有 id 的行effort-driven是放置图标的位置。换句话说，当您将数据集合（通常是 json 对象数组）推送到表时，具有键名的数据对象的值将effort-driven被赋予具有 id 的列effort-driven。此外，对于每个传递到列的值，该方法myCustomCheckmarkFormatter会重新格式化它（例如 0 -> false 或 null -> 未填充）并将其放置到相应表的单元格中。看下面的方法：

// create my custom Formatter with the Formatter type
const myCustomCheckmarkFormatter: Formatter<DataItem> = (_row, _cell, value) => {
  // you can return a string of a object (of type FormatterResultObject), the 2 types are shown below
  return value ? `<i class="fa fa-fire red" aria-hidden="true"></i>` : { text: '<i class="fa fa-snowflake-o" aria-hidden="true"></i>', addClasses: 'lightblue', toolTip: 'Freezing' };
};

如您所见，当调用该方法时，它会返回一个图标，例如<i class="fa fa-fire red" aria-hidden="true"></i>放置在表格单元格中的图标。

Answer 2

我在金额旁边添加了一个编辑图标，

{
                id: "Edit",
                field: "edit",
                excludeFromColumnPicker: true,
                excludeFromExport: true,
                excludeFromQuery: true,
                excludeFromGridMenu: true,
                excludeFromHeaderMenu: true,
                minWidth: 30,
                maxWidth: 30,
                formatter: Formatters.editIcon,
            },

并使用 ghiscoding 评论中的这种自定义格式：

const customEditableInputFormatter: Formatter = (_row, _cell, value, columnDef, dataContext, grid) => {
const isEditable = !!columnDef.editor;
value = (value === null || value === undefined) ? '' : value;
return isEditable ? `<div style="background-color: aliceblue">${value}</div>` : value;

};

结果如图所示。