koGrid排序 - 服务器端分页

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观察到被点击的标题时，更新领域和方向信息。我必须添加一个黑客，因为订阅被调用两次。这是一个已知的错误，https://github.com/Knockout-Contrib/KoGrid/issues/174。基本上，hack使用sortOnServer observable，只要它是真的，它就会将呼叫发送到服务器。

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