5

Kendo グリッドを角度のあるサービス コールにバインドするのに問題があります。次のようなメソッドを持つAngular$httpサービスがあります。getData()

'use-strict';

payrollApp.factory('dataService', function ($http, $q) {
    return {
        getData: function () {
            var deferred = $q.defer();
            $http({
                method: 'GET',
                url: '/api/apihome/',
           }).success(function (data, status, headers, config) {
                deferred.resolve(data);
            }).error(function (data, status, headers, config) {
                deferred.reject(status);
            });
            return deferred.promise;
        },
    };
});

DataSource次に、コントローラーでグリッドを次のように設定します。

'use-strict';
payrollApp.controller('KendoDataGridController', function KendoDataGridController($scope, dataService) {

    var companiesList = dataService.getCompanies();
    companiesList.then(function(companies) {
        console.log(JSON.stringify(companies, undefined, 2));
        $scope.companies = new kendo.data.DataSource({
            data: companies,
            pageSize: 10
        });
    }, function(status) {
        window.alert(status);
        console.log(status);
    });
}
);

しかし、私のグリッドは移入されていません。DataSource のデータを手動で設定すると (ハードコードされた JSON 配列)、正常に動作しますが、サービス呼び出しでデータを取得するときは機能しません。サービスによって返される JSON 配列も有効な JSON 配列です (私がハードコーディングしたもの）。誰にもアイデアがありますか？これは約束の問題だと感じていますが、それでも$scope's companies約束が解決されたときにプロパティを設定しています。

ありがとう。

4

2 に答える 2

14

私はそれを修正することができました.これを行うには2つの方法があります.

1. 1つは、剣道グリッドのデータソースに Api コントローラーのアドレスを直接与える方法です。

$scope.companies = new kendo.data.DataSource({
               transport: {
               read: {
                      url: '/api/apihome',
                      dataType: 'json'
                     },
               },
               pageSize: 10  
});

ここに完全な説明があります。しかし、私は自分のコントローラーに API コントローラーのアドレスをハードコーディングしたくないので、これを行うのは好きではありません。サービスまたは何かがデータを返し、それを自分のグリッドに渡すことを好みます (たとえば、追加したいことを想像してください$httpリクエストヘッダーのトークン)。それで、いじり回した後、元のアプローチでグリッドを接続する方法を得ました。

2.グリッドの読み取り関数を、サービス内の別の関数などにフックするだけです。これは、Promise を返す任意のメソッド、つまり$http呼び出しです。

dataSource: {
            transport: {
                read: function (options) {//options holds the grids current page and filter settings
                    $scope.getCompanies(options.data).then(function (data) {
                        options.success(data);
                        $scope.data = data.data;//keep a local copy of the data on the scope if you want
                        console.log(data);
                    });
                },
                parameterMap: function (data, operation) {
                    return JSON.stringify(data);
                }
            },
            schema: {
                data: "data",
                total: "total",
            },
            pageSize: 25,
            serverPaging: true,
            serverSorting: true
        },

編集

グリッドで既に利用可能なアイテムを追加する方法、および新しいデータを取得するためにサーバーに後続のリクエストを送信する方法に関して、これは私がこれを行う方法です:

グリッドにはautoBindプロパティがあり、false に設定すると、ビューがロードされたときにグリッドが自動的にサーバーを呼び出すのを防ぎます。したがって、項目を手動で追加するには、これを false に設定し、dataSource.add()メソッドを使用して行をグリッドに追加します。その後、呼び出しdataSource.read()により、サーバーからさらにデータが取得されます。

    $scope.companiesGridOptions = {
        dataSource: new kendo.data.DataSource({
            transport: {
                read: function (options) {
                    var config = {
                        method: "GET",
                        url: "/api/companies/GetCompanies"
                    };
                    $http(config).success(function (data) {
                        angular.forEach(data, function(d) {
                            $scope.companiesGridOptions.dataSource.add(d);
                        });

                    });
                }
            },....

アイテムをグリッドに手動で追加する: $scope.companiesGridOptions.dataSource.data([{id:1,title:"..."}, {id:2,title:"..."}]);

を呼び出すdataSource.read()と、データを取得するためにサーバー呼び出しが強制されます。 $scope.companiesGridOptions.dataSource.read();

于 2013-11-11T13:28:03.873 に答える
0

新しいデータを入力したら、グリッドを更新してみてください。

your_grid.refresh();
于 2013-11-11T10:52:35.880 に答える