Jqgrid入門-別具特色的Pager Bar (四)

Pager Bar位於表格最下邊。默認情況下，分為三部分。如圖：

• 第一部分：導航按鈕欄(Navigator)
• 第二部分：頁碼欄(Pager)
• 第三部分：記錄信息欄(Record)

        要實現這個功能也不難，最基本的語法就一句。

1	$( "#gridTable" ).jqGrid( 'navGrid' , '#gridPager' );

        但是很多時候我們需要的不僅僅是這種，還有很多屬性需要了解。

1. Navigator

默認有5個預定義好的按鈕：

• 添加新行
• 編輯選中的行
• 刪除選中的行
• 查找記錄
• 重載表格

Navigator通過navGrid方法來配置導航欄，用法是：
$(“#grid_id”).navGrid(‘#gridpager’,{parameters},prmEdit, prmAdd, prmDel, prmSearch, prmView); 或
$(“#grid_id”).jqGrid(‘navGrid’,'#gridpager’,{parameters},prmEdit, prmAdd, prmDel, prmSearch, prmView);

        1.1.  Navigator相關參數

• add：定義是否啟用添加操作的按鈕；
• addicon：用於添加操作的按鈕上的圖標，目前只能使用jQuery UI中的圖標樣式；
• addtext：用於添加操作的按鈕上的文本；
• addtitle：用於添加操作的按鈕上的tooltip；
• del/delicon/deltext/deltitle：用於刪除按鈕的一套屬性，可以參照添加按鈕的幾個屬性；
• edit/editicon/edittext/edittitle：用於編輯按鈕的一套屬性，可以參照添加按鈕的幾個屬性；
• refresh/refreshicon/refreshtext/refreshtitle：用於刷新表格按鈕的一套屬性，可以參照添加按鈕的幾個屬性；當點擊這個按鈕時，將執行trigger(“reloadGrid”)並清除用於查詢的參數；
• refreshstate：定義如何重新載入Grid表格，firstpage：重新載入表格的第一頁；current：重新載入當前頁，並保存當前選中的行；默認為firstpage；
• afterRefresh：定義點擊刷新表格按鈕之后的事件函數；
• beforeRefresh：定義點擊刷新表格按鈕之前的事件函數；
• search/searchicon/searchtext/searchtitle：用於查詢按鈕的一套屬性，可以參照添加按鈕的幾個屬性；當點擊這個按鈕時，將會調用searchGrid方法；
• view/viewicon/viewtext/viewtitle：用於查看記錄按鈕的一套屬性，可以參照添加按鈕的幾個屬性；
• addfunc：如果定義，則用定義的函數替代原有的add函數，這個函數將不接受任何參數；
• editfunc：如果定義，則用定義的函數替代原有的edit函數，編輯的行的id作為參數傳入這個函數；
• delfunc：如果定義，則用定義的函數替代原有的del函數，編輯的行的id作為參數傳入這個函數；
• alertcap：當未選中任何行而點擊編輯、刪除、查看按鈕時，彈出的提示框的標題；
• alerttext：當未選中任何行而點擊編輯、刪除、查看按鈕時，彈出的提示信息；
• cloneToTop：定義是否“拷貝”一套導航按鈕到Grid表格頂端的Pager中，默認為false；

借助這些選項，可以將上一篇中的例子，修改一下，更多的借助Jqgrid內置的功能。例如，當載入行數據到對話框時，之前是通過在自定義的loadSelectedRowData方法中，調用jqGrid(“getGridParam”, “selrow”)來檢查是否有選中的數據行。現在在點擊編輯或刪除按鈕的時候，可以通過 Jqgrid 自己檢查是否有選中的數據行，如果沒有則彈出提示。如果有則選中的行，則還會將行id作為參數，傳入對應的函數方法中。代碼如下:

1 2 3 4 5 6

$( "#gridTable" ).jqGrid( 'navGrid' , '#gridPager' ,{ addStu : addStu, //點擊添加按鈕，調用添加方法 updateStu : updateStu, //點擊修改按鈕，調用修改方法 delStu : delStu, //點擊刪除按鈕，調用刪除方法 viewStu : viewStu, //點擊查看按鈕，調用查看方法 });

1.2 關於prmEdit、prmAdd、prmDel、prmSearch、prmView的參數

Jqgird本身為這些參數定義了默認值，而且不同的language文件也有各自的定義來覆蓋原始的默認值。我們也可以在jqGrid重新定義新的值，以覆蓋默認的值。在我做的DEMO中，沒有涉及這一塊，所以具體的參數可以查看官方文檔。地址：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:navigator

1.3自定義按鈕

 

        有的時候，Jqgrid默認的按鈕可能不能滿足我們的要求，別急，它還提供了添加自定義按鈕的方法。具體API是：

        $(“#grid_id”).navGrid(“#pager”,…).navButtonAdd(“#pager”,{parameters});

或

$(“#grid_id”).jqGrid(‘navGrid’,”#pager”,…).jqGrid(‘navButtonAdd’,”#pager”,{parameters});

關於navButtonAdd的屬性：

• caption：按鈕上顯示的文本，可以是空值；
• buttonicon：按鈕上的圖標，如果設為“none”，則只顯示按鈕上的文本；
• onClickButton：當點擊按鈕時所調用的方法函數，默認為null；
• position：添加新按鈕的位置，first或last；默認為last；
• title：新按鈕的tooltip
• cursor：當鼠標滑過按鈕時的光標樣式，默認為pointer；
• id：為按鈕設置id。

比如我們可以利用Jqgrid的自定義按鈕的方法，在Navigator里面加入打印、下載等方法。這些方法可以自己實現。