jqGrid的翻頁要定義在html里，通常是在grid的下面，且是一個div對象：
· <table id="list"></table>
· <div id="gridpager"></div>
· jQuery("#grid_id").jqGrid({
· ...
· pager : '#gridpager',
· ...
· });
不必給翻頁設置任何的css屬性。在jqGrid里定義的翻頁可以是：:pager : '#gridpager', pager : 'gridpager' or pager : jQuery('#gridpager'). 推薦使用前兩個，當使用其他方式時jqGrid的導入導出功能時會引起錯誤。
導航欄的屬性：
· $.jgrid = {
· defaults : {
· recordtext: "View {0} - {1} of {2}",
· emptyrecords: "No records to view",
· loadtext: "Loading...",
· pgtext : "Page {0} of {1}"
· },
· ...
· }
如果想改變這些設置：
1． jQuery.extend(jQuery.jgrid.defaults,{emptyrecords: "Nothing to display",...});
2． jQuery("#grid_id").jqGrid({
...
pager : '#gridpager',
emptyrecords: "Nothing to display",
...
});
導航欄的屬性：
| 屬性名 |
類型 |
說明 |
默認值 |
是否可以被修改 |
| lastpage |
integer |
只讀屬性，總頁數 |
0 |
NO |
| pager |
mixed |
導航欄對象，必須是一個有效的html元素，位置可以隨意 |
空字符串 |
NO |
| pagerpos |
string |
定義導航欄的位置，默認分為三部分：翻頁，導航工具及記錄信息 |
center |
NO |
| pgbuttons |
boolean |
是否顯示翻頁按鈕 |
true |
NO |
| pginput |
boolean |
是否顯示跳轉頁面的輸入框 |
true |
NO |
| pgtext |
string |
頁面信息，第一個值是當前頁第二個值是總頁數 |
語言包 |
YES |
| reccount |
integer |
只讀屬性，實際記錄數，千萬不能跟records 參數搞混了，通常情況下他們是相同的，假如我們定義rowNum=15，但我們從服務器端返回的記錄為20即records=20，而reccount=15，表格中也顯示15條記錄 |
0 |
NO |
| recordpos |
string |
定義記錄信息的位置，可選值：left, center, right |
right |
NO |
| records |
integer |
只讀屬性，從服務器端返回的記錄數 |
none |
NO |
| recordtext |
string |
顯示記錄的信息，只有當viewrecords為true時起效，且記錄數必須大於0 |
語言包 |
yes |
| rowList |
array |
可以改變表格可以顯示的記錄數，格式為[10,20,30] |
array |
no |
| rowNum |
integer |
設置表格可以顯示的記錄數 |
20 |
yes |
| viewrecords |
boolean |
是否要顯示總記錄數信息 |
false |
no |
jQuery("#grid_id").setGridParam({rowNum:10}).trigger("reloadGrid");
跟翻頁相關的事件只有一個：onPaging
| onPaging |
pgButton |
當點擊翻頁按鈕但還為展現數據時觸發此事件，當然這跳轉欄輸入頁碼改變頁時也同樣觸發此事件。參數pgButton可選值： first,last,prev,next |
|
|
jqGrid的翻頁導航是一個方法，你可以事先定義一些其他操作，比如：編輯、新增、刪除及搜索。也可以增加自定義的函數。導航工具欄是定義到翻頁控件上的。定義如下：
· <body>
· ...
· <table id="list"></table>
· <div id="gridpager"></div>
· ...
· </body>
· jQuery("#grid_id").jqGrid({
· ...
· pager : '#gridpager',
· ...
· });
· jQuery("#grid_id").navGrid('#gridpager',{parameters},prmEdit, prmAdd, prmDel, prmSearch, prmView);
· jQuery("#grid_id").jqGrid({
· ...
· pager : '#gridpager',
· ...
· });
· jQuery("#grid_id").jqGrid('navGrid','#gridpager',{parameters},prmEdit, prmAdd, prmDel, prmSearch, prmView);
· jQuery("#grid_id").jqGrid({
· ...
· pager : '#gridpager',
· ...
· }).navGrid('#gridpager',{parameters}, prmEdit, prmAdd, prmDel, prmSearch, prmView);
· ...
grid_id ：表格id
gridpager ：導航欄id
parameters ：參數列表
prmEdit, prmAdd, prmDel, prmSearch, prmView ：事件
· $.jgrid = {
· ...
· search : {
· caption: "Search...",
· Find: "Find",
· Reset: "Reset",
· odata : ['equal', 'not equal', 'less', 'less or equal','greater','greater or equal', 'begins with','does not begin with','is in','is not in','ends with','does not end with','contains','does not contain'],
· groupOps: [ { op: "AND", text: "all" }, { op: "OR", text: "any" } ],
· matchText: " match",
· rulesText: " rules"
· },
· edit : {
· addCaption: "Add Record",
· editCaption: "Edit Record",
· bSubmit: "Submit",
· bCancel: "Cancel",
· bClose: "Close",
· saveData: "Data has been changed! Save changes?",
· bYes : "Yes",
· bNo : "No",
· bExit : "Cancel",
· },
· view : {
· caption: "View Record",
· bClose: "Close"
· },
· del : {
· caption: "Delete",
· msg: "Delete selected record(s)?",
· bSubmit: "Delete",
· bCancel: "Cancel"
· },
· nav : {
· edittext: "",
· edittitle: "Edit selected row",
· addtext:"",
· addtitle: "Add new row",
· deltext: "",
· deltitle: "Delete selected row",
· searchtext: "",
· searchtitle: "Find records",
· refreshtext: "",
· refreshtitle: "Reload Grid",
· alertcap: "Warning",
· alerttext: "Please, select row",
· viewtext: "",
· viewtitle: "View selected row"
· },
· ...
| 屬性 |
類型 |
說明 |
默認值 |
| add |
boolean |
是否啟用新增功能，當點擊按鈕時會觸發editGridRow事件 |
true |
| addicon |
string |
給新增功能設置圖標，只有UI theme里的圖標才可以使用 |
ui-icon-plus |
| addtext |
string |
新增按鈕上的文字 |
空 |
| addtitle |
string |
當鼠標移到新增按鈕上時顯示的提示 |
新增一行 |
| alertcap |
string |
當我們edit,delete or view一行記錄時出現的提示信息 |
警告 |
| alerttext |
string |
當edit,delete or view一行記錄時的文本提示 |
請選擇一行記錄 |
| closeOnEscape |
boolean |
是否可以使用esc鍵關閉對話框 |
true |
| del |
boolean |
是否啟用刪除功能，啟用時會觸發事件delGridRow |
true |
| delicon |
string |
設置刪除按鈕的圖標，只有UI theme里的圖標才可以使用 |
ui-icon-trash |
| deltext |
string |
設置到刪除按鈕上的文字信息 |
空 |
| deltitle |
string |
當鼠標移到刪除按鈕上時出現的提示 |
刪除鎖選擇的行 |
| edit |
boolean |
是否啟用可編輯功能，當編輯時會觸發事件editGridRow |
true |
| editicon |
string |
設置編輯按鈕的圖標，只有UI theme里的圖標才可以使用 |
ui-icon-pencil |
| edittext |
string |
編輯按鈕上文字 |
空 |
| edittitle |
string |
當鼠標移到編輯按鈕上出現的提示信息 |
編輯所選擇的行 |
| position |
string |
定義按鈕位置，可選值left, center and right. |
left |
| refresh |
boolean |
是否啟用刷新按鈕，當點擊刷新按鈕時會觸發trigger(“reloadGrid”)事件，而且會清空搜索條件值 |
true |
| refreshicon |
string |
設置刷新圖標，只有UI theme里的圖標才可以使用 |
ui-icon-refresh |
| refreshtext |
string |
刷新按鈕上文字信息 |
空 |
| refreshtitle |
string |
當鼠標移到刷新按鈕上的提示信息 |
重新加載 |
| refreshstate |
string |
指明表格如何刷新。firstpage：從第一頁開始刷新；current：只刷新當前頁內容 |
firstpage |
| afterRefresh |
function |
當點擊刷新按鈕之后觸發此事件 |
null |
| search |
boolean |
是否啟用搜索按鈕，會觸發searchGrid 事件 |
true |
| searchhicon |
string |
設置搜索按鈕的圖標，只有UI theme里的圖標才可以使用 |
ui-icon-search |
| searchtext |
string |
搜索按鈕上的文字 |
空 |
| searchtitle |
string |
當鼠標移到搜索按鈕上的提示信息 |
搜索 |
| view |
boolean |
是否啟用查看按鈕，會觸發事件viewGridRow |
false |
| viewicon |
string |
設置查看按鈕的圖標，只有UI theme里的圖標才可以使用 |
ui-icon-document |
| viewtext |
string |
查看按鈕上文字 |
空 |
| viewtitle |
string |
當鼠標移到查看按鈕上的提示信息 |
查看所選記錄 |
· jQuery("#grid_id").jqGrid({
· ...
· pager : '#gridpager',
· ...
· }).navGrid('#gridpager',{view:true, del:false},
· {}, // use default settings for edit
· {}, // use default settings for add
· {}, // delete instead that del:false we need this
· {multipleSearch : true}, // enable the advanced searching
· {closeOnEscape:true} /* allow the view dialog to be closed when user press ESC key*/
· );