代码之家 › 专栏 › 技术社区 › Quark Soup

Kendo网格可以读取大量项目并在本地执行分页吗?

grid kendo-ui rest

0

Quark Soup · 技术社区 · 8 年前

我很难理解如何创建一个RESTAPI来服务Kendo UI网格。选项1-使用REST API进行分页,选项2-立即读取整个结果集,并让网格控件处理分页。

以下是我遇到的两个问题:

1)我通过查询字符串传递page和pagesize参数。服务获取它们,查询数据模型,并仅返回请求的记录数(例如,第4页中的50个项目)。问题是分页控件随后显示 页面大小 网格中的项数。也就是说,如果我的页面大小为50,并且结果集中有3000条记录,那么网格总共显示50条,在第1页上显示一个“页面”按钮。如何强制kendo ui网格使用记录总数?如何在不运行两次查询的情况下执行此操作(一次用于总计,第二次用于应用Skip和Take值)?

2)我只有3000条记录,所以读取整个数据集其实没什么大不了的,但是每次我点击“向前翻页”时,我都会得到一个旋转器,对整个数据集的请求都会再次发出。有没有任何方法可以告诉Kendo网格把3000条记录的整个集合都消化掉,但是在本地,每页有50条记录。

1 回复 | 直到 8 年前

1

Sangram Nandkhile Viktor Klang 8 年前

设置 serverPaging 到 false 所以它不会每次都进行服务器调用。可以一次读取所有3000个数据,然后只在本地数据上使用分页。这是演示。

var data =  new kendo.data.DataSource({
  serverPaging: false,
  pageSize: 5, 
  data: [
  	{firstName: 'John', lastName: 'A', Age: '10', Country: 'USA'}, 
  	{firstName: 'Max', lastName: 'B', Age: '20', Country: 'UK'}, 
  	{firstName: 'Luke', lastName: 'C', Age: '77', Country: 'Russia'}, 
  	{firstName: 'Raj', lastName: 'D', Age: '55', Country: 'France'}, 
  	{firstName: 'Peter', lastName: 'E', Age: '5', Country: 'Ghana'}, 
  	{firstName: 'Stan', lastName: 'F', Age: '51', Country: 'USA'}, 
  	{firstName: 'Mike', lastName: 'G', Age: '21', Country: 'India'}, 
  	{firstName: 'Lily', lastName: 'H', Age: '30', Country: 'USA'}, 
	{firstName: 'Lal', lastName: 'B', Age: '20', Country: 'UK'}, 
	{firstName: 'Sam', lastName: 'G', Age: '21', Country: 'India'},
        {firstName: 'Sean', lastName: 'G', Age: '47', Country: 'Aus'},
  ]
});

$('#grid').kendoGrid({
	dataSource: data, 
  columns: [
    {
      field: "firstName",
      title: "firstName",
      width: "120px"
    }, {
      field: "lastName",
      title: "lastName",
      width: "120px"
    }, {
      field: "Age",
      title: "Age",
      width: "120px"
    }, {
      field: "Country",
      title: "Country",
      width: "120px"
    }
  ],
  pageable: true,
  dataBound: function () {
    this.expandRow(this.tbody.find("tr.k-master-row").first());
  }
});

<head>
<title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.mobile.all.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2018.2.516/js/kendo.all.min.js"></script>
</head>
<body>
    <div id="grid"></div>
   </body>