Question

我正在将Kendo Grid与Vue项目一起使用。我正在使用服务器端分页。第一页效果很好，显示了页数，记录总数以及从服务器检索到的第一组行。单击第2页（或第3页等）时，网格会正确调整URL并点击服务器。我可以在change（）网格事件中看到返回的行，但是网格不显示检索到的行。我究竟做错了什么？我是否需要告诉网格在requestEnd（）事件之后刷新？

由此定义了该网格：

<kendo-grid ref="gridComponent"
                  :data-source="quotes"
                  :auto-bind="true"
                  :selectable='true'
                  :sortable='true'
                  :resizable='true'
                  :pageable-page-size="pageSize"
                  :pageable-page-sizes='true'
                  :pageable-button-count='5'
                  :reorderable='true'
                  :no-records="noRecords"
                  v-on:databinding="onDataBinding"
                  v-on:databound="onDataBound"
                  v-on:change="rowSelected"
                  :sort="sortFilter">

这是计算得出的“引号”和“ queryString”定义。

computed: {
quotes: function () {
  //  eslint-disable-next-line
  //  return new kendo.data.DataSource({
  //  data: this.localDataSource
  //  })
  let vue = this
  //  eslint-disable-next-line
  return new kendo.data.DataSource({
    transport: {
      read: {
        url: this.queryString,
        beforeSend: function (xhr) {
          // xhr.setRequestHeader('Access-Control-Allow-Origin', '*')
          xhr.setRequestHeader('Authorization', Constants.AUTH_KEY)
        },
        type: 'GET',
        dataType: 'json'
      }
    },
    schema: {
      total: function (response) {
        let records = 0
        if (response && response.length > 0) {
          records = response[0].Count
        }
        return records
      }
    },
    pageable: 'true',
    pageSize: 10,
    serverPaging: 'true',
    // testing the change event handler
    change: function (e) {
      let data = this.data()
      console.log(data)
    },
    requestStart: function () { vue.loading = true },
    requestEnd: function () { vue.loading = false }
  })
},
queryString () {
  var me = this.$store.getters.user
  var agentNumber = me.userName
  var searchURLstring = `${Constants.SEARCH_URL}?AgentNumber=${agentNumber}`
  if (this.currentPolicyNo) {
    searchURLstring += `&QuoteNumber=${this.currentPolicyNo}`
  }
  if (this.currentInsuredName) {
    searchURLstring += `&InsuredName=${this.currentInsuredName}`
  }
  if (this.currentAddr1) {
    searchURLstring += `&Address=${this.currentAddr1}`
  }
  if (this.currentSortField) {
    searchURLstring += `&sortField=${this.currentSortField}`
    searchURLstring += `&sortDirection=${this.currentSortField}`
  }
  searchURLstring += `&SearchScope=${this.searchScope}`
  return searchURLstring
}

Answer 1

只需要更改

pageable: 'true',
pageSize: 10,
serverPaging: 'true',

到

pageable: true,
pageSize: 10,
serverPaging: true,

为我使用您的代码

为什么Kendo Grid（Vue）不显示第2、3、4页的数据？

1 个答案: