javascript - 带有 pageSize 下拉列表的 KnockoutJS 分页网格示例

Question

使用此处找到的 KO 示例:http://knockoutjs.com/examples/grid.html ,我想添加一个下拉菜单来选择不同的页面大小(例如，每页 4、8、12 个项目)，并在更改下拉菜单时更新页面网格。

尝试了很多事情，我知道我缺少一些东西来让它发挥作用。预先感谢您提供任何帮助或现有解决方案的链接。

我现在拥有的东西:

===查看===

<div data-bind='simpleGrid: gridViewModel'> </div>

<select class="form-control" name="displayCount" id="displayCount" data-bind="value: valueDisplayCount;">
    <option value="4">4</option><option value="8">8</option><option value="16">16</option>
</select>

<button data-bind='click: addItem'>
    Add item
</button>

<button data-bind='click: sortByName'>
    Sort by name
</button>

<button data-bind='click: jumpToFirstPage, enable: gridViewModel.currentPageIndex'>
    Jump to first page
</button>

====查看模型=====

$( document ).ready(function(){
var initialData = [
    { name: "Well-Travelled Kitten", sales: 352, price: 75.95 },
    { name: "Speedy Coyote", sales: 89, price: 190.00 },
    { name: "Furious Lizard", sales: 152, price: 25.00 },
    { name: "Indifferent Monkey", sales: 1, price: 99.95 },
    { name: "Brooding Dragon", sales: 0, price: 6350 },
    { name: "Ingenious Tadpole", sales: 39450, price: 0.35 },
    { name: "Optimistic Snail", sales: 420, price: 1.50 }
];

var PagedGridModel = function(items) {
    this.items = ko.observableArray(items);

    this.valueDisplayCount = ko.observable(4);

    this.sortByName = function() {
      this.items.sort(function(a, b) {
          return a.name < b.name ? -1 : 1;
      });
    };

    this.jumpToFirstPage = function() {
        this.gridViewModel.currentPageIndex(0);
    };

    this.valUpdDisplayCount= function(){
      alert($('#displayCount').val());
      this.gridViewModel.pageSize(6);
    };


    this.gridViewModel = new ko.simpleGrid.viewModel({
      data: this.items,
      columns: [
          { headerText: "Item Name", rowText: "name" },
          { headerText: "Sales Count", rowText: "sales" },
          { headerText: "Price", rowText: function (item) { return "$" + item.price.toFixed(2) } }
      ],
      pageSize: this.valueDisplayCount
    });


};

ko.applyBindings(new PagedGridModel(initialData));

});

JSFiddle: http://jsfiddle.net/RNunc/1/

Answer 1

您需要调整 simplegrid 代码来查找 pageSize 的可观察值。更新可能如下所示:

ko.simpleGrid = {
    // Defines a view model class you can use to populate a grid
    viewModel: function (configuration) {
        this.data = configuration.data;
        this.currentPageIndex = ko.observable(0);
        this.pageSize = configuration.pageSize || ko.observable(5);

        // If you don't specify columns configuration, we'll use scaffolding
        this.columns = configuration.columns || getColumnsForScaffolding(ko.unwrap(this.data));

        this.itemsOnCurrentPage = ko.computed(function () {
            var size = ko.unwrap(this.pageSize);
            var startIndex = size * this.currentPageIndex();
            return ko.unwrap(this.data).slice(startIndex, startIndex + size);
        }, this);

        this.maxPageIndex = ko.computed(function () {
            return Math.ceil(ko.unwrap(this.data).length / ko.unwrap(this.pageSize)) - 1;
        }, this);
    }
};

simplegrid代码在这里:http://knockoutjs.com/examples/resources/knockout.simpleGrid.3.0.js

http://jsfiddle.net/rniemeyer/82MAR/