jqGrid的翻页要定义在html里,通常是在grid的下面,且是一个div对象:
<div id="gridpager"></div>
jQuery("#grid_id").jqGrid({
...
pager : '#gridpager',
...
});
不必给翻页设置任何的css属性。在jqGrid里定义的翻页可以是::pager : '#gridpager', pager : 'gridpager' or pager : jQuery('#gridpager'). 推荐使用前两个,当使用其他方式时jqGrid的导入导出功能时会引起错误。
导航栏的属性:
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",...});
...
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>
...
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 |
当鼠标移到查看按钮上的提示信 息 |
查看所选记 录 |
...
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*/
);
相关推荐
jqGrid是基于jQuery的表格插件,提供丰富的功能,如分页、排序、搜索、过滤、编辑、导出等,支持Ajax数据加载,能够处理本地或远程数据源。4.5.2版本是对早期版本的升级,优化了性能,增强了稳定性,并引入了一些新...
《jQuery.jqGrid-4.4.3:Web页面列表分页显示的高效解决方案》 在Web开发领域,数据展示是不可或缺的一部分,特别是在处理大量数据时,如何有效地进行分页显示,提高用户体验,成为了开发者关注的重点。jQuery....
1. **数据加载与分页**:jqGrid 支持服务器端和客户端两种分页方式,可以根据数据量选择合适的方法,有效提高页面性能。 2. **数据筛选**:用户可以通过内置的筛选工具对表格数据进行快速过滤,找到所需信息。 3. ...
jqGrid 是一个强大的JavaScript库,专门用于在Web页面上创建交互式的数据表格。这个"jqGrid-master"压缩包是该库的最新版本,从官方英文站点下载,为用户提供了便捷的获取途径。jqGrid主要用于展示和操作数据,尤其...
jqGrid是基于jQuery库的,它提供了丰富的功能,如数据排序、分页、搜索、编辑以及自定义列等,使开发者能够轻松地实现复杂的数据展示和管理。 首先,jqGrid的核心特性包括: 1. 数据绑定:jqGrid支持多种数据源,...
《jQuery.jqGrid-3.5-beta:一个强大的数据管理框架》 在Web开发领域,高效的数据管理和展示是至关重要的。jQuery.jqGrid是这样一个工具,它为开发者提供了强大而灵活的数据网格解决方案。这个名为"jquery.jqGrid-...
例如,要实现自定义的分页逻辑,开发者可能需要监听jqGrid的"loadComplete"事件,并结合jQuery UI的对话框展示分页信息。另外,对于性能优化,了解如何正确配置jqGrid的缓存策略和异步加载机制至关重要。 总的来说...
jqGrid提供了丰富的数据操作选项,包括排序、分页、搜索、编辑、添加和删除数据等,极大地简化了前端数据管理的工作。它的网格布局灵活,能够适应各种屏幕尺寸,使得数据展示既美观又实用。此外,jqGrid支持多种数据...
jqGrid 的核心功能包括数据展示、编辑、搜索、排序、分页以及自定义操作。它支持多种数据源,如 JSON、XML、CSV 或者直接从数据库中获取,使得在网页上展示大量结构化数据变得非常方便。以下是对压缩包中各个文件的...
- **数据分页**:jqGrid支持服务器端和客户端分页,能够有效地处理大数据量,减轻服务器负担。 - **数据排序**:用户可以点击表头进行数据排序,支持多列排序。 - **高级搜索**:提供复杂的过滤条件,如模糊搜索、...
jqGrid是一款基于jQuery的开源数据网格组件,它允许用户在网页上创建交互式的数据表格,支持数据的增删改查、排序、分页、过滤等多种功能。由于其丰富的功能和高度的定制性,jqGrid在企业级应用中得到了广泛应用。 ...
它可以轻松地将服务器端的数据动态加载到网页上,形成表格形式的展示,支持分页、排序、搜索、过滤等多种操作。通过灵活的配置,开发者可以定制各种数据列,包括文本、数字、日期等,甚至可以自定义复杂的列模板,以...
jqGrid 的插件扩展了其核心功能,提供了如分页、排序、搜索、编辑等附加特性。例如,`grid.locale-cn.js` 是中文语言包,使用户界面支持中文;`subgrid.js` 和 `treegrid.js` 分别用于子网格和树形网格的实现。...
jqGrid提供了丰富的功能,如分页、排序、搜索、过滤、编辑和添加数据等。通过这个文件,你可以学习如何配置表格列、设置数据源、自定义操作按钮、以及利用其内置的API进行各种操作。 `combine.php`可能是一个用于...
在5.1.0版本中,它提供了多种特性,使得Web开发者能够轻松地构建动态的表格,支持数据的检索、排序、筛选、编辑以及分页等功能。这款插件尤其适合需要展示大量结构化数据的应用场景。 jqGrid的国际化支持允许开发者...
这个压缩包“jquery.jqGrid-4.6.0”包含了该库的4.6.0版本,这是一个被广泛使用的稳定版本,提供了强大的数据网格功能,包括数据的检索、排序、过滤、编辑和分页。 首先,让我们详细了解jqGrid的核心组件: 1. **...
jqGrid 是一个基于 jQuery 的开源网格插件,用于在网页上展示和操作表格数据。它提供了丰富的功能,如数据分页、排序、过滤、编辑、添加、删除等,使得开发者可以方便地创建交互性强的数据展示界面。这个"jqGrid-3.2...
2. **分页功能**:jqGrid中的分页是通过"jqGrid"的"pager"参数实现的。你可以设置每页显示的行数(rows),以及分页栏的样式和行为。标签“jq分页”正是指的这一特性,它使得大量数据的展示变得高效且易于管理。 3....