Question

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

我希望将分页设置为1,2,3,4＆gt;而不是20页的第1页。＆GT;＆GT;当我点击4时，它会像＆lt;＆lt; ＆LT; 4,5,6,7＆gt; ＆GT;＆GT;

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

Telerik的网格（http://demos.telerik.com/aspnet-mvc/grid）。

Answer 1

哦~~！在我写代码时firegnom发布了另一个实现。然而，更好的两个工作版本没有人。

我做了一个小演示，演示了如何实现寻呼机中链接的行为。我制作了代码，它可以以

的形式显示寻呼机

enter image description here

（如果使用jqGrid的pginput: false参数）或

形式

enter image description here

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

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

来自演示。通过现场演示，您可以看到here和here。

相应的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;

Answer 2

据我所知，在jquery中没有解决方案，你必须自己做。下面我有寻呼机的工作代码：

function jqgridCreatePager(pagernav,navgrid,pages){
    $('#'+pagernav+' #'+pagernav+'_center td:has(input)').attr('id','pager');
    var td = $('#'+pagernav+' #'+pagernav+'_center #pager').html('');
    var page = parseInt(jQuery("#"+navgrid).jqGrid('getGridParam','page'))
    var lastPage = parseInt(jQuery("#"+navgrid).jqGrid('getGridParam','lastpage'))
    text='';
    if(page-pages > 1){
            text+=jqgridCreatePageLink(navgrid,1)
            text+= ' ... '
    }
    for(var i=0;i <pages;i++){
        if(page-pages+i >=1)
            text+=jqgridCreatePageLink(navgrid,page-pages+i)
    }

    text +=jqgridCreatePageLink(navgrid,page,true);

    for(var i=0;i <pages;i++){
        if(page+i+1 <= lastPage) 
            text +=jqgridCreatePageLink(navgrid,page+i+1)
    }

    if(page+pages <= lastPage){
        text+= ' ... '
        text+=jqgridCreatePageLink(navgrid,lastPage)

    }
    var td = $('#'+pagernav+' #'+pagernav+'_center #pager').html(text);
}

和正在建立链接的功能

function jqgridCreatePageLink(navgrid,page,current){
    if (!current)
        return ' <a href="#" onclick="jQuery(\'#'+navgrid+'\').jqGrid(\'setGridParam\',{page:'+page+'}).trigger(\'reloadGrid\')">'+page+'</a> ';
    return ' >'+page+'< '
}

现在要将此代码与网格集成，只需在网格创建gridComplete事件或类似内容时添加它：

//create 
jqgridCreatePager('yourGridNavigator','yourGrid',3)

并将其附加到onPage事件

//onPage
jqgridCreatePager('yourGridNavigator','yourGrid',3)

防止闪烁只是添加到你的CSS

#yourGridNavigator_center{
 display:none;
}

再次在gridComplete上添加

$('#yourGridNavigator_center').show();

关于函数参数：

首先是您的网格导航器ID
第二个是您的网格ID
该功能的第三个参数是当前页面之前和之后应显示的页数

Answer 3

这是另一种可能的解决方案。

它用一个链接列表替换了分页文本框。

loadComplete: function() {
    var grid = this;
    var container = jQuery("#prev_jqGridTablePager").next().next();
    jQuery(container).html('');

    var totalPages = grid.p.lastpage;
    for (var i = 1; i <= totalPages; i++) {
        if (i == grid.p.page) {
            jQuery(container).append("<span class='pagination current'>" + i + "</span>");
        } else {
            jQuery(container).append("<a class='pagination' href='javascript: void(0)'>" + i + "</a>");
        }
    }

    jQuery(container).find("a.pagination").click(function(e) {
        e.preventDefault();

        var newPage = jQuery(this).text();
        jQuery(grid).trigger("reloadGrid", [{ page: newPage }]);
    });
}

将数字寻呼机添加到jqGrid

3 个答案: