Knockout.js koGrid排序-服务器端分页

Knockout.js koGrid排序-服务器端分页,knockout.js,kogrid,Knockout.js,Kogrid,当有多个页面时,koGrid似乎无法对所有项目进行排序。它看起来似乎只在单击列标题时对显示的页面进行排序。当您转到下一页(或任何后续页或上一页)时,数据不会根据您单击的列进行排序。甚至koGrid网站上给出的“服务器端分页示例”也是如此: 有人使用koGrid对多个页面进行排序吗 多谢各位 function EmailBlastsViewModel() { // Data var self = this; self.blasts = ko.observableArray();

当有多个页面时,koGrid似乎无法对所有项目进行排序。它看起来似乎只在单击列标题时对显示的页面进行排序。当您转到下一页(或任何后续页或上一页)时,数据不会根据您单击的列进行排序。甚至koGrid网站上给出的“服务器端分页示例”也是如此:

有人使用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);
你的一些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


此代码将使用sortInfo observable在单击标题时更新字段和方向信息。我不得不添加一个黑客,因为订阅被调用了两次。这是一个已知的bug。基本上,黑客使用sortOnServer observable,只要它是真的,就会向服务器发送调用


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

谢谢你的回复。我试着按照你的建议做些改变,但没有成功。我刚刚回去,在我的帖子中添加了我的原始代码(没有你的建议)。也许这会澄清为什么事情不起作用。我正在服务器上实现排序。使用分页时,koGrid无法对多个页面上的所有行进行排序,因为它只显示页面。好的。无论如何,谢谢你的洞察力。
<div id="grid" class="gridStyle" data-bind="koGrid: gridOptions">
        </div>