ag-grid 单元格编辑只允许数字

Question

如何在 ag-grid 单元格中进行简单的输入 type="number"？ 像这样：

cellRenderer: params => {
        if (isNaN(Number(params.value))
        {
            return params.value.replace(/[^0-9\.]+/g, '');
        } else {
            return params.value;
        }
    }

Answer 1

不幸的是，没有一种简单的方法可以做到这一点。 就我而言，我在官方页面ag-grid 上创建了单独的组件。 我希望在不久的将来他们会改变这一点，因为现在它非常不清楚和复杂。 谢谢大家的帮助！

Answer 2

你正在做的就像'Shotgun'。它不仅会在编辑时处理无效输入，而且即使在渲染时提供了一些错误的值（从源获取数据）。

您必须定义一个自定义组件来处理用户输入。

var columnDefs = [
    {
        field: "value",
        editable: true,
        cellEditorSelector: function (params) {
            if (params.data.type === 'age') { // here you can check using your logic if it needs numericCelleditor or not
                return {
                    component: 'numericCellEditor'
                };
            }
             return null;
        ...
        ...

自定义编辑器组件Ref Documentation

// function to act as a class
function NumericCellEditor() {
}

// gets called once before the renderer is used
NumericCellEditor.prototype.init = function (params) {
    // create the cell
    this.eInput = document.createElement('input');

    if (isCharNumeric(params.charPress)) {
        this.eInput.value = params.charPress;
    } else {
        if (params.value !== undefined && params.value !== null) {
            this.eInput.value = params.value;
        }
    }

    var that = this;
    this.eInput.addEventListener('keypress', function (event) {
        if (!isKeyPressedNumeric(event)) {
            that.eInput.focus();
            if (event.preventDefault) event.preventDefault();
        } else if (that.isKeyPressedNavigation(event)){
            event.stopPropagation();
        }
    });

    // only start edit if key pressed is a number, not a letter
    var charPressIsNotANumber = params.charPress && ('1234567890'.indexOf(params.charPress) < 0);
    this.cancelBeforeStart = charPressIsNotANumber;
};

NumericCellEditor.prototype.isKeyPressedNavigation = function (event){
    return event.keyCode===39
        || event.keyCode===37;
};


// gets called once when grid ready to insert the element
NumericCellEditor.prototype.getGui = function () {
    return this.eInput;
};

// focus and select can be done after the gui is attached
NumericCellEditor.prototype.afterGuiAttached = function () {
    this.eInput.focus();
};

// returns the new value after editing
NumericCellEditor.prototype.isCancelBeforeStart = function () {
    return this.cancelBeforeStart;
};

// example - will reject the number if it contains the value 007
// - not very practical, but demonstrates the method.
NumericCellEditor.prototype.isCancelAfterEnd = function () {
    var value = this.getValue();
    return value.indexOf('007') >= 0;
};

// returns the new value after editing
NumericCellEditor.prototype.getValue = function () {
    return this.eInput.value;
};

// any cleanup we need to be done here
NumericCellEditor.prototype.destroy = function () {
    // but this example is simple, no cleanup, we could  even leave this method out as it's optional
};

// if true, then this editor will appear in a popup 
NumericCellEditor.prototype.isPopup = function () {
    // and we could leave this method out also, false is the default
    return false;
};