2

我正在使用 angular slickgrid 来显示我的数据以及用于内联编辑数据。在表格内联编辑工作正常，但存在一些例外情况。对于多选编辑器，当我按下确定按钮而不更改多选值时，未调用单元格更改回调。但编辑视图仍保持焦点状态。在编辑器中移除焦点的任何解决方案。

当前行为

多选编辑器在按下确定按钮时保持焦点而不更改数据。

在此处输入图像描述

预期行为

多选编辑器字段需要在按下确定按钮时移除焦点而不更改数据。

在这里，我分享了我的代码片段供您参考

html

<angular-slickgrid gridId="{{gridId}}" [columnDefinitions]="columnDefinitions" [gridOptions]="gridOptions"
    [dataset]="filteredResultList" (sgOnClick)="onGridItemClick($event)"
    (onAngularGridCreated)="angularGridReady($event)"
    (sgOnCellChange)="onCellChanged($event.detail.eventData, $event.detail.args)">
</angular-slickgrid>

网格选项

public gridOptions: GridOption = {
    enableAutoResize: true,
    autoEdit: false,
    autoCommitEdit: true,
    enableCellNavigation: true,
    editable: true,
    enableSorting: true,
    enableFiltering: true,
    i18n: this.translateService,
    enableExcelExport: true,
    enableExport: true,
    gridMenu: {
        hideExportExcelCommand: true,
        hideExportCsvCommand: true,
        customItems: [{
            command: "cspfm-excel-export",
            titleKey: "EXPORT_TO_EXCEL",
            iconCssClass: "fa fa-file-excel-o",
            action: (event, callbackArgs) => {
                this.excelExport(event, callbackArgs)
            }
        },
        {
            command: "cspfm-csv-export",
            titleKey: "EXPORT_TO_CSV",
            iconCssClass: "fa fa-download",
            action: (event, callbackArgs) => {
                this.excelExport(event, callbackArgs)
            }
        }
        ],
    },
    enableAutoTooltip: true,
    autoTooltipOptions: {
        enableForCells: true,
        enableForHeaderCells: true,
        maxToolTipLength: 1000
    },
    autoResize: {
        containerId: this.gridContainerId,
        calculateAvailableSizeBy: 'container'
    },
    exportOptions: {
        exportWithFormatter: true
    },
    excelExportOptions: {
        exportWithFormatter: true,
    },
    headerMenu: {
        hideColumnHideCommand: true
    },
    enableTranslate: true,
    presets: {
        sorters: [{
            columnId: this.tableColumnInfo['pfm187413']['pfm187413_name']['prop'],
            direction: 'ASC'
        }],
    }
};

表列信息

public tableColumnInfo = {
    "pfm187413": {
        "pfm187413_name": {
            "label": "LTFieldTrackSingleGLISTVA_WEB_Grid_with_List.Element.fieldtracksinglejuy.name",
            "fieldName": "name",
            "prop": "name",
            "fieldType": "TEXT",
            "child": "",
            "dateFormat": "",
            "mappingDetails": "",
            "currencyDetails": ""
        },
        "pfm187413_student": {
            "label": "LTFieldTrackSingleGLISTVA_WEB_Grid_with_List.Element.fieldtracksinglejuy.student",
            "fieldName": "student",
            "prop": "student",
            "fieldType": "TEXT",
            "child": "",
            "dateFormat": "",
            "mappingDetails": "",
            "currencyDetails": ""
        },
        "pfm187413_about": {
            "label": "LTFieldTrackSingleGLISTVA_WEB_Grid_with_List.Element.fieldtracksinglejuy.about",
            "fieldName": "about",
            "prop": "about",
            "fieldType": "TEXTAREA",
            "child": "",
            "dateFormat": "",
            "mappingDetails": "",
            "currencyDetails": ""
        },
        "pfm187413_qualification": {
            "label": "LTFieldTrackSingleGLISTVA_WEB_Grid_with_List.Element.fieldtracksinglejuy.qualification",
            "fieldName": "qualification",
            "prop": "qualification",
            "fieldType": "DROPDOWN",
            "child": "",
            "dateFormat": "",
            "mappingDetails": {
                "ma": "MA",
                "ba": "BA",
                "bt": "BTECH",
                "mca": "MCA"
            },
            "currencyDetails": ""
        },
        "pfm187413_dateofbirth": {
            "label": "LTFieldTrackSingleGLISTVA_WEB_Grid_with_List.Element.fieldtracksinglejuy.dateofbirth",
            "fieldName": "dateofbirth",
            "prop": "dateofbirth",
            "fieldType": "DATE",
            "child": "",
            "dateFormat": this.appUtilityConfig.userDateFormat,
            "mappingDetails": "",
            "currencyDetails": ""
        },
        "pfm187413_starttime": {
            "label": "LTFieldTrackSingleGLISTVA_WEB_Grid_with_List.Element.fieldtracksinglejuy.starttime",
            "fieldName": "starttime",
            "prop": "starttime",
            "fieldType": "TIMESTAMP",
            "child": "",
            "dateFormat": this.appUtilityConfig.userDateTimeFormat,
            "mappingDetails": "",
            "currencyDetails": ""
        },
        "pfm187413_gender": {
            "label": "LTFieldTrackSingleGLISTVA_WEB_Grid_with_List.Element.fieldtracksinglejuy.gender",
            "fieldName": "gender",
            "prop": "gender",
            "fieldType": "RADIO",
            "child": "",
            "dateFormat": "",
            "mappingDetails": {
                "m": "Male",
                "f": "Female"
            },
            "currencyDetails": ""
        },
        "pfm187413_favourites": {
            "label": "LTFieldTrackSingleGLISTVA_WEB_Grid_with_List.Element.fieldtracksinglejuy.favourites",
            "fieldName": "favourites",
            "prop": "favourites",
            "fieldType": "MULTISELECT",
            "child": "",
            "dateFormat": "",
            "mappingDetails": {
                "ds": "Dosa",
                "idli": "Idly",
                "ps": "Pasta",
                "sl": "Salad"
            },
            "currencyDetails": ""
        },
        "pfm187413_sports": {
            "label": "LTFieldTrackSingleGLISTVA_WEB_Grid_with_List.Element.fieldtracksinglejuy.sports",
            "fieldName": "sports",
            "prop": "sports",
            "fieldType": "CHECKBOX",
            "child": "",
            "dateFormat": "",
            "mappingDetails": {
                "ck": "Cricket",
                "ft": "Football",
                "rg": "Rugby"
            },
            "currencyDetails": ""
        },
        "pfm187413_servicecost": {
            "label": "LTFieldTrackSingleGLISTVA_WEB_Grid_with_List.Element.fieldtracksinglejuy.servicecost",
            "fieldName": "servicecost",
            "prop": "servicecost",
            "fieldType": "CURRENCY",
            "child": "",
            "dateFormat": "",
            "mappingDetails": "",
            "currencyDetails": {
                "currencyCode": "$",
                "display": true,
                "digitsInfo": "1.2-2",
                "locale": "ms-BN"
            }
        },
        "pfm187413_cgapercent": {
            "label": "LTFieldTrackSingleGLISTVA_WEB_Grid_with_List.Element.fieldtracksinglejuy.cgapercent",
            "fieldName": "cgapercent",
            "prop": "cgapercent",
            "fieldType": "DECIMAL",
            "child": "",
            "dateFormat": "",
            "mappingDetails": "",
            "currencyDetails": ""
        },
        "pfm187413_points": {
            "label": "LTFieldTrackSingleGLISTVA_WEB_Grid_with_List.Element.fieldtracksinglejuy.points",
            "fieldName": "points",
            "prop": "points",
            "fieldType": "NUMBER",
            "child": "",
            "dateFormat": "",
            "mappingDetails": "",
            "currencyDetails": ""
        },
        "pfm187413_url": {
            "label": "LTFieldTrackSingleGLISTVA_WEB_Grid_with_List.Element.fieldtracksinglejuy.url",
            "fieldName": "url",
            "prop": "url",
            "fieldType": "URL",
            "child": "",
            "dateFormat": "",
            "mappingDetails": "",
            "currencyDetails": ""
        },
        "pfm187413_isactive": {
            "label": "LTFieldTrackSingleGLISTVA_WEB_Grid_with_List.Element.fieldtracksinglejuy.isactive",
            "fieldName": "isactive",
            "prop": "isactive",
            "fieldType": "BOOLEAN",
            "child": "",
            "dateFormat": "",
            "mappingDetails": "",
            "currencyDetails": ""
        }
    }
};

列定义

public columnDefinitions: Array<Column> = [{
    id: this.tableColumnInfo['pfm187413']['pfm187413_name']['prop'],
    nameKey: this.tableColumnInfo['pfm187413']['pfm187413_name']['label'],
    field: this.tableColumnInfo['pfm187413']['pfm187413_name']['prop'],
    sortable: true,
    type: FieldType.string,
    exportCustomFormatter: CspfmDataFormatter,
    minWidth: this.columnMinWidth,
    formatter: CspfmDataFormatter,

    filterable: true,
    filter: {


        model: Filters.compoundInput
    },
    editor: {
        model: Editors.longText,
        required: true
    },
    params: {
        pipe: this.cspfmDataDisplay,
        fieldInfo: this.tableColumnInfo['pfm187413']['pfm187413_name']
    }
}, {
    id: this.tableColumnInfo['pfm187413']['pfm187413_student']['prop'],
    nameKey: this.tableColumnInfo['pfm187413']['pfm187413_student']['label'],
    field: this.tableColumnInfo['pfm187413']['pfm187413_student']['prop'],
    sortable: true,
    type: FieldType.string,
    exportCustomFormatter: CspfmDataFormatter,
    minWidth: this.columnMinWidth,
    formatter: CspfmDataFormatter,

    filterable: true,
    filter: {


        model: Filters.compoundInput
    },
    editor: {
        model: Editors.longText,
        required: true
    },
    params: {
        pipe: this.cspfmDataDisplay,
        fieldInfo: this.tableColumnInfo['pfm187413']['pfm187413_student']
    }
}, {
    id: this.tableColumnInfo['pfm187413']['pfm187413_about']['prop'],
    nameKey: this.tableColumnInfo['pfm187413']['pfm187413_about']['label'],
    field: this.tableColumnInfo['pfm187413']['pfm187413_about']['prop'],
    sortable: true,
    type: FieldType.string,
    exportCustomFormatter: CspfmDataFormatter,
    minWidth: this.columnMinWidth,
    formatter: CspfmDataFormatter,

    filterable: true,
    filter: {


        model: Filters.compoundInput
    },

    params: {
        pipe: this.cspfmDataDisplay,
        fieldInfo: this.tableColumnInfo['pfm187413']['pfm187413_about']
    }
}, {
    id: this.tableColumnInfo['pfm187413']['pfm187413_qualification']['prop'],
    nameKey: this.tableColumnInfo['pfm187413']['pfm187413_qualification']['label'],
    field: this.tableColumnInfo['pfm187413']['pfm187413_qualification']['prop'],
    sortable: true,
    type: FieldType.string,
    exportCustomFormatter: CspfmDataFormatter,
    minWidth: this.columnMinWidth,
    formatter: CspfmDataFormatter,
    queryField: this.tableColumnInfo['pfm187413']['pfm187413_qualification']['prop'] + appConstant['customFieldSuffix']['slickgrid'],
    filterable: true,
    filter: {
        collection: this.getLabelValue(this.qualification_371375),

        model: Filters.multipleSelect
    },
    editor: {
        model: Editors.singleSelect,
        collection: this.getKeyValue(this.qualification_371375),
        required: true
    },
    params: {
        pipe: this.cspfmDataDisplay,
        fieldInfo: this.tableColumnInfo['pfm187413']['pfm187413_qualification']
    }
}, {
    id: this.tableColumnInfo['pfm187413']['pfm187413_dateofbirth']['prop'],
    nameKey: this.tableColumnInfo['pfm187413']['pfm187413_dateofbirth']['label'],
    field: this.tableColumnInfo['pfm187413']['pfm187413_dateofbirth']['prop'],
    sortable: true,
    type: FieldType.date,
    exportCustomFormatter: CspfmDataFormatter,
    minWidth: this.columnMinWidth,
    formatter: CspfmDataFormatter,
    queryField: this.tableColumnInfo['pfm187413']['pfm187413_dateofbirth']['prop'] + appConstant['customFieldSuffix']['slickgrid'],
    filterable: true,
    filter: {

        operator: OperatorType.rangeInclusive,
        model: Filters.compoundDate
    },
    editor: {
        model: Editors.date,
        required: true,
        editorOptions:
            {
                onReady: (selectedDates, dateStr, instance) => {
                    const flatpickrYearElement = instance.currentYearElement;

                    const children = flatpickrYearElement.parentElement.children;
                    for (let i in children) {
                        if (children.hasOwnProperty(i)) {
                            children[i].style.display = 'none';
                        }
                    }

                    const yearSelect = document.createElement('select');
                    var minDate = new Date();
                    minDate.setHours(0, 0, 0, 0);
                    minDate.setFullYear(minDate.getFullYear() - 100);
                    var maxDate = new Date();
                    maxDate.setHours(23, 59, 58, 999);
                    maxDate.setFullYear(maxDate.getFullYear() + 50);
                    instance.config._minDate = minDate;
                    instance.config._maxDate = maxDate;
                    const minYear = new Date(instance.config._minDate).getFullYear();
                    const maxYear = new Date(instance.config._maxDate).getFullYear();

                    for (let i = minYear; i <= maxYear; i++) {
                        const option = document.createElement('option');
                        option.value = '' + i;
                        option.text = '' + i;
                        yearSelect.appendChild(option);
                    }
                    yearSelect.addEventListener('change', (event) => {
                        flatpickrYearElement.value = event.target['value'];
                        instance.changeYear(parseInt(event.target['value']));
                    });

                    yearSelect.className = 'flatpickr-monthDropdown-months';
                    yearSelect.id = 'flatpickr-custom-year-select';
                    yearSelect.value = instance.currentYearElement.value;

                    flatpickrYearElement.parentElement.appendChild(yearSelect);
                },
                onMonthChange: (selectedDates, dateStr, instance) => {
                    document.getElementById('flatpickr-custom-year-select')['value'] = '' + instance.currentYear;
                }
            } as FlatpickrOption
    },
    params: {
        pipe: this.cspfmDataDisplay,
        fieldInfo: this.tableColumnInfo['pfm187413']['pfm187413_dateofbirth']
    }
}, {
    id: this.tableColumnInfo['pfm187413']['pfm187413_starttime']['prop'],
    nameKey: this.tableColumnInfo['pfm187413']['pfm187413_starttime']['label'],
    field: this.tableColumnInfo['pfm187413']['pfm187413_starttime']['prop'],
    sortable: true,
    type: FieldType.dateTime,
    exportCustomFormatter: CspfmDataFormatter,
    minWidth: this.columnMinWidth,
    formatter: CspfmDataFormatter,
    queryField: this.tableColumnInfo['pfm187413']['pfm187413_starttime']['prop'] + appConstant['customFieldSuffix']['slickgrid'],
    filterable: true,
    filter: {

        operator: OperatorType.rangeInclusive,
        model: Filters.compoundDate
    },

    params: {
        pipe: this.cspfmDataDisplay,
        fieldInfo: this.tableColumnInfo['pfm187413']['pfm187413_starttime']
    },
    editor: {
        model: Editors.date,
        required: true,
        editorOptions:
            {
                onReady: (selectedDates, dateStr, instance) => {
                    const flatpickrYearElement = instance.currentYearElement;

                    const children = flatpickrYearElement.parentElement.children;
                    for (let i in children) {
                        if (children.hasOwnProperty(i)) {
                            children[i].style.display = 'none';
                        }
                    }

                    const yearSelect = document.createElement('select');
                    var minDate = new Date();
                    minDate.setHours(0, 0, 0, 0);
                    minDate.setFullYear(minDate.getFullYear() - 100);
                    var maxDate = new Date();
                    maxDate.setHours(23, 59, 58, 999);
                    maxDate.setFullYear(maxDate.getFullYear() + 50);
                    instance.config._minDate = minDate;
                    instance.config._maxDate = maxDate;
                    const minYear = new Date(instance.config._minDate).getFullYear();
                    const maxYear = new Date(instance.config._maxDate).getFullYear();

                    for (let i = minYear; i <= maxYear; i++) {
                        const option = document.createElement('option');
                        option.value = '' + i;
                        option.text = '' + i;
                        yearSelect.appendChild(option);
                    }
                    yearSelect.addEventListener('change', (event) => {
                        flatpickrYearElement.value = event.target['value'];
                        instance.changeYear(parseInt(event.target['value']));
                    });

                    yearSelect.className = 'flatpickr-monthDropdown-months';
                    yearSelect.id = 'flatpickr-custom-year-select';
                    yearSelect.value = instance.currentYearElement.value;

                    flatpickrYearElement.parentElement.appendChild(yearSelect);
                },
                onMonthChange: (selectedDates, dateStr, instance) => {
                    document.getElementById('flatpickr-custom-year-select')['value'] = '' + instance.currentYear;
                }
            } as FlatpickrOption
    }
}, {
    id: this.tableColumnInfo['pfm187413']['pfm187413_gender']['prop'],
    nameKey: this.tableColumnInfo['pfm187413']['pfm187413_gender']['label'],
    field: this.tableColumnInfo['pfm187413']['pfm187413_gender']['prop'],
    sortable: true,
    type: FieldType.string,
    exportCustomFormatter: CspfmDataFormatter,
    minWidth: this.columnMinWidth,
    formatter: CspfmDataFormatter,
    queryField: this.tableColumnInfo['pfm187413']['pfm187413_gender']['prop'] + appConstant['customFieldSuffix']['slickgrid'],
    filterable: true,
    filter: {
        collection: this.getLabelValue(this.gender_371378),

        model: Filters.multipleSelect
    },
    editor: {
        model: Editors.singleSelect,
        collection: this.getKeyValue(this.gender_371378),
        required: true
    },
    params: {
        pipe: this.cspfmDataDisplay,
        fieldInfo: this.tableColumnInfo['pfm187413']['pfm187413_gender']
    }
}, {
    id: this.tableColumnInfo['pfm187413']['pfm187413_favourites']['prop'],
    nameKey: this.tableColumnInfo['pfm187413']['pfm187413_favourites']['label'],
    field: this.tableColumnInfo['pfm187413']['pfm187413_favourites']['prop'],
    sortable: true,
    type: FieldType.string,
    exportCustomFormatter: CspfmDataFormatter,
    minWidth: this.columnMinWidth,
    formatter: CspfmDataFormatter,
    queryField: this.tableColumnInfo['pfm187413']['pfm187413_favourites']['prop'] + appConstant['customFieldSuffix']['slickgrid'],
    filterable: true,
    filter: {
        collection: this.getLabelValue(this.favourites_371379),
        operator: OperatorType.inContains,
        model: Filters.multipleSelect
    },
    editor: {
        model: Editors.multipleSelect,
        collection: this.getKeyValue(this.favourites_371379)
    },
    params: {
        pipe: this.cspfmDataDisplay,
        fieldInfo: this.tableColumnInfo['pfm187413']['pfm187413_favourites']
    }
}, {
    id: this.tableColumnInfo['pfm187413']['pfm187413_sports']['prop'],
    nameKey: this.tableColumnInfo['pfm187413']['pfm187413_sports']['label'],
    field: this.tableColumnInfo['pfm187413']['pfm187413_sports']['prop'],
    sortable: true,
    type: FieldType.string,
    exportCustomFormatter: CspfmDataFormatter,
    minWidth: this.columnMinWidth,
    formatter: CspfmDataFormatter,
    queryField: this.tableColumnInfo['pfm187413']['pfm187413_sports']['prop'] + appConstant['customFieldSuffix']['slickgrid'],
    filterable: true,
    filter: {
        collection: this.getLabelValue(this.sports_371380),
        operator: OperatorType.inContains,
        model: Filters.multipleSelect
    },
    editor: {
        model: Editors.multipleSelect,
        collection: this.getKeyValue(this.sports_371380),
        operator: OperatorType.inContains
    },
    params: {
        pipe: this.cspfmDataDisplay,
        fieldInfo: this.tableColumnInfo['pfm187413']['pfm187413_sports']
    }
}, {
    id: this.tableColumnInfo['pfm187413']['pfm187413_servicecost']['prop'],
    nameKey: this.tableColumnInfo['pfm187413']['pfm187413_servicecost']['label'],
    field: this.tableColumnInfo['pfm187413']['pfm187413_servicecost']['prop'],
    sortable: true,
    type: FieldType.number,
    exportCustomFormatter: CspfmDataFormatter,
    minWidth: this.columnMinWidth,
    formatter: CspfmDataFormatter,

    filterable: true,
    filter: {


        model: Filters.compoundInputNumber
    },
    editor: {
        model: Editors.float,
        params: {
            decimalPlaces: 2
        },
        required: true
    },
    params: {
        pipe: this.cspfmDataDisplay,
        fieldInfo: this.tableColumnInfo['pfm187413']['pfm187413_servicecost']
    }
}, {
    id: this.tableColumnInfo['pfm187413']['pfm187413_cgapercent']['prop'],
    nameKey: this.tableColumnInfo['pfm187413']['pfm187413_cgapercent']['label'],
    field: this.tableColumnInfo['pfm187413']['pfm187413_cgapercent']['prop'],
    sortable: true,
    type: FieldType.number,
    exportCustomFormatter: CspfmDataFormatter,
    minWidth: this.columnMinWidth,
    formatter: CspfmDataFormatter,

    filterable: true,
    filter: {
        model: Filters.compoundInputNumber
    },
    params: {
        pipe: this.cspfmDataDisplay,
        fieldInfo: this.tableColumnInfo['pfm187413']['pfm187413_cgapercent']
    }
}, {
    id: this.tableColumnInfo['pfm187413']['pfm187413_points']['prop'],
    nameKey: this.tableColumnInfo['pfm187413']['pfm187413_points']['label'],
    field: this.tableColumnInfo['pfm187413']['pfm187413_points']['prop'],
    sortable: true,
    type: FieldType.number,
    exportCustomFormatter: CspfmDataFormatter,
    minWidth: this.columnMinWidth,
    formatter: CspfmDataFormatter,
    filterable: true,
    filter: {
        model: Filters.compoundInputNumber
    },
    editor: {
        model: cspfmCustomEditor,
    },
    params: {
        pipe: this.cspfmDataDisplay,
        fieldInfo: this.tableColumnInfo['pfm187413']['pfm187413_points']
    }
}, {
    id: this.tableColumnInfo['pfm187413']['pfm187413_url']['prop'],
    nameKey: this.tableColumnInfo['pfm187413']['pfm187413_url']['label'],
    field: this.tableColumnInfo['pfm187413']['pfm187413_url']['prop'],
    sortable: true,
    type: FieldType.string,
    exportCustomFormatter: CspfmDataFormatter,
    minWidth: this.columnMinWidth,
    formatter: CspfmDataFormatter,
    filterable: true,
    filter: {
        model: Filters.compoundInput
    },
    editor: {
        model: Editors.longText,
        required: true
    },
    params: {
        pipe: this.cspfmDataDisplay,
        fieldInfo: this.tableColumnInfo['pfm187413']['pfm187413_url']
    }
}, {
    id: this.tableColumnInfo['pfm187413']['pfm187413_isactive']['prop'],
    nameKey: this.tableColumnInfo['pfm187413']['pfm187413_isactive']['label'],
    field: this.tableColumnInfo['pfm187413']['pfm187413_isactive']['prop'],
    sortable: true,
    type: FieldType.string,
    exportCustomFormatter: CspfmDataFormatter,
    minWidth: this.columnMinWidth,
    formatter: CspfmDataFormatter,

    filterable: true,
    filter: {
        collection: this.getLabelValue({
            true: "true",
            false: "false"
        }),

        model: Filters.multipleSelect
    },
    editor: {
        model: Editors.checkbox,
        collection: [{
            value: true,
            label: 'True'
        },
        {
            valued: false,
            label: 'False'
        }
        ]
    },
    params: {
        pipe: this.cspfmDataDisplay,
        fieldInfo: this.tableColumnInfo['pfm187413']['pfm187413_isactive']
    }
}];

角度 slickgrid 示例项目的行为

在此处输入图像描述

软件版本

角度：7.3.5

Angular-Slickgrid：2.19.0

打字稿：3.1.6

操作系统：Windows 10

节点：10.16.3

NPM：6.9.0

4

1 回答 1

0

您需要网格选项autoCommitEdit: true来立即提交更改，这将推动更改、关闭编辑器并因此失去焦点。这样做也将立即触发一个onCellChange事件（而在autoCommitEdit: false您离开或模糊之前不会触发）。

默认值是autoCommitEdit: false具有您提到的行为并且是正常的。您需要移开标签或将注意力集中在另一个单元格上。我个人总是使用autoCommitEdit: true来避免这种行为。您提到的行为被认为是“按设计”并且不会改变。

另请注意，autoCommitEdit: false在文本编辑器上使用将转到下一个可用行，而autoCommitEdit: true只会提交当前单元格而不打开任何其他编辑器。这又是一种我不太喜欢的行为，但有些用户可能会喜欢。

所以快速的答案是使用autoCommitEdit: true

笔记

请不要覆盖选择编辑器的方法，如果你是，那么你在这里onClose完全用自己的onClose用法覆盖了库。仅在 中使用和有效（当触发它调用内部代码save时检查标志），因此如果您覆盖然后这个标志没有任何效果。autoCommitEditonCloseautoCommitEditonClose

编辑 1

我无法在演示中复制您的问题......实际上这不再是真的，我误解了最初的问题。问题中提出的有问题的行为来自SlickGrid（核心库）

编辑 2

您可能可以通过向 中添加一个事件来解决您的问题，body然后单击然后运行编辑器提交。就像是

document.body.addEventListener('click', () => {
  // auto-commit any opened editor, that will close the editor and commit the changes
  if (this.grid.getEditorLock()) {
    this.grid.getEditorLock().commitCurrentEdit();
  }
});

自动提交

于 2020-08-13T22:55:36.440 回答