我在将 Kendo 网格绑定(bind)到 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;
        },
    };
});

然后我在我的 Controller 中设置网格 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 数组(与我硬编码的那个)。有人有想法吗？我觉得这是一个 promise 问题，但即便如此，当 promise 得到解决时，我仍在设置我的 $scope's companies 属性。

谢谢。

最佳答案

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

1.一种是直接给你的kendo grid的数据源Api Controller 的地址:

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

这里有完整的解释here .但我不喜欢这样做，因为我不想在我的 Controller 中硬编码 API Controller 地址，我更喜欢有一个服务或其他东西返回我的数据，然后将它传递到我的网格(想象一下，例如想要添加$http 请求 header 中的标记)。因此，经过一番折腾后，我找到了一种用我原来的方法连接网格的方法:

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 可防止网格在加载 View 时自动调用服务器。因此，为了手动添加项目，我将其设置为 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();

关于javascript - 如何使用 Angular $http GET 调用填充 Kendo 网格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19904048/