`
a3mao
  • 浏览: 563446 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jqGrid学习 -------------- 翻页（2）

    博客分类：
  • Work
jQueryUI 
阅读更多
jqGrid的翻页导航是一个方法，你可以事先定义一些其他操作，比如：编辑、新增、删除及搜索。也可以增加自定义的函数。导航工具栏是定义到翻页控件上的。定义如下： 
...
<body>
...
   <table id="list"></table> 
   <div id="gridpager"></div> 
...
</body>

JS的用法： 
<script>
...
jQuery("#grid_id").jqGrid({
...
   pager : '#gridpager',
...
});
jQuery("#grid_id").navGrid('#gridpager',{parameters},prmEdit, prmAdd, prmDel, prmSearch, prmView);
...
</script>

如果使用新API： 
<script>
...
jQuery("#grid_id").jqGrid({
...
   pager : '#gridpager',
...
});
jQuery("#grid_id").jqGrid('navGrid','#gridpager',{parameters},prmEdit, prmAdd, prmDel, prmSearch, prmView);
...
</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 ：事件
参数使用： 
$.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当鼠标移到查看按钮上的提示信息查看所选记录


实例： 
<script>
...
jQuery("#grid_id").jqGrid({
...
   pager : '#gridpager',
...
}).navGrid('#gridpager',{view:true, del:false}, 
{}, // use default settings for edit
{}, // use default settings for add
{},  // delete instead that del:false we need this
{multipleSearch : true}, // enable the advanced searching
{closeOnEscape:true} /* allow the view dialog to be closed when user press ESC key*/
);
...
</script>
分享到：
| jqGrid学习 -------------- 翻页
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jqGrid 3.5源码+DEMO+DOC

    2. **jqGrid的核心特性** - 分页：jqGrid可以轻松实现数据分页，用户可以设定每页显示的数据数量，同时提供向前、向后翻页的功能。 - 排序：用户可以点击列头进行数据排序，支持升序和降序。 - 搜索/过滤：提供...

    jqgriddemo5.2.0

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

    jqgrid使用说明

    JqGrid是一种基于JavaScript的网格插件，可用于创建数据表格，它支持JSON数据格式，...总之，JqGrid的学习是深入理解其各种功能和参数配置，以及如何通过AJAX与其他系统组件互动，构建出功能强大且用户友好的网格界面。

    jqGrid 3.4.2 源码，文档及例子

    2. **jqGrid的核心功能**： - 数据加载：jqGrid能够从服务器动态加载数据，支持JSON、XML、CSV等多种数据格式。 - 分页：内置分页功能，可以设置每页显示的数据数量，并提供向前向后翻页按钮。 - 排序：用户可以...

    jqGrid_api中文文档.doc

    在翻页方面，jqGrid 提供了分页控件，用户可以选择显示多少行数据，并可以方便地浏览前后页。同时，文档还涵盖了如何处理数据加载、编辑、保存和验证的事件，以及如何使用 jqGrid 的API进行操作。 总的来说，jqGrid...

    Jquery Jgrid使用手册

    九、jqGrid学习——翻页 JqGrid支持分页功能，通过`pager`参数设置分页控件，`rowList`定义每页显示的行数选项，`pgbuttons`和`pginput`控制分页按钮和输入框的显示。 十、jqGrid学习——自定义按钮 开发者可以通过...

    jqGrid3.6中文文档

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

    jqGrid 中文 英文 文档

    通过jqGrid中文和英文文档的学习，开发者可以充分利用jqGrid的强大功能，创建出高效、美观且用户友好的数据展示和管理界面。无论是新手还是有经验的开发者，都能从中受益，提升项目开发的效率和质量。

    Demo:用于 MVC 演示的 JQGrid

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

    jqGrid3.6中文手冊(繁體)

    在jqGrid的学习中，皮肤的设定是提升表格视觉效果的重要部分。从3.5版本开始，jqGrid支持多种皮肤，允许开发者根据项目需求定制表格的外观。由于jQuery UI的字体大小可能与jqGrid默认的字体大小不匹配，因此需要在...

    jquery网页表格插件pqgrid-2.4.1.zip

    这一功能对于处理大量数据时尤为有用，用户无需手动翻页查找，只需点击列头即可实现数据的即时排序，提高了数据浏览的效率。 其次，列拖动是PQGrid的一个亮点，它允许用户根据需要调整列的位置，增强了交互性。用户...

    jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容

    当数据重新加载并且有数据时，我们通过显示分页导航条来恢复其正常状态，提供用户翻页查看数据的功能。 另外，还有一种更简洁的实现方式，就是在`onLoadSuccess`事件中直接操作表格的DOM结构，例如： ```...

Magicbox
Global site tag (gtag.js) - Google Analytics