首页 > 代码库 > jqGrid 翻页

jqGrid 翻页

2024-07-12 08:07:29   224人阅读

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*/  

· );


联系
我们