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

Question

我无法将Kendo网格绑定到角度服务调用.我有一个角度$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当承诺得到解决时,我正在设置我的财产.

谢谢.

Answer 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();