AG-Grid多列共用自定义编辑器：值同步变更问题求解

你遇到的问题核心是自定义编辑器的取值逻辑没有维护独立的实例状态，导致多个复用该编辑器的单元格共享了错误的取值规则，从而出现修改一列另一列跟着变化的情况。

问题根源 #

你的getValue方法硬编码了DOM元素的索引：

getValue: function () {
    return $($(this.inputSelect).find('a')[1]).text();
}

这里的[1]是固定索引，不管当前选中的是哪个选项，都会强制取第二个<a>标签的文本；同时当多个单元格激活编辑器时，这个DOM选择器还可能意外指向其他单元格的编辑器元素，最终引发联动错误。

解决方案 #

我们需要让每个编辑器实例维护自己的独立选中状态，具体修改如下：

1. 给编辑器实例添加selectedValue属性，存储当前单元格的选中值
2. 在init方法中给下拉选项绑定点击事件，实时更新selectedValue
3. 修改getValue方法，返回实例自身的selectedValue，不再依赖硬索引DOM元素

修改后的完整代码：

self.selectCellEditor = function () {
    // 初始化实例的选中值属性
    this.selectedValue = '';
};
self.selectCellEditor.prototype = {
    init: function (params) {
        // 初始化选中值为当前单元格的初始值
        this.selectedValue = params.value;
        var options = '';
        for(var i = 0; i < params.values.length; i++) {
            // 给初始选中的选项添加标记类
            var isSelected = params.values[i] === params.value ? 'class="selected"' : '';
            options += '<li '+isSelected+'><a href="#" class="option">'+params.values[i]+'</a></li>';
        }
        this.inputSelect = document.createElement('div');
        this.inputSelect.className = "dropdown btn-group bootstrap-select";
        this.inputSelect.innerHTML = '<button class="btn dropdown-toggle bs-placeholder btn-default" type="button" data-toggle="dropdown"><span class="btn-text">'+params.value+'</span>' + '<span class="caret"></span></button>' + '<ul class="dropdown-menu inner">'+options+'</ul>';
        
        var that = this;
        // 给每个选项绑定点击事件，更新选中状态和按钮显示文本
        $(this.inputSelect).find('.option').on('click', function(e) {
            e.preventDefault();
            var selectedText = $(this).text();
            that.selectedValue = selectedText;
            // 更新按钮显示的文本
            $(that.inputSelect).find('.btn-text').text(selectedText);
            // 同步更新选中选项的视觉标记
            $(that.inputSelect).find('li').removeClass('selected');
            $(this).parent('li').addClass('selected');
        });
        
        return this.inputSelect;
    },
    getValue: function () {
        // 返回实例自身维护的选中值，避免DOM依赖
        return this.selectedValue;
    },
    getGui: function () {
        return this.inputSelect;
    },
    destroy: function () {
        // 移除事件监听，防止内存泄漏
        $(this.inputSelect).find('.option').off('click');
        $(this.inputSelect).remove();
    }
}

关键修改说明 #

• 每个编辑器实例都有独立的selectedValue，确保不同单元格的选中状态互不干扰
• 点击选项时同步更新实例的选中值和按钮显示文本，提升用户体验
• getValue直接返回实例的选中值，彻底避免了DOM选择器的不确定性
• 在destroy方法中移除事件监听，防止长期运行引发内存泄漏

这样修改后，两个列复用同一个自定义编辑器时，各自单元格的选中状态就会完全独立，修改其中一列不会再影响另一列了。

内容的提问来源于stack exchange，提问作者ConfusedDeveloper