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}"
· },
· ...
· }
如果想改变这些设置：
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 | | |
翻页导航可以事先定义一些其他操作，比如：编辑、新增、删除及搜索。
也可以增加自定义的函数。导航工具栏是定义到翻页控件上的。定义如下：
· <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},
· {}, // 编辑默认设置
· {}, // 添加默认设置
· {}, // delete instead that del:false we need this
· {multipleSearch : true}, // 启用高级搜索
· {closeOnEscape:true} /* allow the view dialog to be closed when user press ESC key*/
· );
Jqgrid学习 -------自定义按钮
jQuery("#grid_id").navGrid("#pager",...).navButtonAdd("#pager",{parameters});
jQuery("#grid_id").jqGrid('navGrid',"#pager",...).jqGrid('navButtonAdd',"#pager",{parameters});
{ caption:"NewButton", buttonicon:"ui-icon-newwin", onClickButton:null, position: "last", title:"", cursor: "pointer"}
caption：按钮名称，可以为空，string类型 buttonicon：按钮的图标，string类型，必须为UI theme图标 onClickButton：按钮事件，function类型，默认null position：first或者last，按钮位置 title：string类型，按钮的提示信息 cursor：string类型，光标类型，默认为pointer id：string类型，按钮id
如果设置多个按钮：
· jQuery("#grid_id")
· .navGrid('#pager',{edit:false,add:false,del:false,search:false})
· .navButtonAdd('#pager',{
· caption:"Add",
· buttonicon:"ui-icon-add",
· onClickButton: function(){
· alert("Adding Row");
· },
· position:"last"
· })
· .navButtonAdd('#pager',{
· caption:"Del",
· buttonicon:"ui-icon-del",
· onClickButton: function(){
· alert("Deleting Row");
· },
· position:"last"
· });
按钮间的分隔
jQuery("#grid_id").navGrid("#pager",...).navButtonAdd("#pager",{parameters}).navSeparatorAdd("#pager",{separator_parameters}};
默认参数：
{sepclass : “ui-separator”,sepcontent: ''}
sepclass：ui-jqgrid的属性名 sepcontent：分隔符的内容.
扫一扫
436
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
