如何使用自定义样式突出显示单元格中的选定范围?

时间:2019-06-04 10:39:17

标签: javascript ag-grid

我有一个带有网格的ag-grid,其可编辑单元格上具有自定义样式。我在gridOptions中启用了范围选择。当我选择具有默认样式的单元格区域时,可以看到所选区域被突出显示。但是,如果我选择了自定义样式的单元格范围,则该范围实际上是正确选择的,但是没有视觉突出显示来指示这一点。

gridOptions: {
    defaultColDef: {
        sortable: true,
        filter: true,
        resizable: true,
        editable: this.makeCellsEditable,
        enableValue: true,
        enableRowGroup: false,
        enablePivot: false,
        valueFormatter: this.valueFormatter
    },
    columnDefs: [],
    rowData: [],
    rowSelection: "single",
    enableRangeSelection: true
}

这是colDefs中的自定义可编辑字段之一。

{
    headerName: "Fct/Act Start",
    field: "ProposedActualForecastStartDate",
    filter: "agDateColumnFilter",
    cellEditor: "datePicker",
    cellStyle: this.editableCellStyle,
    editable: true
}

此处定义了可编辑的单元格样式...

editableCellStyle: function (params) {
    if (this.suppressCellStyleChanges) return;

    if (this.cellValueChanged(params)) {
        return { "background-color": "#f8f9b1" };
    }

    if (params.node.rowIndex === 0 || (params.node.rowIndex % 2) === 0) {
        return { "background-color": "white" };
    } else {
        return { "background-color": "#DEEAF6" };
    }
}

我知道自定义样式已经覆盖了普通选择样式。我只是不知道如何修改样式以告知何时选择了单元格。

0 个答案:

没有答案