jqgrid--分页

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",

...

});

 

 

 

 

导航栏的属性：

 

属性名	类型	说明	默认值	是否可以被修改
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的翻页导航是一个方法，你可以事先定义一些其他操作，比如：编辑、新增、删除及搜索。也可以增加自定义的函数。导航工具栏是定义到翻页控件上的。定义如下：

 

 

   <table id="list"></table>   

   <div id="gridpager"></div>   

 

 

写道

jQuery("#grid_id").jqGrid({

...

pager : '#gridpager',

...

});

jQuery("#grid_id").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*/

);