将数字寻呼机添加到jqGrid [英] Add numeric pager to jqGrid

问题描述

有人知道设置jqGrid以使用数字寻呼机的方法吗?

Does anyone know of a way to set up jqGrid to use a numeric pager?

我希望分页像是1,2,3,4> >>而不是20的第1页，当我单击4时，它会像<< < 4,5,6,7> >>

Instead of Page 1 of 20, I want to have the paging be like 1,2,3,4 > >> and when I click on 4 it would something like << < 4,5,6,7 > >>

我已经看过其他网格如何做到这一点，但是我似乎找不到jqGrid的内置方式. 我可能有实现它的方法，但是如果已经有东西，我不想重新发明轮子.从网格数据中获取用户数据以确定可用页面之后，我将需要添加自定义按钮.

I've seen how other grids do it, but I can't seem to find a built in way for jqGrid to do it. I may have a way to implement it, but I don't want to reinvent the wheel if there is something already out there. It would involve me adding custom buttons after getting userdata from the grid's data to determine the pages available.

Telerik的网格可以做到这一点(http://demos.telerik.com/aspnet-mvc/grid).

Telerik's grid does it (http://demos.telerik.com/aspnet-mvc/grid).

推荐答案

哦！在我编写代码的过程中，firegnom发布了另一个实现.尽管如此，还是有两个更好的工作版本.

Ohhh! During I wrote the code firegnom posted another implementation. Nevertheless better two working versions as no one.

我做了一个小型演示，演示了如何实现寻呼机中链接的行为.我编写了代码，以便它可以以以下形式显示寻呼机

I made small demo which demonstrate how the behavior with links in the pager can be implemented. I made the code so, that it can display the pager either in the form

(如果使用了jqGrid的pginput: false参数)或格式为

(if pginput: false parameter of jqGrid are used) or in the form

在两种情况下，当前页面都不会显示在列表中.可以看到我为链接插入了带下划线的样式.如果您不喜欢它，则应删除

In both cases the current page will not displayed in the list. How one can see I inserted the underlined style for the links. If you don't like it you should remove

td.myPager a { text-decoration:underline !important }

演示中的

.您可以在此处和 loadComplete事件处理程序中相应的JavaScript代码已满:

The corresponding JavaScript code is full inside of loadComplete event handler:

loadComplete: function() {
    var i, myPageRefresh = function(e) {
        var newPage = $(e.target).text();
        grid.trigger("reloadGrid",[{page:newPage}]);
        e.preventDefault();
    };

    $(grid[0].p.pager + '_center td.myPager').remove();
    var pagerPrevTD = $('<td>', { class: "myPager"}), prevPagesIncluded = 0,
        pagerNextTD = $('<td>', { class: "myPager"}), nextPagesIncluded = 0,
        totalStyle = grid[0].p.pginput === false,
        startIndex = totalStyle? this.p.page-MAX_PAGERS*2: this.p.page-MAX_PAGERS;
    for (i=startIndex; i<=this.p.lastpage && (totalStyle? (prevPagesIncluded+nextPagesIncluded<MAX_PAGERS*2):(nextPagesIncluded<MAX_PAGERS)); i++) {
        if (i<=0 || i === this.p.page) { continue; }

        var link = $('<a>', { href:'#', click:myPageRefresh });
        link.text(String(i));
        if (i<this.p.page || totalStyle) {
            if (prevPagesIncluded>0) { pagerPrevTD.append('<span>,&nbsp;</span>'); }
            pagerPrevTD.append(link);
            prevPagesIncluded++;
        } else {
            if (nextPagesIncluded>0 || (totalStyle && prevPagesIncluded>0)) { pagerNextTD.append('<span>,&nbsp;</span>'); }
            pagerNextTD.append(link);
            nextPagesIncluded++;
        }
    }
    if (prevPagesIncluded > 0) {
        $(grid[0].p.pager + '_center td[id^="prev"]').after(pagerPrevTD);
    }
    if (nextPagesIncluded > 0) {
        $(grid[0].p.pager + '_center td[id^="next"]').before(pagerNextTD);
    }
}

其中grid和MAX_PAGERS被定义为

var grid = $("#list"), MAX_PAGERS = 2;

这篇关于将数字寻呼机添加到jqGrid的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！