4

複数のページがある場合、koGrid はすべての項目を並べ替えることができないようです。列ヘッダーをクリックしたときに表示されているページを並べ替えるだけのように見えます。次のページ (または前後のページ) に移動すると、クリックした列に従ってデータが並べ替えられません。これは、koGrid Web サイトにある「Server-Side Paging Example」にも当てはまります。

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

1 に答える 1

2

あなたの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 を使用してフィールドと方向の情報を更新します。サブスクライブが 2 回呼び出されるため、ハックを追加する必要がありました。これは既知のバグhttps://github.com/Knockout-Contrib/KoGrid/issues/174です。基本的に、ハックは sortOnServer オブザーバブルを使用し、true の場合はいつでもサーバーに呼び出しを送信します。

paginationInfo は、情報をサーバーに転送するために作成したオブジェクトです。

于 2013-03-19T17:19:08.320 に答える