`
sillycat
  • 浏览: 2543273 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

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

    博客分类:
  • UI
阅读更多
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项目中测试一下。


0
0
分享到:
评论

相关推荐

    jqGrid 3.5源码+DEMO+DOC

    - 分页:jqGrid可以轻松实现数据分页,用户可以设定每页显示的数据数量,同时提供向前、向后翻页的功能。 - 排序:用户可以点击列头进行数据排序,支持升序和降序。 - 搜索/过滤:提供高级搜索功能,用户可以基于...

    jqgriddemo5.2.0

    **jqGrid介绍** jqGrid是一款基于jQuery的开源数据网格组件,它允许用户在网页上展示大量数据,并提供了...通过下载和研究这个压缩包,开发者可以深入学习和掌握jqGrid的使用方法,提升项目中的数据呈现和交互能力。

    jqGrid_api中文文档.doc

    同时,文档还涵盖了如何处理数据加载、编辑、保存和验证的事件,以及如何使用 jqGrid 的API进行操作。 总的来说,jqGrid 是一个功能丰富的 jQuery 表格插件,通过灵活的配置和强大的功能,可以满足各种数据展示和...

    Jquery Jgrid使用手册

    四、jqGrid学习——ColModel API ColModel是JqGrid的核心配置之一,它定义了列的属性,包括宽度、对齐方式、可编辑性、搜索功能等。例如: ```javascript colModel: [ {name: 'id', index: 'id', width: 55, ...

    jqGrid3.6中文文档

    在B/S架构下,jqGrid 的作用是将服务器端的数据以表格的形式展示在客户端,并允许用户进行各种操作,如编辑、筛选和翻页。通过 AJAX 技术,jqGrid 实现了客户端与服务器之间的异步通信,即无需刷新整个页面就能更新...

    jqGrid 中文 英文 文档

    8. **事件处理**: jqGrid提供了丰富的事件回调,如loadComplete、beforeSelectRow等,便于在特定时刻插入自定义逻辑。 9. **主题与样式**: jqGrid允许自定义样式,可以与各种前端框架(如Bootstrap)集成,以适应...

    jqGrid3.6中文手冊(繁體)

    这个3.6版本的手册主要涵盖了jqGrid的各种使用方法和配置选项,包括原理、皮肤设置、搜索功能、数据格式化、自定义按钮、分页、JSON数据配置以及事件处理等。 首先,让我们深入了解jqGrid的基本原理。jqGrid遵循B/S...

    jqGrid 3.4.2 源码,文档及例子

    这个压缩包包含了jqGrid的演示示例,是学习jqGrid功能和用法的最佳实践。通过运行这些示例,你可以看到各种功能的实际效果,如分页、排序、搜索、编辑等,帮助你快速掌握jqGrid的使用。 6. **jqGrid-3.4.2.zip**:...

    jqgrid使用说明

    JqGrid的学习包括理解ColModelAPI、参数、事件、数据操作等核心概念。ColModelAPI允许开发者定义列的属性,比如宽度、是否可排序、是否可编辑等。通过学习这些API,开发者可以更好地控制网格的行为和外观。 JqGrid...

    Demo:用于 MVC 演示的 JQGrid

    通过这个演示项目,你可以学习如何设置 JQGrid 的各种选项,如何与 MVC 控制器交互,以及如何处理前端和后端的数据交换。这对于理解 JQGrid 在实际项目中的应用非常有帮助。在实际开发中,可以根据需求调整 JQGrid ...

Global site tag (gtag.js) - Google Analytics