Question

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

但是当这个单元格失去焦点时（即在表格外或在另一个单元格上单击），select元素会消失，单元格会回到之前的状态。

尽管这是默认操作和常用操作，但我想保留每个单元格的编辑模式，无论焦点是否丢失，只有选择了一个选项时才返回固定模式。我需要能够同时保持一个或多个单元格处于此编辑模式。

如果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;
      });

  }
]);

Answer 1

我只是轻视你的代码，但你应该将editDropdownIdLabel作为＆＃39; ID＆＃39;。这应该做到这一点。如果您正在进行更复杂的更改，请查看下面的建议。

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

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

1 个答案: