Question

我已经成功地将自己的组件呈现为cellEditor，并且希望并在离开时尝试验证该值并防止在失败时关闭该值。

如果我查看this，然后查看https://www.ag-grid.com/javascript-grid-cell-editing/#editing-api，则有可取消的回调函数可用于编辑。但是在此回调函数中，是否有一种方法可以访问当前的实例化组件？我认为这将是处理此问题的最简单方法。

我正在使用vee-validate，因此验证功能是异步的，只是为了牢记。

Answer 1

使用全行编辑。创建一个全局变量，如

var problemRow = -1;

然后订阅此事件：

 onRowEditingStarted: function (event) {
    if (problemRow!=-1 && event.rowIndex!=problemRow) {
        gridOptions.api.stopEditing();
        gridOptions.api.startEditingCell({
            rowIndex: problemRow,
            colKey: 'the column you want to focus',
        });
    }
},
onRowEditingStopped: function (event) {
    if (problemRow==-1) {
        if (event.data.firstName != "your validation") {
            problemRow = event.rowIndex
            gridOptions.api.startEditingCell({
                rowIndex: problemRow,
                colKey: 'the column you want to focus',
            });
        }
    }
    if (problemRow == event.rowIndex) {
        if (event.data.firstName != "your validation") {
            problemRow = event.rowIndex
            gridOptions.api.startEditingCell({
                rowIndex: problemRow,
                colKey: 'the column you want to focus',
            });
        }
        else{
            problemRow=-1;   
        }

    }
},

Answer 2

我有一个类似的问题-尽管在AngularJS和ag-grid的非Angular模式下-我需要在单元格编辑器未通过验证时阻止导航。

文档不是很详细，所以最后我添加了一个自定义单元格编辑器，该表单的输入框周围包裹着表单（以处理红色突出显示等细微之处），然后使用Angular JS验证。到现在为止，我很高兴，但是关键的部分是试图防止用户在值无效时跳出或跳开，以便用户至少可以解决问题。

我这样做是通过在添加单元格时添加一个值解析器，然后在其中根据各种规则如果该值无效，则抛出异常。我知道这不是理想的方法-但这确实可以防止ag-grid试图脱离细胞。

我尝试了许多解决问题的方法-使用tabToNextCell事件，suppressKeyboardEvent，navigateToNextCell，onCellEditingStopped-仅举几例-这是唯一的使它正常工作。

这是我的价值分析器，它的价值：

var codeParser = function (args) {

        var cellEditor = _controller.currentCellEditor.children['codeValue'];
        var paycodeId = +args.colDef.field;
        var paycodeInfo = _controller.paycodes.filter(function (f) { return f.id === paycodeId; })[0];


    // Check against any mask
    if (paycodeInfo && paycodeInfo.mask) {

        var reg = new RegExp("^" + paycodeInfo.mask + '$');
        var match = args.newValue.match(reg);

        if (!match) {
            $mdToast.show($mdToast.simple().textContent('Invalid value - does not match paycode format.').position('top right').toastClass('errorToast'))
                .then(function(r) {
                    _controller.currentCellEditor.children['codeValue'].focus();
                });

            throw 'Invalid value - does not match paycode format.';
        }
    }


    return true;
};

在单元格编辑器组件初始化期间设置了_controller.currentCellEditor值。我这样做是为了在烤面包中显示错误之后重新调整控件的位置：

CodeValueEditor.prototype.init = function (params) {

        var form = document.createElement('form');
        form.setAttribute('id', 'mainForm');
        form.setAttribute('name', 'mainForm');


        var input = document.createElement('input');
        input.classList.add('ag-cell-edit-input');
        input.classList.add('paycode-editor');
        input.setAttribute('name', 'codeValue');
        input.setAttribute('id', 'codeValue');
        input.tabIndex = "0"; 
        input.value = params.value;

        if (params.mask) {
            input.setAttribute('data-mask', params.mask);
            input.setAttribute('ng-pattern','/^' + params.mask + '$/');
            input.setAttribute('ng-class',"{'pattern-error': mainForm.codeValue.$error.pattern}");
            input.setAttribute('ng-model', 'ctl.currentValue');
        }

        form.appendChild(input);

        this.container = form;

        $compile(this.container)($scope);
        _controller.currentValue = null;
        // This is crucial - we can then reference the container in
        // the parser later on to refocus the control
        _controller.currentCellEditor = this.container;
        $scope.$digest();

    };

然后在网格选项onCellEditingStopped事件中清除：

        onCellEditingStopped: function (event) {
            $scope.$apply(function() {
                _controller.currentCellEditor = null;
            });
        },

我意识到这不是专门针对您的组件（Vue.js），但希望它将对其他人有所帮助。如果有人用更好的方法做到了，我会不知所措，因为我不喜欢抛出不必要的异常！

如何使用AG-Grid中的自定义Vue组件防止验证错误时关闭单元格编辑模式

2 个答案: