9

アプリケーションでグリッドを作成するために、 ng-grid の新しい 3.0 リリースui-gridを使用しています。私がやろうとしているのは、テーブル内の編集可能なセルの 1 つを、Angular ファクトリで取得したデータで満たされた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>

これがコード付きのプランカーです。[注:これは単なるサンプル コードです。ng-options の配列は、実際のコードで angular factory から取り込まれており、スコープで宣言されていません。データは動的であるため、editDropdownOptionsArray はおそらく機能しません。]

ui-gridでこれを行うことは可能ですか? ng-option コードを HTML ページに配置すると期待どおりに機能するため、おそらくスコープの問題だと思いましたが、ui-grid ドキュメントから収集できるのは、temp.html ファイルがスコープ内にある必要があることです。 . 私はこれがまだ不安定なリリースであることを知っていますが、この問題に関する助けをいただければ幸いです!

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

このソリューションを試してみて、うまくいかない場合は注意してください。1 月に、外部スコープのコードが から にリファクタリングされgetExternalScopes()ましたgrid.addScope.source。https://github.com/angular-ui/ng-grid/issues/1379

新しいコードで更新された plunkr は次のとおりです。Click Me!

4

4 に答える 4

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

  }
]);

このアプローチが気に入っているかどうかはわかりませんが、時間と使用法によってわかります...

ああ、変更を検出する方法がわかりませんでした。イベントの（お粗末な）ドキュメントをまだ検索しているか、グリッドデータの変更を監視する必要があるかどうか。

これについて何か見つけたことがあれば教えてください。

これまでのところ、このプランカーを楽しんでください

アップデート：

変化に対応する方法を学びました。次の行を追加/変更します。

  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 に答える