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

问题描述

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

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

而不是第 1 页，共 20 页，我想让分页像 1,2,3,4 > >> 当我点击 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 }

来自演示.您可以在 here 和 这里.

from the demo. The working live demos you can see here and here.

对应的 JavaScript 代码在 loadComplete 事件处理程序中已满:

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屋！