jqgrid学习(5) 翻页、增、删、改的一些方法和参数

jqGrid的翻页导航是一个方法,你可以事先定义一些其他操作,比如:编辑、新增、删除及搜索。也可以增加自定义的函数。导航工具栏是定义到翻页控件上的。定义如下:
Java代码 复制代码
  1. ...   
  2. <body>   
  3. ...   
  4.    <table id="list"></table>    
  5.    <div id="gridpager"></div>    
  6. ...   
  7. </body>  
...
<body>
...
   <table id="list"></table> 
   <div id="gridpager"></div> 
...
</body>

JS的用法:
Java代码 复制代码
  1. <script>   
  2. ...   
  3. jQuery("#grid_id").jqGrid({   
  4. ...   
  5.    pager : '#gridpager',   
  6. ...   
  7. });   
  8. jQuery("#grid_id").navGrid('#gridpager',{parameters},prmEdit, prmAdd, prmDel, prmSearch, prmView);   
  9. ...   
  10. </script>  
<script>
...
jQuery("#grid_id").jqGrid({
...
   pager : '#gridpager',
...
});
jQuery("#grid_id").navGrid('#gridpager',{parameters},prmEdit, prmAdd, prmDel, prmSearch, prmView);
...
</script>

如果使用新API:
Java代码 复制代码
  1. <script>   
  2. ...   
  3. jQuery("#grid_id").jqGrid({   
  4. ...   
  5.    pager : '#gridpager',   
  6. ...   
  7. });   
  8. jQuery("#grid_id").jqGrid('navGrid','#gridpager',{parameters},prmEdit, prmAdd, prmDel, prmSearch, prmView);   
  9. ...   
  10. </script>  
<script>
...
jQuery("#grid_id").jqGrid({
...
   pager : '#gridpager',
...
});
jQuery("#grid_id").jqGrid('navGrid','#gridpager',{parameters},prmEdit, prmAdd, prmDel, prmSearch, prmView);
...
</script>

或者:
Java代码 复制代码
  1. <script>   
  2. ...   
  3. jQuery("#grid_id").jqGrid({   
  4. ...   
  5.    pager : '#gridpager',   
  6. ...   
  7. }).navGrid('#gridpager',{parameters}, prmEdit, prmAdd, prmDel, prmSearch, prmView);   
  8. ...   
  9. </script>  
<script>
...
jQuery("#grid_id").jqGrid({
...
   pager : '#gridpager',
...
}).navGrid('#gridpager',{parameters}, prmEdit, prmAdd, prmDel, prmSearch, prmView);
...
</script>

grid_id :表格id
gridpager :导航栏id
parameters :参数列表
prmEdit, prmAdd, prmDel, prmSearch, prmView :事件
参数使用:
Java代码 复制代码
  1. $.jgrid = {   
  2. ...   
  3.    search : {   
  4.      caption: "Search...",   
  5.      Find: "Find",   
  6.      Reset: "Reset",   
  7.      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'],   
  8.      groupOps: [ { op: "AND", text: "all" }, { op: "OR", text: "any" } ],   
  9.      matchText: " match",   
  10.      rulesText: " rules"  
  11.    },   
  12.    edit : {   
  13.      addCaption: "Add Record",   
  14.      editCaption: "Edit Record",   
  15.      bSubmit: "Submit",   
  16.      bCancel: "Cancel",   
  17.      bClose: "Close",   
  18.      saveData: "Data has been changed! Save changes?",   
  19.      bYes : "Yes",   
  20.      bNo : "No",   
  21.      bExit : "Cancel",   
  22.   },   
  23.   view : {   
  24.     caption: "View Record",   
  25.     bClose: "Close"  
  26.   },   
  27.   del : {   
  28.     caption: "Delete",   
  29.     msg: "Delete selected record(s)?",   
  30.     bSubmit: "Delete",   
  31.     bCancel: "Cancel"  
  32.   },   
  33.   nav : {   
  34.     edittext: "",   
  35.     edittitle: "Edit selected row",   
  36.     addtext:"",   
  37.     addtitle: "Add new row",   
  38.     deltext: "",   
  39.     deltitle: "Delete selected row",   
  40.     searchtext: "",   
  41.     searchtitle: "Find records",   
  42.     refreshtext: "",   
  43.     refreshtitle: "Reload Grid",   
  44.     alertcap: "Warning",   
  45.     alerttext: "Please, select row",   
  46.     viewtext: "",   
  47.     viewtitle: "View selected row"  
  48.   },   
  49. ...  
$.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"
  },
...

详细参数说明
属性类型说明默认值
addboolean是否启用新增功能,当点击按钮时会触发editGridRow事件true
addiconstring给新增功能设置图标,只有UI theme里的图标才可以使用ui-icon-plus
addtextstring新增按钮上的文字
addtitlestring当鼠标移到新增按钮上时显示的提示新增一行
alertcapstring当我们edit,delete or view一行记录时出现的提示信息警告
alerttextstring当edit,delete or view一行记录时的文本提示请选择一行记录
closeOnEscapeboolean是否可以使用esc键关闭对话框true
delboolean是否启用删除功能,启用时会触发事件delGridRow true
deliconstring设置删除按钮的图标,只有UI theme里的图标才可以使用ui-icon-trash
deltextstring设置到删除按钮上的文字信息
deltitlestring当鼠标移到删除按钮上时出现的提示删除锁选择的行
editboolean是否启用可编辑功能,当编辑时会触发事件editGridRow true
editiconstring设置编辑按钮的图标,只有UI theme里的图标才可以使用ui-icon-pencil
edittextstring编辑按钮上文字
edittitlestring当鼠标移到编辑按钮上出现的提示信息编辑所选择的行
positionstring定义按钮位置,可选值left, center and right. left
refreshboolean是否启用刷新按钮,当点击刷新按钮时会触发trigger(“reloadGrid”)事件,而且会清空搜索条件值true
refreshiconstring设置刷新图标,只有UI theme里的图标才可以使用ui-icon-refresh
refreshtextstring刷新按钮上文字信息
refreshtitlestring当鼠标移到刷新按钮上的提示信息重新加载
refreshstatestring指明表格如何刷新。firstpage:从第一页开始刷新;current:只刷新当前页内容firstpage
afterRefreshfunction当点击刷新按钮之后触发此事件null
searchboolean是否启用搜索按钮,会触发searchGrid 事件true
searchhiconstring设置搜索按钮的图标,只有UI theme里的图标才可以使用ui-icon-search
searchtextstring搜索按钮上的文字
searchtitlestring当鼠标移到搜索按钮上的提示信息搜索
viewboolean是否启用查看按钮,会触发事件viewGridRow false
viewiconstring设置查看按钮的图标,只有UI theme里的图标才可以使用ui-icon-document
viewtextstring查看按钮上文字
viewtitlestring当鼠标移到查看按钮上的提示信息查看所选记录


实例:
Java代码 复制代码
  1. <script>   
  2. ...   
  3. jQuery("#grid_id").jqGrid({   
  4. ...   
  5.    pager : '#gridpager',   
  6. ...   
  7. }).navGrid('#gridpager',{view:true, del:false},    
  8. {}, // use default settings for edit   
  9. {}, // use default settings for add   
  10. {},  // delete instead that del:false we need this   
  11. {multipleSearch : true}, // enable the advanced searching   
  12. {closeOnEscape:true/* allow the view dialog to be closed when user press ESC key*/  
  13. );   
  14. ...   
  15. </script>  
jqGrid的翻页要定义在html里,通常是在grid的下面,且是一个div对象:
Java代码 复制代码
  1. <body>   
  2. ...   
  3.    <table id="list"></table>    
  4.    <div id="gridpager"></div>    
  5. ...   
  6. </body>  
<body>
...
   <table id="list"></table> 
   <div id="gridpager"></div> 
...
</body>

js代码:
Java代码 复制代码
  1. jQuery("#grid_id").jqGrid({   
  2. ...   
  3.    pager : '#gridpager',   
  4. ...   
  5. });  
jQuery("#grid_id").jqGrid({
...
   pager : '#gridpager',
...
});

不必给翻页设置任何的css属性。在jqGrid里定义的翻页可以是::pager : '#gridpager', pager : 'gridpager' or pager : jQuery('#gridpager'). 推荐使用前两个,当使用其他方式时jqGrid的导入导出功能时会引起错误。

导航栏的属性:
Java代码 复制代码
  1. $.jgrid = {   
  2.     defaults : {   
  3.         recordtext: "View {0} - {1} of {2}",   
  4.             emptyrecords: "No records to view",   
  5.         loadtext: "Loading...",   
  6.         pgtext : "Page {0} of {1}"  
  7.     },   
  8. ...   
  9. }  
$.jgrid = {
	defaults : {
		recordtext: "View {0} - {1} of {2}",
	        emptyrecords: "No records to view",
		loadtext: "Loading...",
		pgtext : "Page {0} of {1}"
	},
...
}


如果想改变这些设置:
1、方法一:
Java代码 复制代码
  1. jQuery.extend(jQuery.jgrid.defaults,{emptyrecords: "Nothing to display",...});  
jQuery.extend(jQuery.jgrid.defaults,{emptyrecords: "Nothing to display",...});

2、方法二:
Java代码 复制代码
  1. jQuery("#grid_id").jqGrid({   
  2. ...   
  3.    pager : '#gridpager',   
  4.    emptyrecords: "Nothing to display",   
  5. ...   
  6. });  
jQuery("#grid_id").jqGrid({
...
   pager : '#gridpager',
   emptyrecords: "Nothing to display",
...
});


导航栏的属性
属性名类型说明默认值是否可以被修改
lastpageinteger只读属性,总页数0NO
pagermixed导航栏对象,必须是一个有效的html元素,位置可以随意空字符串NO
pagerposstring定义导航栏的位置,默认分为三部分:翻页,导航工具及记录信息centerNO
pgbuttonsboolean是否显示翻页按钮trueNO
pginputboolean是否显示跳转页面的输入框trueNO
pgtextstring页面信息,第一个值是当前页第二个值是总页数语言包YES
reccountinteger只读属性,实际记录数,千万不能跟records 参数搞混了,通常情况下他们是相同的,假如我们定义rowNum=15,但我们从服务器端返回的记录为20即records=20,而reccount=15,表格中也显示15条记录。0NO
recordposstring定义记录信息的位置,可选值:left, center, rightrightNO
recordsinteger只读属性,从服务器端返回的记录数noneNO
recordtextstring显示记录的信息,只有当viewrecords为true时起效,且记录数必须大于0语言包yes
rowListarray[]可以改变表格可以显示的记录数,格式为[10,20,30]空array[]no
rowNuminteger设置表格可以显示的记录数20yes
viewrecordsboolean是否要显示总记录数信息falseno

所有这些参数都是可以修改的,比如:
Java代码 复制代码
  1. <script>   
  2. ...   
  3. jQuery("#grid_id").setGridParam({rowNum:10}).trigger("reloadGrid");   
  4. ...   
  5. </script>  
<script>
...
jQuery("#grid_id").setGridParam({rowNum:10}).trigger("reloadGrid");
...
</script>

跟翻页相关的事件只有一个:onPaging
事件名参数说明
onPagingpgButton当点击翻页按钮但还为展现数据时触发此事件,当然这跳转栏输入页码改变页时也同样触发此事件。参数pgButton可选值: first,last,prev,next

转载于:https://www.cnblogs.com/Employee/archive/2010/05/26/1744548.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值