1

我将 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">

这里是计算出来的“quotes”和“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
}
4

1 回答 1

1

只需要改变

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

至

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

用你的代码为我工作

于 2018-12-12T01:30:09.503 回答