系列索引
Web jquery表格組件 JQGrid 的使用 - 從入門到精通 開篇及索引
Web jquery表格組件 JQGrid 的使用 - 4.JQGrid參數、ColModel API、事件及方法
Web jquery表格組件 JQGrid 的使用 - 5.Pager翻頁、搜索、格式化、自定義按鈕
Web jquery表格組件 JQGrid 的使用 - 6.准備工作 & Hello JQGrid
Web jquery表格組件 JQGrid 的使用 - 7.查詢數據、編輯數據、刪除數據
Web jquery表格組件 JQGrid 的使用 - 8.Pager、新增數據、查詢、刷新、查看數據
Web jquery表格組件 JQGrid 的使用 - 全部代碼
Web jquery表格組件 JQGrid 的使用 - 11.問題研究
目錄
翻頁
5.Pager翻頁、搜索、格式化、自定義按鈕
翻頁
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*/ );
jQuery("#grid_id").navGrid("#pager",...).navButtonAdd("#pager",{parameters});
jQuery("#grid_id").jqGrid('navGrid',"#pager",...).jqGrid('navButtonAdd',"#pager",{parameters}); { caption:"NewButton", buttonicon:"ui-icon-newwin", onClickButton:null, position: "last", title:"", cursor: "pointer"}
caption：按鈕名稱，可以為空，string類型
buttonicon：按鈕的圖標，string類型，必須為UI theme圖標
onClickButton：按鈕事件，function類型，默認null
position：first或者last，按鈕位置
title：string類型，按鈕的提示信息
cursor：string類型，光標類型，默認為pointer
id：string類型，按鈕id
如果設置多個按鈕：
jQuery("#grid_id")
.navGrid('#pager',{edit:false,add:false,del:false,search:false}) .navButtonAdd('#pager',{ caption:"Add", buttonicon:"ui-icon-add", onClickButton: function(){ alert("Adding Row"); }, position:"last" }) .navButtonAdd('#pager',{ caption:"Del", buttonicon:"ui-icon-del", onClickButton: function(){ alert("Deleting Row"); }, position:"last" });
按鈕間的分隔
jQuery("#grid_id").navGrid("#pager",...).navButtonAdd("#pager",{parameters}).navSeparatorAdd("#pager",{separator_parameters}};
默認參數：
{sepclass : “ui-separator”,sepcontent: ''}
sepclass：ui-jqgrid的屬性名
sepcontent：分隔符的內容.
jqGrid的格式化是定義在語言包中
$jgrid = {
...
formatter : {
integer : {thousandsSeparator: " ", defaultValue: '0'}, number : {decimalSeparator:".", thousandsSeparator: " ", decimalPlaces: 2, defaultValue: '0.00'}, currency : {decimalSeparator:".", thousandsSeparator: " ", decimalPlaces: 2, prefix: "", suffix:"", defaultValue: '0.00'}, date : { dayNames: [ "Sun", "Mon", "Tue", "Wed", "Thr", "Fri", "Sat", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ], monthNames: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ], AmPm : ["am","pm","AM","PM"], S: function (j) {return j < 11 || j > 13 ? ['st', 'nd', 'rd', 'th'][Math.min((j - 1) % 10, 3)] : 'th'}, srcformat: 'Y-m-d', newformat: 'd/m/Y', masks : { ISO8601Long:"Y-m-d H:i:s", ISO8601Short:"Y-m-d", ShortDate: "n/j/Y", LongDate: "l, F d, Y", FullDateTime: "l, F d, Y g:i:s A", MonthDay: "F d", ShortTime: "g:i A", LongTime: "g:i:s A", SortableDateTime: "Y-m-d\\TH:i:s", UniversalSortableDateTime: "Y-m-d H:i:sO", YearMonth: "F, Y" }, reformatAfterEdit : false }, baseLinkUrl: '', showAction: '', target: '', checkbox : {disabled:true}, idName : 'id' } ...
這些設置可以通過colModel中的formatoptions參數修改
jQuery("#grid_id").jqGrid({
...
colModel : [
...
{name:'myname', ... formatter:'number', ...}, ... ], ... });
此實例是對名為“myname”的列進行格式化，格式化類是“number”，假如初始值為“1234.1”則格式化后顯示為“1 234.10” 。
如果給某列進行格式化：
jQuery("#grid_id").jqGrid({
...
colModel : [
...
{name:'myname', ... formatter:'currency', formatoptions:{decimalSeparator:",", thousandsSeparator: ",", decimalPlaces: 2, prefix: "$ "} } , ... ], ... });
這個設置會覆蓋語言包中的設置。
select類型的格式化實例：
原始數據
jQuery("#grid_id").jqGrid({
...
colModel : [ {name:'myname', edittype:'select', editoptions:{value:"1:One;2:Two"}} ... ], ... });
使用格式化后
jQuery("#grid_id").jqGrid({
...
colModel : [ {name:'myname', edittype:'select', formatter:'select', editoptions:{value:"1:One;2:Two"}} ... ] ... });
結果是，表格的數據值為1或者2但是現實的是One或者Two。
對超鏈接使用select類型的格式化：
jQuery("#grid_id").jqGrid({
...
colModel: [ {name:'myname', edittype:'select', formatter:'select', formatoptions:{baseLinkUrl:'someurl.php', addParam: '&action=edit'}, ...} ... ] ... });
得到http://localhost/someurl.php?id=123&action=edit
如果想改變id值則
jQuery("#grid_id").jqGrid({
...
colModel: [ {name:'myname', edittype:'select', formatter:'select', formatoptions:{baseLinkUrl:'someurl.php', addParam: '&action=edit', idName:'myid'}, ...} ... ] ... });
得到http://localhost/someurl.php?myid=123&action=edit
jQuery("#grid_id").jqGrid({
...
colModel: [
...
{name:'price', index:'price', width:60, align:"center", editable: true, formatter:currencyFmatter}, ... ] ... }); function currencyFmatter (cellvalue, options, rowObject) { // do something here return new_format_value }
cellvalue：要被格式化的值
options：對數據進行格式化時的參數設置，格式為：
{ rowId: rid, colModel: cm}
rowObject：行數據
數據的反格式化跟格式化用法相似.
jQuery("#grid_id").jqGrid({
...
colModel: [
...
{name:'price', index:'price', width:60, align:"center", editable: true, formatter:currencyFmatter, unformat:unformatCurrency}, ... ] ... }); function currencyFmatter (cellvalue, options, rowObject) { return "$"+cellvalue; } function unformatCurrency (cellvalue, options) { return cellvalue.replace("$",""); }
表格中數據實際值為123.00，但是顯示的是$123.00; 我們使用getRowData ，getCell 方法取得的值是123.00。
創建通用的格式化函數
<script type="text/javascript">
jQuery.extend($.fn.fmatter , {
currencyFmatter : function(cellvalue, options, rowdata) { return "$"+cellvalue; } }); jQuery.extend($.fn.fmatter.currencyFmatter , { unformat : function(cellvalue, options) { return cellvalue.replace("$",""); } }); </script>
具體使用：
jQuery("#grid_id").jqGrid({
...
colModel: [
...
{name:'price', index:'price', width:60, align:"center", editable: true, formatter:currencyFmatter}, ... ] ... })
表格中所有的列都可以作為搜索條件。
所用到的語言包文件
$.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" }
colModel 設置
| 可選參數 |
類型 |
說明 |
默認值 |
| search |
boolean |
是否是搜索列 |
true |
| stype |
string |
搜索類型，text類型或者select類型 |
text |
| searchoptions |
object |
對搜索條件進行一些設置 |
|
searchoptions 參數
| 屬性 |
類型 |
說明 |
| dataUrl |
string |
只有當搜索類型為select才起效 |
| buildSelect |
function |
只有當dataUrl設置時此參數才起效，通過一個function來構建下拉框 |
| dataInit |
function |
初始化時調用，用法：dataInit: function(elem) {do something}通常用在日期的選擇上. Example:dataInit : function (elem) {$(elem).datepicker();} |
| dataEvents |
array |
事件列表，用法：dataEvents: [{ type: 'click', data: { i: 7 }, fn: function(e) { console.log(e.data.i); }},{ type: 'keypress', fn: function(e) { console.log('keypress'); } }] |
| attr |
object |
設置屬性值。attr : { title: “Some title” } |
| searchhidden |
boolean |
默認情況下，隱藏值不是搜索列。為了使隱藏值可以作為搜索列則將此設為true |
| sopt |
array |
此參數只用到單列搜索上，說明搜索條件。可用值：['eq','ne','lt','le','gt','ge','bw','bn','in','ni','ew','en','cn','nc']意 思為['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'] |
| defaultValue |
string |
默認值 |
| value |
mixed |
只用在搜索類型為select下。可以是string或者object，如果為string則格式為value:label，且以“；”結尾；如果為object格式為editoptions:{value:{1:'One';2:'Two'}} |
jQuery("#grid_id").jqGrid({
...
colModel: [
...
{name:'price', index:'price', width:60, search:true, stype:'text', searchoptions:{dataInit:datePick, attr:{title:'Select Date'}} }, ... ] ... }); datePick = function(elem) { jQuery(elem).datepicker(); }
需要說明的：
所有的搜索都是使用url來到服務器端查詢數據。
當執行搜索時會用查詢數據填充postData array
發送到服務器端搜索字符串的名稱為_search
當點擊刷新按鈕時不會使用搜索條件
每個搜索方法都有自己的數據清空方法
搜索工具欄只是在列標題下面構造一個輸入框。且使用表格的url進行搜索記錄，發到服務器端數據格式為name:value，而且是附加在postData之后。
jQuery("#grid_id").filterToolbar(options);
jQuery("#grid_id").jqGrid('filterToolbar',options);
options：參數
| 可選參數 |
類型 |
描述 |
默認值 |
| autosearch |
boolean |
查詢規則，如果是text類型則是當按下回車鍵才去執行查詢；如果是select類型的查詢則當值改變時就去執行查詢 |
true |
| beforeSearch |
function |
執行查詢之前觸發此事件 |
null |
| afterSearch |
function |
查詢完成后觸發事件 |
null |
| beforeClear |
function |
清空查詢條件值時觸發事件 |
null |
| afterClear |
function |
清空查詢條件后觸發事件 |
null |
方法：
| 方法 |
描述 |
| triggerToolbar |
執行查詢時調用此方法 |
| clearToolbar |
當清空查詢條件值時觸發此函數 |
| toggleToolbar |
Toggeles工具欄 |
<div id="mysearch"></div>
jQuery("#mysearch").filterGrid('#grid_id',options);
options：參數
| 參數 |
描述 |
默認值 |
| gridModel |
當為ture我們會使用colModel中的屬性構造查詢條件，所用到的參數：name, index, edittype, editoptions, search.還有一個參數：defval：查詢條件的默認值；surl：當edittype:'select'時獲取select數據的url，格 式：<select><option value='val1'> Value1 </option><option value='val2'> Value2 </option>…<option value='valn'> ValueN </option></select> |
false |
| gridNames |
gridModel為true時起效，設置查詢列的名稱 |
false |
| filterModel |
gridModel為false時起效，格式：{label:'LableFild', name: 'colname', stype: 'select', defval: 'default_value', surl: 'someurl', sopt:{optins for the select}}。label：字段顯示名稱；name：列名；stype：輸入框類型，text或者select；surl：獲取select數據的地 址，要求的內容為html格式：<select><option value='val1'> Value1 </option><option value='val2'> Value2 </option>…<option value='valn'> ValueN </option></select>；sopt：同editoptions |
[] |
| formtype |
定義表單如何被構造，'horizontal' or 'vertical' |
|
| autosearch |
如果為true:當點擊回車鍵觸發查詢；當select值變化時觸發查詢 |
|
| formclass |
可以使用的css |
filterform |
| tableclass |
可以使用到table上的css |
filtertable |
| buttonclass |
按鈕上使用的css |
filterbutton |
| searchButton |
搜索按鈕 |
Search |
| clearButton |
清空數據的按鈕 |
Clear |
| enableSearch |
啟用禁用搜索按鈕 |
false |
| enableClear |
啟用禁用清空按鈕 |
false |
| beforeSearch |
搜索之前觸發的事件 |
null |
| afterSearch |
搜索完成之后觸發的事件 |
null |
| beforeClear |
清空數據之前觸發的事件 |
null |
| afterClear |
清空數據之后觸發事件 |
null |
| url |
搜索數據的url |
‘’ |
| marksearched |
當為true時，每次查詢之后所有查詢的列都標記為可查詢列 |
true |