38

私のユースケースはとてもシンプルです。ユーザーは、セルを編集した後 (enableCellEdit: true)、データを「自動的に」サーバーに送信する必要があります (セルのぼかしで)。さまざまなアプローチを試みましたが、適切に機能するものはありませんでした。私は最小限のグリッドを持っています:

// Configure ng-grid
$scope.gridOptions = {
    data: 'questions',
    enableCellSelection: true,
    selectedItems: $scope.selectedRow,
    multiSelect: false,
    columnDefs: [
        {field: 'id', displayName: 'Id'},
        {field: 'name', displayName: 'Name'},
        {field: 'answers[1].valuePercent', displayName: 'Rural', enableCellEdit: true}
    ]
};

たとえば、グリッドに渡されるデータ モデルを監視しようとしました。しかし、そうしても編集されたセルは返されません:

$scope.$watch('myData', function (foo) {
    // myModel.$update()
}, true);

「ngGridEventData」データイベントをいじろうとしましたが、セル編集後に起動しません

$scope.$on('ngGridEventData', function (e, gridId) {
    // myModel.$update()
});

最後にCellを観察してみました。ただし、これはグリッドの「selectedCell」プロパティによって行に対してのみ機能します。

$scope.selectedRow = [];

$scope.gridOptions = {
    selectedItems: $scope.selectedRow,
}

$scope.$watch('selectedRow', function (foo) {
    console.log(foo)
}, true);

ng-grid プラグインが必要ですか? すぐに使えるものではないなんて信じられません。

自動保存/サーバーへの送信を解決する方法のポインター/スニペットを教えてください。

4

7 に答える 7

17

Angularメーリング リストのおかげで解決策を見つけたようです。AngularJS に onBlur イベント (および onFocus) がないことが指摘されました。ただし、これは「単純な」ディレクティブを追加することで克服できます。

angular.module('myApp.ngBlur', [])
.directive('ngBlur', function () {
    return function (scope, elem, attrs) {
        elem.bind('blur', function () {
            scope.$apply(attrs.ngBlur);
        });
    };
});

情報として、blur イベント ディレクティブに関する別の実装例がここにあります。

次に、コントローラーの残りのコードは次のようになります。

// Define the template of the cell editing with input type "number" (for my case).
// Notice the "ng-blur" directive
var cellEditableTemplate = "<input style=\"width: 90%\" step=\"any\" type=\"number\" ng-class=\"'colt' + col.index\" ng-input=\"COL_FIELD\" ng-blur=\"updateEntity(col, row)\"/>";

// Configure ng-grid
$scope.gridOptions = {
    data: 'questions',
    enableCellSelection: true,
    multiSelect: false,
    columnDefs: [
        {field: 'id', displayName: 'Id'},
        {field: 'name', displayName: 'Name'},

        // Notice the "editableCellTemplate"
        {field: 'answers[0].valuePercent', displayName: 'Rural', enableCellEdit: true, editableCellTemplate: cellEditableTemplate}
    ]
};


// Update Entity on the server side
$scope.updateEntity = function(column, row) {
    console.log(row.entity);
    console.log(column.field);

    // code for saving data to the server...
    // row.entity.$update() ... <- the simple case

    // I have nested Entity / data in the row <- the complex case
    // var answer = new Answer(question.answers[answerIndex]); // answerIndex is computed with "column.field" variable
    // answer.$update() ...
}
于 2013-04-05T11:11:30.970 に答える
1

これは、いくつかの欠陥がある回答の改善です。-回答のコメントの1つに示されているように、JS例外をトリガーします-セルのデータ入力はグリッドに保持されません-updateEntityメソッドは保存方法を示していません入力データ

例外を削除するには、scope 属性を作成して cellEditableTemplate に追加します。

$scope.cellValue;
...
var cellEditableTemplate = "<input style=\"width: 90%\" step=\"any\" type=\"number\" ng-class=\"'colt' + col.index\" ng-input=\"COL_FIELD\" ng-blur=\"updateEntity(col, row, cellValue)\" ng-model='cellValue'/>";

updateEntity への ng-blur 呼び出しに、引数としてcellValueが含まれるようになったことに注意してください。次に、updateEntity ブラー ハンドラーを更新して引数を含め、グリッドを更新します。

$scope.updateEntity = function(column, row, cellValue) {
    console.log(row.entity);
    console.log(column.field);
    row.entity[column.field] = cellValue;

    // code for saving data to the server...
    // row.entity.$update() ... <- the simple case

    // I have nested Entity / data in the row <- the complex case
    // var answer = new Answer(question.answers[answerIndex]); // answerIndex is computed with "column.field" variable
    // answer.$update() ...
};

画面上で変更を確認できるだけでなく、セルベースのバックエンド更新をトリガーできるようになりました。

于 2013-08-01T00:02:06.960 に答える