9

我正在使用 ng-grid 的新 3.0 版本ui-grid在我的应用程序中制作网格。我想要做的是使我的表中的一个可编辑单元格成为一个ng-options下拉列表，其中填充了使用角度工厂检索到的数据。

我正在尝试通过使用ui-grid的editableCellTemplate功能来做到这一点。

这是一些示例代码：

HTML：

<div ui-grid="gridOptions" ui-grid-edit class="grid"></div>

控制器：

$scope.gridOptions = {
    enableSorting: true,
    enableFiltering: true,
    enableCellEditOnFocus: true,
    columnDefs: [
      { field: 'name',
        sort: {
          direction: 'desc',
          priority: 1
        }
      },
      { field: 'gender', editType: 'dropdown', enableCellEdit: true,
          editableCellTemplate: 'temp.html' },
      { field: 'company', enableSorting: false }
]};

temp.html：

<div>
    <select ng-model="row.entity.gender" data-ng-options="d as d.type for d in genderType">
        <option value="" selected disabled>Choose Gender</option>
    </select>
</div>

这是一个带有代码的plunker。[注意：这只是示例代码。ng-options 的数组是从实际代码中的角度工厂中提取的，并且未在范围内声明。editDropdownOptionsArray 可能不起作用，因为数据是动态的。]

是否可以使用 ui-grid 执行此操作？我认为这可能是范围问题，因为如果我将 ng-option 代码放在我的 HTML 页面中，它会按预期工作，但我可以从 ui-grid 文档中收集到 temp.html 文件应该在范围内. 我知道这些东西仍然处于不稳定的版本中，但是对于此事的任何帮助将不胜感激！

**2015 年 3 月 31 日更新：**

如果您正在尝试此解决方案并且它不起作用，请注意。一月份，外部作用域的代码被重构getExternalScopes()为grid.addScope.source. https://github.com/angular-ui/ng-grid/issues/1379

这是带有新代码的更新 plunkr：点击我！

4

4 回答 4

7

您需要在 ui-grid 的 3.x 版本中使用external-scopes功能。您无法在选择下拉列表中获得任何选项的原因是 ui-grid 现在使用隔离范围，这将不允许您在单元格中直接访问应用范围变量。

我能够通过以下步骤让您的 plunkr 工作 - 请参阅更新的 plunkr

脚步：

1） 在 index.html 中，在网格 div 中指定external-scopes属性，即修改

<div ui-grid="gridOptions" ui-grid-edit class="grid"></div>

至

<div ui-grid="gridOptions" ui-grid-edit class="grid" external-scopes="myExternalScope"></div>

2)在 app.js 中，将范围分配给我们的 external-scope 属性，即添加以下行：

$scope.myExternalScope = $scope;

3)在 temp.html 中，使用getExternalScopes()访问 genderTypes 数组，即修改editableCellTemplate值

<select ng-model="row.entity.Gender" data-ng-options="d as d.type for d in genderType">

至

<select ng-model="row.entity.Gender" data-ng-options="d as d.type for d in getExternalScopes().genderTypes">

额外的想法：

1) 我没有找到适合我需要的ui-grid/dropdownEditor - 因此，还没有尝试过。

2）您也可以添加cellTemplate以及editableCellTemplate。您可以分配两个相同的值。

参考：

  1. http://ui-grid.info/docs/#/tutorial/305_externalScopes
于 2014-10-14T23:46:59.700 回答
7

不确定这是否对您有所帮助，因为我也刚刚开始使用新的 ng-grid。

好像很多选项都变了。根据我了解到的情况，我可以告诉你，如果你想要一个下拉菜单，就不再需要 cellTemplate 了。它已经内置了。

像这样激活它：

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

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


    $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
      }],
      onRegisterApi: function(gridApi) {
        grid = gridApi.grid;
      }
    };

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

  }
]);

我不确定我是否喜欢这种方法，但时间和使用情况会告诉...

哦，我还没有发现如何检测变化。仍在搜索（糟糕的）文档以查找事件，或者我是否必须查看网格数据以进行更改。

告诉我你是否发现了一些关于这个的东西。

到目前为止，玩得开心这个Plunker

更新：

我发现了如何对变化做出反应。添加/更改这些行：

  onRegisterApi: function(gridApi) {
    grid = gridApi.grid;
    gridApi.edit.on.afterCellEdit($scope, function(rowEntity, colDef) {
      alert(rowEntity.name + ' ' + rowEntity.gender);
    });
  }

离开编辑模式时会弹出警报。例如单击单元格外部。

希望这可以帮助。

于 2014-10-09T12:09:01.737 回答
1

您实际上可以使用editDropdownOptionsArray. 初始化后完全可以编辑它！

$scope.someFunction = function(){
  $scope.coulmnDefs.columnDefs[1].editDropdownOptionsArray = [
    {
      title: 'Some changed option',
      value: 'opt1'
    },
    {
      title: 'Some other changed option',
      value: 'opt2'
    }
  ]
}
于 2015-08-14T14:17:25.523 回答
0

我只是更正了文件路径，这个错误就消失了。注意到，当我的文件路径错误（文件不存在）时，就会看到这个错误。

于 2018-06-25T20:51:24.347 回答