jqgrid学习（5）翻页、增、删、改的一些方法和参数

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

Java代码

...
<body>
...
<table id="list"></table>
<div id="gridpager"></div>
...
</body>

...
<body>
...
   <table id="list"></table> 
   <div id="gridpager"></div> 
...
</body>

JS的用法：

Java代码

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

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

如果使用新API：

Java代码

<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',
...
});
jQuery("#grid_id").jqGrid('navGrid','#gridpager',{parameters},prmEdit, prmAdd, prmDel, prmSearch, prmView);
...
</script>

或者：

Java代码

<script>
...
jQuery("#grid_id").jqGrid({
...
pager : '#gridpager',
...
}).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 ：事件
参数使用：

Java代码

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

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

详细参数说明

属性	类型	说明	默认值
add	boolean	是否启用新增功能，当点击按钮时会触发editGridRow事件	true
addicon	string	给新增功能设置图标，只有UI theme里的图标才可以使用	ui-icon-plus
addtext	string	新增按钮上的文字	空
addtitle	string	当鼠标移到新增按钮上时显示的提示	新增一行
alertcap	string	当我们edit,delete or view一行记录时出现的提示信息	警告
alerttext	string	当edit,delete or view一行记录时的文本提示	请选择一行记录
closeOnEscape	boolean	是否可以使用esc键关闭对话框	true
del	boolean	是否启用删除功能，启用时会触发事件delGridRow	true
delicon	string	设置删除按钮的图标，只有UI theme里的图标才可以使用	ui-icon-trash
deltext	string	设置到删除按钮上的文字信息	空
deltitle	string	当鼠标移到删除按钮上时出现的提示	删除锁选择的行
edit	boolean	是否启用可编辑功能，当编辑时会触发事件editGridRow	true
editicon	string	设置编辑按钮的图标，只有UI theme里的图标才可以使用	ui-icon-pencil
edittext	string	编辑按钮上文字	空
edittitle	string	当鼠标移到编辑按钮上出现的提示信息	编辑所选择的行
position	string	定义按钮位置，可选值left, center and right.	left
refresh	boolean	是否启用刷新按钮，当点击刷新按钮时会触发trigger(“reloadGrid”)事件，而且会清空搜索条件值	true
refreshicon	string	设置刷新图标，只有UI theme里的图标才可以使用	ui-icon-refresh
refreshtext	string	刷新按钮上文字信息	空
refreshtitle	string	当鼠标移到刷新按钮上的提示信息	重新加载
refreshstate	string	指明表格如何刷新。firstpage：从第一页开始刷新；current：只刷新当前页内容	firstpage
afterRefresh	function	当点击刷新按钮之后触发此事件	null
search	boolean	是否启用搜索按钮，会触发searchGrid 事件	true
searchhicon	string	设置搜索按钮的图标，只有UI theme里的图标才可以使用	ui-icon-search
searchtext	string	搜索按钮上的文字	空
searchtitle	string	当鼠标移到搜索按钮上的提示信息	搜索
view	boolean	是否启用查看按钮，会触发事件viewGridRow	false
viewicon	string	设置查看按钮的图标，只有UI theme里的图标才可以使用	ui-icon-document
viewtext	string	查看按钮上文字	空
viewtitle	string	当鼠标移到查看按钮上的提示信息	查看所选记录

实例：

Java代码

<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的翻页要定义在html里，通常是在grid的下面，且是一个div对象：

Java代码

<body>
...
<table id="list"></table>
<div id="gridpager"></div>
...
</body>

<body>
...
   <table id="list"></table> 
   <div id="gridpager"></div> 
...
</body>

js代码：

Java代码

jQuery("#grid_id").jqGrid({
...
pager : '#gridpager',
...
});

jQuery("#grid_id").jqGrid({
...
   pager : '#gridpager',
...
});

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

导航栏的属性：

Java代码

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

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

如果想改变这些设置：
1、方法一：

Java代码

jQuery.extend(jQuery.jgrid.defaults,{emptyrecords: "Nothing to display",...});

jQuery.extend(jQuery.jgrid.defaults,{emptyrecords: "Nothing to display",...});

2、方法二：

Java代码

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

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

导航栏的属性

属性名	类型	说明	默认值	是否可以被修改
lastpage	integer	只读属性，总页数	0	NO
pager	mixed	导航栏对象，必须是一个有效的html元素，位置可以随意	空字符串	NO
pagerpos	string	定义导航栏的位置，默认分为三部分：翻页，导航工具及记录信息	center	NO
pgbuttons	boolean	是否显示翻页按钮	true	NO
pginput	boolean	是否显示跳转页面的输入框	true	NO
pgtext	string	页面信息，第一个值是当前页第二个值是总页数	语言包	YES
reccount	integer	只读属性，实际记录数，千万不能跟records 参数搞混了，通常情况下他们是相同的，假如我们定义rowNum=15，但我们从服务器端返回的记录为20即records=20，而reccount=15，表格中也显示15条记录。	0	NO
recordpos	string	定义记录信息的位置，可选值：left, center, right	right	NO
records	integer	只读属性，从服务器端返回的记录数	none	NO
recordtext	string	显示记录的信息，只有当viewrecords为true时起效，且记录数必须大于0	语言包	yes
rowList	array[]	可以改变表格可以显示的记录数，格式为[10,20,30]	空array[]	no
rowNum	integer	设置表格可以显示的记录数	20	yes
viewrecords	boolean	是否要显示总记录数信息	false	no

所有这些参数都是可以修改的，比如：

Java代码

<script>
...
jQuery("#grid_id").setGridParam({rowNum:10}).trigger("reloadGrid");
...
</script>

<script>
...
jQuery("#grid_id").setGridParam({rowNum:10}).trigger("reloadGrid");
...
</script>

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

事件名	参数	说明
onPaging	pgButton	当点击翻页按钮但还为展现数据时触发此事件，当然这跳转栏输入页码改变页时也同样触发此事件。参数pgButton可选值： first,last,prev,next

posted on 2010-05-26 16:12 民工皇帝阅读(8308) 评论(0) 编辑收藏举报

刷新页面返回顶部

民工皇帝

民工皇帝

公告