如何使用有角度的 $http GET 调用填充 Kendo 网格 [英] How to populate Kendo grid with an angular $http GET call

问题描述

我在将 Kendo 网格绑定到角度服务调用时遇到问题.我有一个 angular $http 服务，它有一个 getData() 方法，如下所示:

I'm having trouble binding a Kendo grid to an angular service call. I have an angular $http service that has a getData() method which looks like this:

'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 如下:

I then set the grids DataSource in my controller as follows:

'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 属性.

but my grid is not populating. When I set the DataSource's data manually (hard-coded JSON array) it works fine but not when I'm getting the data in my service call, the JSON array being returned by my service is also a valid JSON array (exactly the same as the one I hard coded). Anybody has an idea? I have a feeling this is a promise issue, but even then I'm setting my $scope's companies property when the promise is resolved.

谢谢.

推荐答案

我设法解决了这个问题，有 2 种方法(可能更多):

I managed to fix it, there's 2 ways (quite possibly more) of doing this:

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

1. One is to directly give your kendo grid's datasource the adrress of the Api controller:

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

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

There's a full explanation here. But I don't like doing this because I'd rather not hard code API controller addresses in my controller, I prefer to have a service or something return me the data and then pass that on to my grid (Imagine for example wanting to add a token in the $http request headers). So after some messing around I got a way of hooking up the grid with my original approach:

2.我们可以将网格的读取函数连接到我们服务中的另一个函数或其他函数，可以是任何返回承诺的方法，即 $http调用:

2. We can just hook up the read function of the grid to another function in our service or whatever, which can be any method returning a promise, i.e. a $http call:

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
        },

编辑

关于如何添加网格已经可用的项目，以及如何向服务器发出后续请求以获取新数据，我是这样做的:

Regarding how to add items that are already available to the grid, and how to have subsequent requests to the server to get new data, this is how I've gone about doing this:

网格有一个 autoBind 属性，将其设置为 false 可防止网格在加载视图时自动调用服务器.因此，要手动添加项目，我将其设置为 false，然后通过 dataSource.add() 方法向网格添加行.之后调用 dataSource.read() 将从服务器获取更多数据:

The grid has an autoBind property, setting that to false prevents the grid automatically calling the server when the view is loaded. So to add items manually I set this to false, and then add rows to the grid via the dataSource.add() method. After that calling dataSource.read() will retrieve more data from the server:

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

Calling dataSource.read() forces a server call to retrieve data: $scope.companiesGridOptions.dataSource.read();

这篇关于如何使用有角度的 $http GET 调用填充 Kendo 网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！