Question

Hello有没有人知道如何在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) }
}

感谢。

Answer 1

您的pagingOptions.pageToFirst在您的pagingOptions对象中不存在。

如果您要尝试转到第一页创建新功能

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

然后，这将调用currentPage上的subscribe函数，然后向服务器发出请求以获取第一页结果。

KoGrid如何自定义分页并使用lib来实现

1 个答案: