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  
});

有一个完整的解释here。但我不喜欢这样做，因为我宁愿不在我的控制器中硬代码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();

Answer 2

我认为您应该在填充新数据后尝试刷新网格：

your_grid.refresh();

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

2 个答案: