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);
    }
};

简单网格代码在这里：http://knockoutjs.com/examples/resources/knockout.simpleGrid.3.0.js

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

具有pageSize下拉列表的KnockoutJS Paged Grid示例

1 个答案: