将数字寻呼机添加到jqGrid

有谁知道一种方法来设置jqGrid使用数字寻呼机？将数字寻呼机添加到jqGrid

而不是第1页，共20页，我想分页是1,2,3,4> >>，当我点击4时，它会像< < < 4,5,6,7> >>

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

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

来源

2011-04-27 HapiDjus

当您发现此消息时，请通知我们，以便我们也可以进行更新。 – Tareq 2011-04-29 06:04:34

哦！在我写代码的时候，firegnom发布了另一个实现。尽管如此，更好的两个工作版本没有人。

我做了一个小演示，演示了如何实现与寻呼机中的链接行为。我提出的代码的话，它可以显示在形式寻呼机或者

enter image description here

（如果的jqGrid的pginput: false参数被使用），或在形式

enter image description here

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

。工作现场演示，您可以看到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;

来源

2011-04-29 17:55:13 Oleg

不错的工作。做了一点调整，使其正常工作，但这很好。这将是一个很酷的内置功能4.1 – HapiDjus 2011-05-02 20:45:56

@HapiDjus：我觉得这个解决方案还不完美。我不知道哪个是以新外观显示当前页面和总页数的最佳方式。关于包含jqGrid的新构造中的特征。我不是jqGrid的开发人员，所以我不得不影响在新版本的jqGrid中包含新功能。如果我们找到真正好的方法来显示当前页面以及可以在我的代码中发布功能请求的页面总数，那么功能*可能*可能包含在下一个jqGrid版本中，但是您可以使用现在在'loadComplete'中编写代码。 – Oleg 2011-05-03 09:36:52

@HapiDjus：另一个一般的评论。我发现你不会随时使用“投票”。从15点声望开始，你有权利。 [Here]（http://stackoverflow.com/faq#howtoask），你可以找到这个简单的规则：**“当你看到你的问题的新答案，通过点击向左的向上箭头向上投票有帮助的答案“。**”接受“而不是投票的问题将在很多方面被解释为”封闭“，并且将被搜索引擎放在最后的地方，因为答案被解释为**没有帮助**。我想你应该知道这一点。 – Oleg 2011-05-03 09:43:49

据我所知，在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();

就函数patrameters：

首先是网格的导航标识
秒是你的网格ID
该函数的第三个参数是当前页面前后应显示多少页面

来源

2011-04-29 16:00:38 firegnom

这两种解决方案都以不同的方式工作。我不相信有一个onPage事件（onPaging可能），但它没有通话。 – HapiDjus 2011-05-09 21:41:12

这里还有一个更可行的解决方案。

它将链接列表替换为分页文本框。

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 }]); 
    }); 
}

来源

2012-07-10 16:37:40

将数字寻呼机添加到jqGrid

回答

相关问题