在ui-grid 3.0中失去焦点时编辑单元格并保持编辑状态答案

【问题标题】：Edit a cell and keep the editing status when losing focus in ui-grid 3.0在ui-grid 3.0中失去焦点时编辑单元格并保持编辑状态
【发布时间】：2015-06-02 18:56:21
【问题描述】：

我的出发点是Plunker，它包含一个使用 AngularJS 和 UI-Grid 3.0 制作的表格。当我双击带有模板的单元格时（我们以性别为例），当它进入编辑模式时，一个选择元素是可见的。

但是当这个单元格失去焦点时（即点击表格外部或另一个单元格），选择元素消失并且单元格回到之前的状态。

即使这是默认的做法和通常的做法，我想保持每个单元格的编辑模式，无论焦点是否丢失，只有在选择一个选项时才返回固定模式.我需要能够同时保持一个或多个单元格处于此编辑模式。

如果 JSON 数组中的性别字段在编辑模式下可以处于“中间”状态（可能是当前第三项“两者”或其他任何内容）并更改为“男性”，那就太好了或“女性”一旦选择了一个选项。

当前代码如下：

HTML：

  <div ng-controller="MainCtrl">
    <div ui-grid="gridOptions" ui-grid-edit class="grid"></div>
    <hr>{{gridOptions.data | json}}
  </div>

JS：

var app = angular.module('app', ['ngAnimate', 'ui.grid', 'ui.grid.edit']);

app.controller('MainCtrl', ['$scope', '$http',
  function($scope, $http) {

    $scope.genderTypes = [{
      ID: 1,
      type: 'female'
    }, {
      ID: 2,
      type: 'male'
    }, {
      ID: 3,
      type: 'both'
    }];

    $scope.gridOptions = {
      enableSorting: true,
      enableFiltering: true,
      enableCellEditOnFocus: true,
      columnDefs: [{
        field: 'name',
        sort: {
          direction: 'desc',
          priority: 1
        }
      }, {
        field: 'gender',
        editType: 'dropdown',
        enableCellEdit: true,
        editableCellTemplate: 'ui-grid/dropdownEditor',
        editDropdownOptionsArray: $scope.genderTypes,
        editDropdownIdLabel: 'type',
        editDropdownValueLabel: 'type'
      }, {
        field: 'company',
        enableSorting: false
      }]
    };

    $http.get('https://rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
      .success(function(data) {
        $scope.gridOptions.data = data;
      });

  }
]);

【问题讨论】：

标签： javascript angularjs angular-ui-grid

【解决方案1】：

我刚刚仔细查看了您的代码，但您应该将 editDropdownIdLabel 作为“ID”。这应该这样做。如果您要进行更复杂的更改，请查看下面的建议。

ui-grid 中有一个名为 uiGridEventEndCellEdit 的函数，即使您更改了网格中的数据，您是否已将更改推送到服务器端？因此，在您更改某些内容后，您可能会失去焦点并捕捉到事件，然后相应地更新您的模型。

【讨论】：