Knockout-Kendo Grid中的服务器分页绑定到本地(服务器填充)ko.viewmodel中的observab

Server paging in Knockout-Kendo Grid bound to local (server-filled) ko.observableArray property in viewmodel

本文关键字：服务器 填充 ko 中的 viewmodel observab Grid 分页 绑定 Knockout-Kendo      更新时间：2023-09-26

我使用Knockout-Kendo.js库为我的js + HTML5 SPA。在我的视图模型中，我有一个myItems Knockout可观察数组。我有一个客户端存储库，负责从服务器获取数据并保持它。我希望能够填写myItems在我的视图模型基于一个POST请求的API，发送一个过滤器对象(包含过滤器和分页信息)到服务器，并返回一个列表的过滤项目。

    据我所知，Knockout-Kendo不支持Kendo Grid DataSource。我应该通过它的data属性而不是dataSource来设置源。我说的对吗?如果是，我能达到下面问题的要求吗?
  • 我如何设置网格的选项，以便我为服务器分页设置结果的总数，页码，顶部，跳过等?(我应该能够设置我的过滤器对象在视图模型基于点击的Kendo网格页码为例，并发送它与我的POST请求到服务器。)
  • 此外，为了能够获得分页项目的总数，我是否应该以这样的格式从服务器接收JSON数据:{total: 675, data: {some JSON array containing items for the current page}}或有替代方案来实现这一点?

如果在Knockout-Kendo中需要的话，可以直接使用dataSource。如果您指定data选项为false或{}，然后也指定dataSource选项，则它将使用它。

例如，您可以这样绑定它:

<div data-bind="kendoGrid: gridOptions"></div>

与视图模型:

var grid = {
  data: false,
  dataSource: {
    type: "odata",
    transport: {
      read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
    },
    schema: {
      model: {
        fields: {
          OrderID: {
            type: "number"
          },
          Freight: {
            type: "number"
          },
          ShipName: {
            type: "string"
          },
          OrderDate: {
            type: "date"
          },
          ShipCity: {
            type: "string"
          }
        }
      }
    },
    pageSize: 50,
    serverPaging: true,
    serverFiltering: true,
    serverSorting: true
  },
  height: 250,
  sortable: true,
  pageable: true,
  columns: [{
    field: "OrderID",
    filterable: false
  },
    "Freight", {
    field: "OrderDate",
    title: "Order Date",
    width: 100,
    format: "{0:MM/dd/yyyy}"
  }, {
    field: "ShipName",
    title: "Ship Name",
    width: 200
  }, {
    field: "ShipCity",
    title: "Ship City"
  }]
};
ko.applyBindings({
  gridOptions: grid
});

示例如下:http://jsfiddle.net/rniemeyer/shwrb/

dataSource: {pageSize: 20}这样指定....如果你像这样只提到pageSize: 20，它是不工作的

相关文章：