0

こんにちは、KoGridでページネーションをカスタマイズする方法を知っている人はいますか？

独自のページネーションコントロールを作成したいので（簡単）、koGridページネーションイベントをコントロールにバインドする必要があります。（koGridが生成するのと同じように書き込もうとしますが、機能しません）

    <button data-bind="click: pagingOptions.pageToFirst" type="button">
    pageToFirst
    </button>


function mainViewModel() {
    var self = this;
    var checkmarkFilter = function (input) {
        return input ? '\u2714' : '\u2718';
    };
    var dateFilter = function (input) {
        return new Date(input);
    };
    self.mySelections = ko.observableArray([]);
    self.myData = ko.observableArray([]);
    self.myVisibleData = ko.observableArray([]);
    self.filterOptions = {
        filterText: ko.observable(""),
        useExternalFilter: false
    };

    self.pagingOptions = {
        pageSizes: ko.observable([10, 20, 50]), //page Sizes
        pageSize: ko.observable(10), //Size of Paging data
        totalServerItems: ko.observable(0), //how many items are on the server (for paging)
        currentPage: ko.observable(1) //what page they are currently on
    };
    self.getPagedDataAsync = function (pageSize, page, searchText) {    
         var pagedData = resultData.slice((page - 1) * pageSize, page * pageSize);  
         self.myVisibleData(pagedData);
         self.myData(resultData);
         self.pagingOptions.totalServerItems(resultData.length);

        // setTimeout(function () {
            // var data;
            // if (searchText) {
                // var ft = searchText.toLowerCase();
                // data = largeLoad().filter(function (item) {
                    // return JSON.stringify(item).toLowerCase().indexOf(ft) != -1;
                // });
            // } else {
                // data = largeLoad();
            // }
            // //var pagedData = data.slice((page - 1) * pageSize, page * pageSize);
            // self.myData(data);
            // self.pagingOptions.totalServerItems(data.length);
        // }, 100);
    };
    self.pagingOptions.pageSize.subscribe(function (a) {
        self.getPagedDataAsync(a, self.pagingOptions.currentPage(), self.filterOptions.filterText());
    });
    self.pagingOptions.currentPage.subscribe(function (a) {
        self.getPagedDataAsync(self.pagingOptions.pageSize(), a, self.filterOptions.filterText());
    });
    self.filterOptions.filterText.subscribe(function (a) {
        self.getPagedDataAsync(self.pagingOptions.pageSize(), self.pagingOptions.currentPage(), a);
    });
    self.getPagedDataAsync(self.pagingOptions.pageSize(), self.pagingOptions.currentPage());


    self.columnsChanged = function(newCols) {
        return true;
    };
    self.gridOptions = {
        data: self.myVisibleData,
        selectedItems: self.mySelections,
        displaySelectionCheckbox: true,
        multiSelect: true,
        showGroupPanel: false,
        showColumnMenu: false,
        showFilter: false,
        columnsChanged: self.columnsChanged,
        maintainColumnRatios: true,
        enablePaging: true,
        pagingOptions: self.pagingOptions,
        columnDefs: ko.observableArray( [{ field: 'name', displayName: 'Adr', width: 'auto' },
                     { field: 'type', displayName: 'type', width: 'auto' },
                     { field: 'id', displayName: 'id', width: 'auto' }   ])
    };
    self.refresh = function(myAjaxData){ self.myData(myAjaxData) }
}

ありがとう。

4

1 に答える 1

1

あなたpagingOptions.pageToFirstはあなたのpagingOptionsオブジェクトに存在しません。

最初のページに移動しようとしている場合は、新しい関数を作成してください

self.pageToFirst = function(){
    self.pagingOptions.currentPage(1);
}

次に、currentPageでサブスクライブ関数を呼び出し、サーバーにリクエストを送信して結果の最初のページを取得します。

于 2013-03-29T22:11:47.297 に答える