将数字寻呼机添加到jqGrid

Question

有谁知道设置jqGrid使用数字寻呼机的方法？

我希望将分页设置为1,2,3,4> >>而不是Page 1 of 20,当我点击4时,它会像<< 4,5,6,7> >>

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

Telerik的网格(http://demos.telerik.com/aspnet-mvc/grid).

Answer 1

噢噢噢!在我编写代码期间,firegnom发布了另一个实现.然而更好的两个工作版本没有人.

我做了一个小演示,演示了如何实现寻呼机中链接的行为.我制作了代码,它可以在表单中显示寻呼机

(如果pginput: false使用jqGrid的参数)或在表单中

在这两种情况下,当前页面都不会显示在列表中.如何看到我为链接插入带下划线的样式.如果你不喜欢它,你应该删除

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

来自演示.你可以在这里和这里看到工作的现场演示.

相应的JavaScript代码在loadComplete事件处理程序中是完整的:

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;