Question

在使用kendo网格填充vue.js应用程序中的数据时，我无法显示分页功能。我正在使用本地数据源。我能找到的所有示例都是服务器端分页的。

根据Kendo Grid网站上的文档，我添加了属性：pageable =“ true” ：page-size = 10 ：serverPaging =“ false”。但这不起作用。

<kendo-grid
      :data-source="users"
      :sortable-mode="'single'"
      :pageable="true"
      :page-size=10
      :serverPaging="false"
      :pageable-always-visible="false"
      :pageable-page-sizes="[5, 10, 20, 100]"
    >
      <kendo-grid-column :selectable="true" :width="60"></kendo-grid-column>
      <kendo-grid-column :field="'name'" :title="'Name'" :width="200"></kendo-grid-column>
      <kendo-grid-column :field="'status'" :title="'Status'" :width="100"></kendo-grid-column>
      <kendo-grid-column :field="'role'" :title="'Role'" :width="100"></kendo-grid-column>
      <kendo-grid-column
        :field="'registered'"
        :title="'Registered Date'"
        :sortable="false"
        :format="'{0:MM/dd/yyyy}'"
        :width="120"
      ></kendo-grid-column>
    </kendo-grid>

所有记录都显示在单个页面中。没有创建多个页面。另外，在第一次加载时它正在显示 NaN-NaN of 27 items

Answer 1

我认为您直接将数据数组绑定到网格，需要创建DataSource然后将其绑定到网格。

这是使用本地数据和分页创建DataSource的方法：

// sample row data
let rows = []
for(let i=0;i<100;i++){
  rows.push({OrderID: i, ShipName: `Name ${i}`});
}


new Vue({
    el: '#vueapp',
    data: function(){
      return {
        //  create data source
        dataSource: new kendo.data.DataSource({
            serverPaging: false,
            pageSize: 5, 
            data: rows
        })
      }
    }
})

然后如何绑定它：

<div id="vueapp" class="vue-app">
    <kendo-grid :height="600"
                :data-source="dataSource"
                :pageable='true'>
        <kendo-grid-column :field="'OrderID'"
                           :width="180"></kendo-grid-column>
        <kendo-grid-column :field="'ShipName'"
                           :title="'Ship Name'"
                           :width="240"></kendo-grid-column>
    </kendo-grid>
</div>

Answer 2

通过分页对象而不是true来解决此问题。

<template>
  <div>
    <kendo-grid
      :data-source="users"
      :sortable-mode="'single'"
      :pageable="pageable"
    >
      <kendo-grid-column :selectable="true" :width="60"></kendo-grid-column>
      <kendo-grid-column :field="'name'" :title="'Name'" :width="200"></kendo-grid-column>
      <kendo-grid-column :field="'status'" :title="'Status'" :width="100"></kendo-grid-column>
      <kendo-grid-column :field="'role'" :title="'Role'" :width="100"></kendo-grid-column>
      <kendo-grid-column
        :field="'registered'"
        :title="'Registered Date'"
        :sortable="false"
        :format="'{0:MM/dd/yyyy}'"
        :width="120"
      ></kendo-grid-column>
    </kendo-grid>
  </div>
</template>

<script>
import usersData from "./UsersData";
export default {
  mounted() {
    this.users = usersData;
  },
  data: () => {
    return {
      users: null,
      pageable: {
          refresh: true,
          pageSizes: [5, 10, 20, 50, 100],
          buttonCount: 5,
          pageSize: 20
        }
    };
  }
};
</script>

具有本地数据源（客户端）的vue js在kendo网格中进行分页

2 个答案: