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

最新推荐文章于 2022-03-26 11:45:39 发布
最新推荐文章于 2022-03-26 11:45:39 发布
阅读量98 收藏
点赞数
文章标签： java javascript ui ViewUI
原文链接：http://www.cnblogs.com/Employee/archive/2010/05/26/1744548.html
版权
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

weixin_30407099
关注
jqGrid(版本:5.1.0)
11-08
很好的第三方控件，就是开始不太好上手，希望大神多出些完整的实力和文档。官方网址：http://www.trirand.com。
jqgrid 表格的增删改查以及modal弹出框
03-07
这个插件支持多种功能，包括但不限于数据的增删改查、分页、排序、过滤和自定义格式化。在这个项目文件“RuanTai.Finance”中，我们将深入探讨如何使用 jqGrid 实现这些功能，并且在修改和添加操作时使用 modal 弹出...
jqGrid 翻页
07-16 427
jqGrid的翻页要定义在html里，通常是在grid的下面，且是一个div对象： ·<tableid="list"></table> ·<divid="gridpager"></div> ·jQuery("#grid_id").jqGrid({ ·... ·pager:'#gridpa...
Servlet+Jqgrid实现翻页
alex_fung的博客
04-08 445
一、下载Jqgird相关依赖    下载地址：http://blog.mn886.net/jqGrid/&lt;script src="assets/js/jquery/jquery-1.7.1.js"&gt;&lt;/script&gt; &lt;script src="assets/js/jqgrid/jquery.jqGrid.min.js"&gt;&lt;/script&gt; &lt;s
PHP+jqGrid表格插件实现增删改查
12-21
总的来说，“PHP+jqGrid表格插件实现增删改查”是一种高效的方法，结合了PHP的强大后端处理能力和jqGrid的前端展示优势，为Web应用提供了流畅的数据操作体验。在实际项目中，开发者可以根据具体需求进一步定制和优化...
jqGrid与java简单的增删改查
11-09
对于增删改查操作，你可以在jqGrid中配置相应的事件，如`editGridRow`、`addGridRow`和`delGridRow`，然后在Servlet中执行对应的SQL语句。例如，删除操作可以通过以下方式实现： ```javascript $("#grid").jqGrid('...
ASP.NET MVC JQGRID 增删改查 实例
03-01
要实现JQGrid的增删改查功能，我们需要在控制器中添加对应的操作，并在JavaScript中配置相应的参数。例如，添加新的员工可以通过POST请求发送数据到服务器，删除员工则需要一个DELETE请求，更新员工信息则使用PUT...
asp.net MVC5 + Bootstrap 增删改查分页(最新)
12-02
asp.net MVC5 + Bootstrap 增删改查分页(重点是里面的table及分页用法)。另外说一下项目用到了bootstrap-table,bootstrap-dialog,bootstrap-daterangepicker组件，很不错的几个组件
jqGrid-5.1.0
01-18
jqGrid-5.1.0 包，破解版。
jqGrid_JS_5.2.1
09-01
实现可编辑表格功能，全面兼容各种浏览器，与jquery完善结合，排序、宽度拖动、锁定列、翻页等很多功能，可form编辑，行编辑，单元格编辑，强大查询支持，与后台完美结合，加载速度快，json支持等等
jqgriddemo5.2.0
12-07
jquery3.1.1+jqgriddemo5.2.0最新版本的表格控件。带隐藏列与自定义按钮事件这分花的绝对值，本人其他资源也是好资源哟
jqGrid_5.3.1
08-27
JQGrid是一个在jquery基础上做的一个表格控件，以ajax的方式和服务器端通信。
jqGrid5.3.1(grid，treegrid) 2018官方最新版本
08-24
jqGrid5.3.1(grid，treegrid) 2018官方最新版本 功能非常强大，请灵活运用
JqGrid做翻页三
weixin_33971977的博客
12-20 164
为什么80%的码农都做不了架构师？>>> ...
JqGrid 5.5 使用
u012216568的博客
03-26 98
jqGrid的使用_spring_ev的博客-CSDN博客https://blog.csdn.net/spring_ev/article/details/99702472参考连接
jqGrid 5.x colModel 详解
xihuannioyj的专栏http://write.blog.csdn.net/configure
06-07 2638
jqGrid 5.1 colModel Property Type Description Default align string Defines the alignment of the cell in the Body layer, not in header cell. Possible values: left
jqGrid5.X 官方全Demo下载
06-07
jqgrid 中文文档离线demo打包. 下载 本地可架设运行
jqgrid详细教程：增删查改与toolbar操作
本资源主要涉及使用jqGrid与artDialog实现CRUD操作，以及在页面上进行数据展示和交互，但并不将数据保存到数据库。jqGrid是一个强大的JavaScript表格插件，而artDialog则是一个轻量级的弹出对话框组件。 ### jqGrid...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值