2010-10-14 159 views
8

是否有可能將導航項目添加到jqGrid中的「最佳尋呼機」?如果是這樣,那麼這樣做的語法是什麼?將jqGrid自定義導航添加到頂部工具欄

我有我的網頁上的HTML代碼段,看起來像這樣

<table id="mygrid"> 
</table> 
<div id="mygrid_pager"></div> 

然後一個jqGrid的初始化,看起來像這樣

$('#mygrid').jqGrid({ 
    ..., //full config string removed for brevity, 
    pager:jQuery('#mygrid'), 
    toppager:true 
}); 
$('#mygrid').jqGrid('navGrid', '#mygrid_pager'),{ 
    'add':false, 
    'del':false, 
    'edit':false, 
    'search':false, 
    'refresh':false, 
    'cloneToTop':true, 
}).navButtonAdd('',{...}); //config navbutton string for button removed for brevity 

「頂尋呼機」以#的id mygrid_toppager會自動插入到頁面中,但它的自定義按鈕(出現在最下面的頁面上)不會出現在該頁面上。

see that there's a "cloneToTop" option包括爲navGrid,但其描述似乎令人困惑,我只能假設我使用它錯了。

如果定義了克隆從底部尋呼機到頂部尋呼機 的所有操作。請注意,navGrid只能應用於頂部 傳呼機。頂部尋呼機的ID電網的id和 「_toppager」的組合

我選擇的理解是將採取加在底部的導航按鈕,並將其克隆到頂部。然而,接下來的描述繼續說:「navGrid只能應用於頂級頁面,因爲你克隆了這個頁面,所以沒有任何意義。我們對API的使用方式有很深的誤解,

如果任何人都可以指出我正確的方向(即使只是爲了一個工作的例子)我會很感激它,我寧願通過官方的API來做到這一點,而不是to clever DOM manipulation,正如所見其他地方在計算器上。

回答

17

OK,我好像找到了一種方法,它看起來像越好。我們的想法是使用navButtonAdd"#list_toppager_left"而不是"#pager"

我修改了old answer,因此,一個自定義按鈕與一個標準按鈕一起添加到導航工具欄的頂部。頂部導航工具欄中的其他元素將被刪除。結果看起來像 alt text

你可以看到相應的演示活here

+0

啊,我想我現在跟着。感興趣的是幫助下一個程序員,我沒有意識到「cloneToTop」選項只複製默認的網格按鈕和**沒有**添加任何自定義按鈕。我曾嘗試在mygrid_toppager上使用navButtonAdd,我didn在意識到你需要讓API知道你希望在哪個網格上(左/右)處理頂層時。 – 2010-10-14 18:52:56

+2

在您的演示(以及我目前遇到的內容)中,當懸停在頂部自定義導航圖標上時,不會應用「光標:指針」樣式。你有沒有解決這個問題的方法?非常感謝! – icats 2011-11-14 17:29:59

+0

@icats:這是非常好的問題!問題出現在'.ui-jqgrid .ui-jqgrid-pager .ui-pg-button'的CSS文件中,但toppager的類爲'ui-jqgrid-toppager',沒有'ui-jqgrid-pager' 。所以要解決這個問題,我們應該添加CSS'.ui-jqgrid .ui-jqgrid-pager .ui-pg-button {cursor:pointer}'。這是'ui.jqgrid.css'中的一個錯誤 – Oleg 2011-11-14 18:10:17