我想在金额列中的值旁边显示编辑图标。这是因为 Amount 列实际上是可编辑的。但是为了给用户一个提示，我想在它旁边显示一些编辑图标。如何在 aurelia slickgrid 中做到这一点？
或者也许有一种方法可以在悬停时突出显示字段？ 我正在使用 aurelia slickgrid 并查看 aurelia slickgrid 本身是否有一些选项。
【问题讨论】：
标签： aurelia slickgrid angular-slickgrid
我在金额旁边添加了一个编辑图标，
{
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;
};
结果如图所示。
【讨论】：
addClass 当你这样做时，它是整个单元容器，而不是单元容器内的 div。看到这个FormatterResultObject - Wiki 类似return { addClass: 'custom-editor', text: value }
转到 aurelia slickgrid 示例link 并点击示例源代码链接
打开的时候有个方法叫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>，该图标放置在表格的单元格中。
【讨论】：