Question

当有多个页面时，

koGrid似乎无法对所有项目进行排序。它看起来好像只对单击列标题时显示的页面进行排序。当您转到下一个（或任何后续或上一个）页面时，数据不会根据您单击的列进行排序。在koGrid网站上给出的“服务器端分页示例”中就是这种情况：

http://ericmbarnard.github.com/KoGrid/#/examples

有没有人使用koGrid对多个页面进行排序？

谢谢。

function EmailBlastsViewModel() {
  // Data
  var self = this;

  self.blasts = ko.observableArray();
  self.selectedItems = ko.observableArray();
  self.status = ko.observable('queued');

  self.pagingOptions = {
    pageSizes: ko.observableArray([25, 50, 100]),
    pageSize: ko.observable(25),
    totalServerItems: ko.observable(),
    currentPage: ko.observable(1)
  }

  self.pagingOptions.currentPage.subscribe(function(data) {
    self.reload();
  });

  self.pagingOptions.pageSize.subscribe(function(data) {
    self.reload();
  });

  self.gridOptions = {
    displaySelectionCheckbox: true,
    data : self.blasts,
    selectedItems: self.selectedItems,
    multiSelect: false,
    pagingOptions: self.pagingOptions,
    enablePaging: true,
    columnDefs: [
      { field: 'creator.name', displayName: 'From', width: 105 },
      { field: 'to_name', displayName: 'To', width: 105 },
      { field: 'subject', displayName: 'Subject', width: 160 },
      { field: 'status', displayName: 'Status', width: 132 },
      { field: 'date_scheduled', displayName: 'Date Scheduled', width: 160 },
      { field: 'date_sent', displayName: 'Date Sent', width: 160 },
      { displayName: ' ', cellTemplate: $('#cell-template').html(), width: 40 }
    ]
  }

  self.allMail = function(item, event) {
    self.status(null);
    self.reload()
  }

  self.queuedMail = function(item, event) {
    self.status('queued');
    self.reload()
  }

  self.sentMail = function(item, event) {
    self.status('sent');
    self.reload();
  }


  self.archiveEmail = function(item, event) {
    var email = self.selectedItems()[0];
    email.archive();
  }

  self.approveEmail = function(item, event) {
    var email = self.selectedItems()[0];
    email.approve();
  }

  self.rejectEmail = function(item, event) {
    var email = self.selectedItems()[0];
    email.reject();
  }

  self.deleteEmail = function(item, event) {
    var email = self.selectedItems()[0];
    email.deleteEmail();
  }


  self.reload = function() {
    var spinner = new Spinner().spin(document.getElementById('spin'));

    var data = {
      'page' : self.pagingOptions.currentPage(),
      'limit' : self.pagingOptions.pageSize()
    }

    if( self.status() ) {
      data['status'] = self.status()
    }

    $.ajax({
      type: "GET",
      data: data,
      cache: false,
      url: "/api/emailblast",
      contentType: "application/json",
      success: function(data, textStatus, jqXHR) {
        spinner.stop();

        var newData = [];

        $.each(data.results, function(index, value){
          var eb = new EmailBlast(self, value);
          newData.push( eb );
        })
        self.blasts( newData );
        self.pagingOptions.totalServerItems(data.total);
      },
      error: function(jqXHR, textStatus, errorThrown) {
        spinner.stop();
        noty({text: 'There was an error retrieving the email blasts.', type: 'error', timeout: 5000});
      }
    });
  }

  // Initialization
  self.init = function() {
    self.reload();
  }
  self.init();

};

emailBlastsViewModel = new EmailBlastsViewModel();
ko.applyBindings(emailBlastsViewModel);

Answer 1

你的一些KO模型

self.sortInfo = ko.observable();
    self.sortOnServer = ko.observable(false);
    self.sortInfo.subscribe(function (data) {
        self.sortOnServer(!self.sortOnServer());
        if (!self.sortOnServer()) return;
        paginationInfo.SortColumnName = self.sortInfo().column.field;
        if (self.sortInfo().direction === 'desc') {
            paginationInfo.DescendingSort = true;
        } else {
            paginationInfo.DescendingSort = false;
        }
        showLoading();
        self.getPagedDataAsync(self.pagingOptions.pageSize(), self.pagingOptions.currentPage(), self.filterOptions.filterText());
    });

self.gridOptions = {
        data: self.results,
        enablePaging: true,
        pagingOptions: self.pagingOptions,
        filterOptions: self.filterOptions,
        columnDefs: self.columns,
        displaySelectionCheckbox: false,
        rowHeight: 20,
        selectWithCheckboxOnly: true,
        jqueryUIDraggable: true,
        useExternalSorting: true,
        sortInfo: self.sortInfo
    };

HTML

<div id="grid" class="gridStyle" data-bind="koGrid: gridOptions">
        </div>

此代码将使用sortInfo observable在单击标题时更新字段和方向信息。我不得不添加一个黑客，因为订阅被调用两次。这是一个已知的错误https://github.com/Knockout-Contrib/KoGrid/issues/174。基本上，hack使用sortOnServer observable，只要它为true，它就会将调用发送到服务器。

paginationInfo是我创建的用于将信息传输到服务器的对象。

koGrid排序 - 服务器端分页

1 个答案: