AG Grid单元格编辑设置：仅高亮数字保留符号且可手动修改

要实现点击带负号的数字单元格时，仅高亮数字部分、保留负号的需求，可以通过以下两种方式实现：

方法一：修改默认文本编辑器的选中范围 #

针对AG Grid自带的agTextCellEditor，通过cellEditorParams的afterGuiAttached回调调整输入框的选中范围：

columnDefs: [
  {
    field: 'yourNumberField',
    editable: true,
    cellEditor: 'agTextCellEditor',
    cellEditorParams: {
      afterGuiAttached: (params) => {
        const input = params.eInput;
        // 仅当值以负号开头时，选中负号后的数字部分
        if (input.value?.startsWith('-')) {
          input.setSelectionRange(1, input.value.length);
        }
      }
    }
  }
]

原理：编辑器挂载完成后，获取输入框元素，判断值是否以负号开头，通过setSelectionRange将选中范围设置为从索引1（负号之后）到文本末尾，这样点击单元格时只会选中数字部分，负号保留。

方法二：自定义单元格编辑器 #

如果需要更灵活的控制，可以自定义编辑器组件，在初始化时设置选中范围（以原生JS为例，框架版本可类比调整）：

// 自定义编辑器组件
function CustomNumberEditor() {
  let inputEl;

  this.init = function(params) {
    inputEl = document.createElement('input');
    inputEl.type = 'text';
    inputEl.value = params.value;

    // 延迟设置选中范围，覆盖AG Grid默认的全选行为
    setTimeout(() => {
      if (inputEl.value.startsWith('-')) {
        inputEl.setSelectionRange(1, inputEl.value.length);
      }
    }, 0);
  };

  this.getValue = function() {
    return inputEl.value;
  };

  this.getGui = function() {
    return inputEl;
  };
}

// 在列定义中使用自定义编辑器
columnDefs: [
  {
    field: 'yourNumberField',
    editable: true,
    cellEditor: CustomNumberEditor
  }
]

注意事项 #

• 使用setTimeout是为了避开AG Grid默认的全选逻辑，确保自定义的选中范围生效；
• 两种方案都支持手动删除负号、输入正数的操作，不影响正常编辑流程。

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