ui-grid展示字符串数组新增条目时历史编辑丢失如何解决？

问题原因 #

ui-grid的绑定逻辑默认针对引用类型（对象）设计，你当前使用的是字符串原始值数组。JavaScript中字符串是不可变的值类型，编辑单元格时ui-grid修改的是内部缓存的实体值，无法同步回你定义的原始字符串数组。每次调用push新增条目触发grid重渲染时，grid会重新读取原始的未修改字符串数组，之前的编辑内容就会丢失。

解决方案 #

方案1：改用对象数组存储数据（官方推荐）

这是ui-grid的标准用法，可以从根源避免值类型带来的同步问题，修改后代码如下：

$scope.gridOptions = {
    enableSorting: true,
    enableGridMenu: true,
    gridMenuCustomItems: [
        {
            title: 'Add',
            action: function ($event) {
                // 新增对象而非字符串
                $scope.gridOptions.data.push({name: "New item"});
            },
            order: 210
        }
    ],
    columnDefs: [
      // 绑定对象的name属性，无需使用ENTITY_BINDING
      { name:'Name', field: 'name' }
    ],
    // 初始化数据改为对象数组格式
    data : [
      {name: "John Rogers"},
      {name: "David Michaels"},
      {name: "Andrew Johnson"},
      {name: "Donald McDonald"}
    ]
};

该方案下所有单元格修改都会直接作用在数组内的对象属性上，重渲染时不会丢失修改内容。

方案2：字符串数组兼容处理

如果业务要求必须保持字符串数组的结构，可以手动监听单元格编辑完成事件，把修改后的值同步回原始数组：

$scope.gridOptions = {
    enableSorting: true,
    enableGridMenu: true,
    // 注册gridApi监听编辑事件
    onRegisterApi: function(gridApi){
        $scope.gridApi = gridApi;
        gridApi.edit.on.afterCellEdit($scope, function(rowEntity, colDef, newValue, oldValue){
            const index = $scope.gridOptions.data.indexOf(rowEntity);
            if(index > -1){
                // 手动更新原始数组对应位置的字符串
                $scope.gridOptions.data[index] = newValue;
            }
        });
    },
    gridMenuCustomItems: [
        {
            title: 'Add',
            action: function ($event) {
                $scope.gridOptions.data.push("New item");
            },
            order: 210
        }
    ],
    columnDefs: [
      { name:'Name', field: uiGridConstants.ENTITY_BINDING }
    ],
    data : [
      "John Rogers",
      "David Michaels",
      "Andrew Johnson",
      "Donald McDonald"
    ]
};

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