Javascript 剑道网格进行重复的API调用
我有一个处理服务器端分页、过滤和排序的API。为了构建数据源url,我将transport.read设置为函数(as)。这很好,只是调用了两次我的API:一次是在初始ajax请求期间,另一次是在options.success(result)之后。还有人碰到这个吗?options.success()究竟做了什么,在它已经拥有所需数据的情况下导致另一个XHR GET请求Javascript 剑道网格进行重复的API调用,javascript,jquery,kendo-ui,telerik,kendo-grid,Javascript,Jquery,Kendo Ui,Telerik,Kendo Grid,我有一个处理服务器端分页、过滤和排序的API。为了构建数据源url,我将transport.read设置为函数(as)。这很好,只是调用了两次我的API:一次是在初始ajax请求期间,另一次是在options.success(result)之后。还有人碰到这个吗?options.success()究竟做了什么,在它已经拥有所需数据的情况下导致另一个XHR GET请求 更新: 感谢Rick在下面的评论,我做了今天早上应该做的事情,并开始评论其他剑道网格配置代码,看看会发生什么。结果表明,数据源更
更新: 感谢Rick在下面的评论,我做了今天早上应该做的事情,并开始评论其他剑道网格配置代码,看看会发生什么。结果表明,数据源更改时执行的函数导致了第二次API调用。这是必需的,因此在对网格进行排序时,发送到API的URL包含更新的排序请求。我想现在我不明白为什么在我已经设置默认排序参数的情况下,更改事件会在初始加载时触发。在下面更新了我的配置
以下是我的数据源传输配置:
var initGrid = function (take, skip, currPage, field, direction, model, gridElement, cols) {
//set up dataSource
var dataSource = new kendo.data.DataSource({
transport: {
read: function (options) {
$.ajax({
url: apiUrl + '?take=' + take + '&skip=' + skip + '&page=' + currPage + '&pageSize=' + take + '&sort%5B0%5D%5Bfield%5D=' + field + '&sort%5B0%5D%5Bdir%5D=' + direction,
dataType: 'json',
success: function (result) {
// by the time this is reached, the API has already been called once
// the result variable contains the necessary data
options.success(result); // the API is called again when this line executes
},
error: function (result) {
options.error(result);
}
});
}
},
change: function () {
var currentSorting = JSON.stringify(this.sort());
if (currentSorting != sorting) {
sorting = currentSorting;
this.sort(JSON.parse(sorting));
}
field = JSON.parse(sorting)[0].field;
direction = JSON.parse(sorting)[0].dir;
},
sort: { field: field, dir: direction }, //default sort
....
}
}
原来问题是使用dataSource change事件尝试检测排序何时更新。我没有意识到我已经可以访问transport.read函数的“options”参数中的所有更新属性。因此,我没有监听更改事件、更新变量和手动调用sort,而是在构建URL时使用了options对象。Take、skip、page、pageSize和sort都有。这样一来,剑道就可以自己处理一切。新配置:
var initGrid = function (model, gridElement, cols) {
//set up dataSource
var dataSource = new kendo.data.DataSource({
transport: {
read: function (options) {
$.ajax({
url: apiUrl + '?take=' + options.data.take + '&skip=' + options.data.skip + '&page=' + options.data.page + '&pageSize=' + options.data.pageSize + '&sort%5B0%5D%5Bfield%5D=' + options.data.sort[0].field + '&sort%5B0%5D%5Bdir%5D=' + options.data.sort[0].dir,
dataType: 'json',
success: function (result) {
options.success(result);
},
error: function (result) {
options.error(result);
}
});
}
},
sort: { field: 'Id', dir: 'desc' }, //default sort
....
很可能是您的其他代码导致了这种情况。我可以创建一个简单的数据源示例,它只调用URL一次,非常棒。结果更新了我的问题。已尝试使用断点查看代码是否被命中,但之前没有对其进行注释。啊。