如何使用Kendo-ui网格虚拟化远程数据?
问题描述:
我使用kendo-ui
网格为AngularJs
并且想要激活virtualization of remote data
功能。为了测试,我设置了pageSize: 5
。 下面是从Telerik的网站virtualization of remote data
描述:如何使用Kendo-ui网格虚拟化远程数据?
有些时候你可能需要在电网大数据量 的操作,并且获取和同时处理该数据将 并处由于性能上的损失限制浏览器资源。 幸运的是,Kendo UI网格有一个名为数据虚拟化的解决方案 ,可以缓解在处理大量数据时产生的任何减速。当通过可滚动 - >虚拟配置选项 启用后,它将为网格内容显示一个垂直滚动条,并仅显示 通过网格数据 源的pageSize属性设置的项目数。拖动滚动条并超出pageSize后, 会自动请求检索并呈现下一组网格 行。网格 虚拟化功能支持本地和远程数据,而在此演示中,记录从远程端点获得 。
而且我已经设置如下:
HTML:
<div kendo-grid k-options="mainGridOptions" id="historyGrid" style="width: auto;"></div>
JS电网:
var vm = $scope;
vm.viewMode = {
mainGridOptions: {
visible: true
}
};
vm.mainGridOptions = {
columns: [
// here columns
],
onRegisterApi: function (gridApi) {
vm.gridApi = gridApi;
},
dataSource: {
schema: {
model: {
fields: {
YearBalance: { type: 'number' },
Typezalezh: { type: 'string' },
License: { type: 'string' },
ObjectName: { type: 'string' },
ZalezhName: { type: 'string' },
PlastName: { type: 'string' },
Category: { type: 'string' },
Parameter: { type: 'string' },
LastVal: { type: 'string' },
Val: { type: 'string' },
Operation: { type: 'string' },
EndT: { type: 'date' }
}
}
},
pageSize: 5,
transport: {
read: function(e) {
dataservice.getImportResultReport().then(function(data) {
e.success(JSON.parse(data));
console.log(data);
});
}
}
},
serverPaging: true,
height: screen.height - 330,
minwidth : 1190,
batch: true,
scrollable: {
virtual: true
},
sortable: true,
serverSorting: true,
filterable: {
extra: false,
operators: {
string: {
// here filters
},
number: {
// here filters
},
date: {
// here filters
}
}
}
};
在Telerik的网站(官网),它说,没有更多的需求要做。 在滚动时,我应该看到服务器的请求,在我的情况下应该是dataservice.getImportResultReport()
调用。但是这不会发生。该函数仅被调用一次,并返回所有数据。
可能是因为我没有设置type: "odata"
?但是我使用另一种类型的数据源。
如何使用此功能?
答
添加k-scrollable
指令,因为在你的HTML呈现您的剑道格如下:
<div kendo-grid k-data-source="mainGridOptions" k-scrollable="{virtual:true}"></div>
而且你必须使用k-data-source
指令为您的数据源。希望能帮助到你。
工作演示plunkr
究竟你'远程data'的虚拟化是什么意思?你想在剑道网格中显示数据吗? –
我添加了这个功能的描述。 – Seva
好吧,明白了,你也可以告诉你用什么html来呈现剑道网格? angularjs语法看起来不错,但我想你可能错过了在html –