`
什么向往
  • 浏览: 80003 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

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

);

 

 

 

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics