将数字寻呼机添加到jqGrid

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

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

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

Telerik的网格就是这样做的（http://demos.telerik.com/aspnet-mvc/grid）。

Answer 1

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

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

（如果使用了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 = $('', { class: "myPager"}), prevPagesIncluded = 0, pagerNextTD = $('', { 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', { href:'#', click:myPageRefresh }); link.text(String(i)); if (i0) { pagerPrevTD.append(', '); } pagerPrevTD.append(link); prevPagesIncluded++; } else { if (nextPagesIncluded>0 || (totalStyle && prevPagesIncluded>0)) { pagerNextTD.append(', '); } 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 =1) text+=jqgridCreatePageLink(navgrid,page-pages+i) } text +=jqgridCreatePageLink(navgrid,page,true); for(var i=0;i  

和正在建立联系的function

 function jqgridCreatePageLink(navgrid,page,current){ if (!current) return ' '+page+' '; return ' >'+page+'< ' } 

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

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

并将其附加到onPage事件

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

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

 #yourGridNavigator_center{ display:none; } 

并再次在gridComplete上添加

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

至于function参数：

• 首先是你的网格导航器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("" + i + ""); } else { jQuery(container).append("" + i + ""); } } jQuery(container).find("a.pagination").click(function(e) { e.preventDefault(); var newPage = jQuery(this).text(); jQuery(grid).trigger("reloadGrid", [{ page: newPage }]); }); }