`
a3mao
  • 浏览: 559454 次
  • 性别: 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学习 -------------- 翻页
评论
发表评论

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

相关推荐

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