MyException - 我的异常网
当前位置:我的异常网» Web前端 » jqgrid-分页

jqgrid-分页

www.MyException.Cn  网友分享于:2015-08-26  浏览:0次
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*/

);

 

 

 

 

文章评论

“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
程序员和编码员之间的区别
程序员和编码员之间的区别
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
10个调试和排错的小建议
10个调试和排错的小建议
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
Java程序员必看电影
Java程序员必看电影
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
漫画:程序员的工作
漫画:程序员的工作
每天工作4小时的程序员
每天工作4小时的程序员
我的丈夫是个程序员
我的丈夫是个程序员
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
代码女神横空出世
代码女神横空出世
程序员的鄙视链
程序员的鄙视链
 程序员的样子
程序员的样子
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
为什么程序员都是夜猫子
为什么程序员都是夜猫子
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
鲜为人知的编程真相
鲜为人知的编程真相
程序员都该阅读的书
程序员都该阅读的书
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
老程序员的下场
老程序员的下场
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
一个程序员的时间管理
一个程序员的时间管理
编程语言是女人
编程语言是女人
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
总结2014中国互联网十大段子
总结2014中国互联网十大段子
中美印日四国程序员比较
中美印日四国程序员比较
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
我是如何打败拖延症的
我是如何打败拖延症的
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
程序员应该关注的一些事儿
程序员应该关注的一些事儿
旅行,写作,编程
旅行,写作,编程
那些争议最大的编程观点
那些争议最大的编程观点
程序员必看的十大电影
程序员必看的十大电影
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有