如何填充剑道网格角$ HTTP GET调用 [英] How to populate Kendo grid with an angular $http GET call
问题描述
我有麻烦剑道网格结合的角度服务调用。我有了它看起来像这样一个的getData（）法的角度 $ HTTP 服务：
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;
},
};
});
然后我设置在我的控制器网格数据源如下：
'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);
});
}
);
但我的网是不是填充。当我手动设置数据源的数据（硬codeD JSON数组），它工作正常，但不是当我得到我的服务调用的数据，JSON数组被我的服务返回也是一个有效的JSON数组（确切同为一个我很难codeD）。任何人有一个想法？我有一种感觉，这是一个承诺的问题，但即使如此，我设置我的 $范围的 公司属性时，承诺解决。
感谢。
推荐答案
我设法解决它，有2种方法（很可能更多）这样做的：
I managed to fix it, there's 2 ways (quite possibly more) of doing this:
1 一种是直接给你的剑道网格的数据源的API控制器的adrress：
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
});
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 $ P $自动pvents电网调用服务器时该视图被加载。所以要手工添加的项目我设置为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，标题：...}，{ID：2，标题：...}]）;
调用 dataSource.read（）强制服务器调用来检索数据：
$ scope.companiesGridOptions.dataSource.read（）;
Calling dataSource.read() forces a server call to retrieve data:
$scope.companiesGridOptions.dataSource.read();
这篇关于如何填充剑道网格角$ HTTP GET调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
