將數字尋呼機添加到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

回答

相關問題