如何使用angular $http GET调用填充Kendo网格

Question

我在将Kendo网格绑定到angular服务调用时遇到了问题。我有一个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数组(与我硬编码的JSON数组完全相同)。有谁有主意吗？我感觉这是一个promise问题，但即使这样，我也会在promise得到解决时设置我的$scope's companies属性。

谢谢。

Answer 1

我设法修复了它，有两种方法(很可能更多)：

Api 1. One是直接给你的kendo grid的数据源提供Api控制器的地址：

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

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

2.我们可以只将网格的read函数连接到我们服务中的另一个函数，或者其他任何函数，它可以是任何返回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();

Answer 2

我认为一旦填充了新数据，您就应该尝试刷新网格：

your_grid.refresh();