我正在尝试 Kendo UI,并且我正在使用提供的示例来进行学习。假设我正在使用包含数十万个元素的大型数据源。如果我使用分页并且页面大小为 10,我真的希望能够从网页中仅获取 10 个元素,并且如果 Kendo UI 能够知道实际上元素的数量要大得多,但是我们只显示 10 个。
这是我目前拥有的:
var initGrid = true;
var grid2Data;
function getDataSource()
{
return grid2Data.Data;
}
var grid;
function getPageIndex()
{
if (!(grid)) {
return 0;
}
return grid.pager.page() - 1;
}
function getPageSize() {
if (!(grid)) {
return 10;
}
return grid.pager.pageSize();
}
function getFilters() {
if (!(grid)) {
return "";
}
return grid.dataSource.filter();
}
function getSorts() {
if (!(grid)) {
return "";
}
return grid.dataSource.sort();
}
function getParams() {
return getPageSize();
}
function postTest() {
if (initGrid) {
$.post('myurl' + getParams(), function (data) {
grid2Data = data;
$("#grid").kendoGrid({
dataBound: onDataBound,
dataSource: {
data: getDataSource(),
schema: {
model: {
fields: {
Email: { type: "string" },
FullName: { type: "string" },
LogCreateDate: { type: "date" },
RoleName: { type: "string" },
UserName: { type: "string" }
}
}
},
pageSize: 10
},
height: 300,
scrollable: false,
sortable: true,
filterable: true,
pageable: {
input: true,
numeric: false
},
columns: [
{
field: "Email",
title: "Email",
width: 100
},
{
field: "FullName",
title: "Full Name",
width: 100
},
{
field: "LogCreateDate",
title: "Created",
template: '#= kendo.toString(LogCreateDate,"MM/dd/yyyy") #'
},
{
field: "RoleName",
title: "Role",
width: 50
},
{
field: "UserName",
width: 100
}
]
});
grid = $("#grid").data("kendoGrid");
});
}
else {
}
initGrid = false;
}
$(document).ready(function () {
postTest();
});
我的问题是网格显示这是 10 中的第 1-10 个元素,并且是第一页。我希望网格显示我给出的页面索引和项目计数。如何设置网格的元素数量和页面索引?这可能吗?谢谢。
最佳答案
当您在DataSource
中选择serverPaging
时,将其设置为true
。您在服务器中接收有关页码 (page
)、页面大小 (pageSize
)、要跳过的记录数 (skip
) 的信息...(在 http://docs.kendoui.com/api/framework/datasource 中查找 serverPaging )作为交换,您不仅应该返回包含该页面数据的数组,还应该返回总行数。然后,您在 schema.total 中实现用于访问记录数的函数。 IE。假设您返回以下对象作为结果:
{
rows: [
{ id: 1, col1: "col1.1", col2: "col1.2" },
{ id: 2, col1: "col2.1", col2: "col2.2" },
{ id: 3, col1: "col3.1", col2: "col3.2" }
],
totalRows : 1000
}
然后您可以将 schema.total
实现为:
schema: {
total: function (response) {
return response.totalRows;
}
}
其中response
是从服务器接收到的对象。
注意:实际上在这种情况下将模式
定义为:
schema: {
total: "totalRows";
}
}
因为total
直接存储在totalRows
字段中。
关于grid - 具有大数据集的 Kendo UI 网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13710246/