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

我设法修复它，有两种方法（可能更多）这样做：

1.一种是直接给你剑道网格的数据源Api控制器的地址：

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

这里有完整的解释。但我不喜欢这样做，因为我不想在我的控制器中硬编码 API 控制器地址，我更喜欢让服务或其他东西返回我的数据，然后将其传递给我的网格（想象一下，例如想要添加$http请求标头中的令牌）。因此，经过一番折腾，我找到了一种用我原来的方法连接网格的方法：

2.我们可以将网格的读取函数连接到我们服务中的另一个函数或其他任何函数，它可以是任何返回承诺的方法，即$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 回答