koGrid 정렬 - 서버 측 페이징

Question

koGrid는 여러 페이지가있을 때 모든 항목을 정렬 할 수없는 것 같습니다. 열 머리글을 클릭 할 때 표시되는 페이지 만 정렬하는 것처럼 보입니다. 다음 (또는 다음 또는 이전) 페이지로 이동하면 클릭 한 열에 따라 데이터가 정렬되지 않습니다. 이것은 koGrid 웹 사이트에 주어진 "서버 측 페이징 예"에도의 경우 : 사람이 koGrid를 사용하여 여러 페이지에 걸쳐 작업 정렬

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

을받은 적이 있습니까?

감사합니다.

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입니다. 기본적으로 해킹은 sortOnServer observable을 사용하며 true 일 때마다 호출을 서버로 보냅니다.

paginationInfo는 정보를 서버로 전송하기 위해 생성 한 객체입니다.