有人知道设置 jqGrid 以使用数字寻呼机的方法吗？
而不是第 1 页，共 20 页，我想让分页像 1,2,3,4 > >> 当我点击 4 时，它会像 > >
我已经看到其他网格如何做到这一点，但我似乎无法找到 jqGrid 的内置方式来做到这一点。 我可能有办法实现它，但如果已经有东西了，我不想重新发明轮子。这将涉及我在从网格数据中获取用户数据以确定可用页面后添加自定义按钮。
Telerik 的网格可以做到这一点 (http://demos.telerik.com/aspnet-mvc/grid)。
【问题讨论】：
哦！在我编写代码期间，firegnom 发布了另一个实现。不过最好有两个工作版本，因为没有一个。
我做了一个小演示，演示了如何实现寻呼机中的链接行为。我制作了这样的代码，它可以在表单中显示寻呼机
（如果使用了jqGrid的pginput: false参数）或者形式
在这两种情况下，当前页面都不会显示在列表中。如何看到我为链接插入了带下划线的样式。如果你不喜欢它，你应该删除
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>, </span>'); }
pagerPrevTD.append(link);
prevPagesIncluded++;
} else {
if (nextPagesIncluded>0 || (totalStyle && prevPagesIncluded>0)) { pagerNextTD.append('<span>, </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;
【讨论】：
loadComplete 中的代码。
据我所知，在 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();
关于功能参数：
【讨论】：
还有一种可能的解决方案。
它将分页文本框替换为链接列表。
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 }]);
});
}
【讨论】：