07jqGrid - 翻页

简介: 07jqGrid - 翻页

jqGrid的翻页要定义在html里,通常是在grid的下面,且是一个div对象:

<table id="list"></table>   
   <div id="gridpager"></div>
jQuery("#grid_id").jqGrid({  
...  
   pager : '#gridpager',  
...  
});

不必给翻页设置任何的css属性。在jqGrid里定义的翻页可以是::pager : ‘#gridpager’, pager : ‘gridpager’ or pager : jQuery(’#gridpager’). 推荐使用前两个,当使用其他方式时jqGrid的导入导出功能时会引起错误。

导航栏的属性:

$.jgrid = {  
    defaults : {  
        recordtext: "View {0} - {1} of {2}",  
        emptyrecords: "No records to view",  
        loadtext: "Loading...",  
        pgtext : "Page {0} of {1}"  
    },  
...  
}

如果想改变这些设置:

jQuery.extend(jQuery.jgrid.defaults,{emptyrecords: "Nothing to display",...});
jQuery("#grid_id").jqGrid({  
    ...  
    pager : '#gridpager',  
    emptyrecords: "Nothing to display",  
    ...  
  });

导航栏的属性:

jQuery("#grid_id").setGridParam({rowNum:10}).trigger(“reloadGrid”);

跟翻页相关的事件只有一个:onPaging

image.png

jqGrid的翻页导航是一个方法,你可以事先定义一些其他操作,比如:编辑、新增、删除及搜索。也可以增加自定义的函数。导航工具栏是定义到翻页控件上的。定义如下:

<body>  
...  
   <table id="list"></table>   
   <div id="gridpager"></div>   
...  
</body>
jQuery("#grid_id").jqGrid({  
...  
   pager : '#gridpager',  
...  
});  
jQuery("#grid_id").navGrid('#gridpager',{parameters},prmEdit, prmAdd, prmDel, prmSearch, prmView);  
jQuery("#grid_id").jqGrid({  
...  
   pager : '#gridpager',  
...  
});  
jQuery("#grid_id").jqGrid('navGrid','#gridpager',{parameters},prmEdit, prmAdd, prmDel, prmSearch, prmView);  
jQuery("#grid_id").jqGrid({  
...  
   pager : '#gridpager',  
...  
}).navGrid('#gridpager',{parameters}, prmEdit, prmAdd, prmDel, prmSearch, prmView);  
...

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"  
  },  
......

属性解析

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*/  
);
目录
相关文章
|
12月前
|
JSON JavaScript 前端开发
77jqGrid - 带有汇总页脚的分组
77jqGrid - 带有汇总页脚的分组
33 0
|
12月前
08jqGrid - 自定义按钮
08jqGrid - 自定义按钮
47 0
|
12月前
|
JavaScript 前端开发 Java
23jqGrid - 列宽
23jqGrid - 列宽
47 0
element-ui Pagination分页只保留上一页下一页
有时数据量太大,比如日志数据没必要查看很久之前的,所以把页数屏蔽,不给系统造成卡顿,最简单的方式就是隐藏总条数、页数。具体做法来看一下吧
328 0
|
3月前
Element UI 表格翻页全选
Element UI 表格翻页全选
17 0
|
12月前
|
JavaScript 前端开发 Java
58jqGrid - 数据合并单元格
58jqGrid - 数据合并单元格
117 0
|
12月前
|
JavaScript 前端开发 Java
57jqGrid - 数据合并单元格
57jqGrid - 数据合并单元格
40 0
|
12月前
|
JavaScript 前端开发
50jqGrid 分组 - 汇总页脚
50jqGrid 分组 - 汇总页脚
52 0
|
12月前
|
JavaScript 前端开发 Java
54jqGrid 分组 - 折叠汇总行
54jqGrid 分组 - 折叠汇总行
48 0
|
12月前
|
安全 JavaScript 前端开发
30jqGrid 行编辑- 基本实例
30jqGrid 行编辑- 基本实例
45 0