jqgrid学习(四)事件翻页编辑

最新推荐文章于 2020-12-11 16:03:04 发布

magic_dreamer

最新推荐文章于 2020-12-11 16:03:04 发布

阅读量590

点赞数

CC 4.0 BY-SA版权

分类专栏： UI 文章标签： jQuery PHP velocity 项目管理 ViewUI

本文链接：https://blog.youkuaiyun.com/magic_dreamer/article/details/83526806

UI 专栏收录该内容

122 篇文章

订阅专栏

本文详细介绍了 jqGrid 的使用方法，包括事件管理、翻页配置、按钮设置及数据编辑等功能。通过实例展示了如何进行行选择事件处理、自定义翻页显示、导航按钮设置等操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jqgrid学习(四)事件翻页编辑

1.事件管理
有很多事件可以添加到jqgrid上，具体参考官方文档
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:events
我的JS示例：
//选中某一个row
onSelectRow: function(id){
alert(id);
}

2.翻页问题pager
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:pager
和翻页相关的事件
onPaging: function(pgButton){
alert(pgButton);
},
全局属性
jQuery.extend(jQuery.jgrid.defaults,{emptyrecords: "No data to display",loadtext:"Playing..."});
和翻页相关的属性
recordtext: "View {0} - {1} of {2}",
//emptyrecords: "No records to view",
//loadtext: "Loading...",
pgtext : "Page {0} of {1}",
rowNum : 2,
pgbuttons : true,
rowList : [2,4,8],
pager : '#pager',
sortname : 'id',
viewrecords : true,
sortorder : "desc",

3.按钮navigator
按钮说明文档：
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:navigator
都采用默认设置，设置如下：
jQuery("#list").jqGrid('navGrid','#pager');

4.编辑edit
总体介绍
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules
具体的form edit模式
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing

jQuery("#list").jqGrid('navGrid','#pager',
{
edittext: "",
edittitle: "Edit selected data",
addtext:"",
addtitle: "Add new data",
deltext: "",
deltitle: "Delete selected data",
searchtext: "",
searchtitle: "Find datas",
refreshtext: "",
refreshtitle: "Reload Grid data",
alertcap: "Warning",
alerttext: "Please, select data",
viewtext: "",
viewtitle: "View selected data"
},
{
addCaption: "Add data",
editCaption: "Edit data",
bSubmit: "Submit",
bCancel: "Cancel",
bClose: "Close",
saveData: "Data has been changed! Save changes?",
bYes : "Yes",
bNo : "No",
bExit : "Cancel",
},
{
addCaption: "Add data",
editCaption: "Edit data",
bSubmit: "Submit",
bCancel: "Cancel",
bClose: "Close",
saveData: "Data has been changed! Save changes?",
bYes : "Yes",
bNo : "No",
bExit : "Cancel",
},
{
caption: "Delete",
msg: "Delete selected record(s)?",
bSubmit: "Delete",
bCancel: "Cancel"
},
{
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"
},
{
caption: "View Record",
bClose: "Close"
}
);

基本上静态页面的学习到这里结束，准备开始在velocity中使用，前后台结合，在tasksupervisor项目中测试一下。