时刻都做最好的自己，不悲观、不怯懦、不气馁、不懈怠，不抛弃也不放弃~

熟悉GIS(ArcGIS全,国内外在线地图)应用开发,C# Winform,Asp.Net,Web前端,视频图像处理,delphi,VB等技术；熟悉国土,安防,智能交通等专业领域

记录个人编程经验点滴，欢迎交流指正。转载内容如有侵权请及时联系

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.问题研究

JQGrid导出Excel文件

自定义按钮

自定义格式化

搜索工具栏

自定义 搜索

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}"  
如果想改变这些设置：
 jQuery.extend(jQuery.jgrid.defaults,{emptyrecords: "Nothing to display",...});
jQuery("#grid_id").jqGrid({  
              pager : '#gridpager',  
              emptyrecords: "Nothing to display",  
导航栏的属性：
只读属性，实际记录数，千万不能跟records 参数搞混了，通常情况下他们是相同的，假如我们定义rowNum=15，但我们从服务器端返回的记录为20即records=20，而reccount=15，表格中也显示15条记录
 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"  
 {},  // 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 设置
       {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：参数
当为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
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 
搜索工具栏