jqGrid分页技术学习（一）jqGrid环境准备

来源：互联网发布：php json null 编辑：程序博客网时间：2024/04/30 03:30

从http://www.trirand.com/blog/下载jqGrid和Demo。

使用Eclipse Java EE IDE for Web Developers（伽利略）建立一个Dynamic Web Project。将如下文件拷贝入WebContent下的js和themes目录下：

WebContent js i18n jquery-ui-1.8.2.custom.min.js jquery.contextmenu.js jquery.jqGrid.min.js jquery.layout.js jquery.min.js jquery.tablednd.js tablednd.js ui.multiselect.js themes ellipsis-xbl.xml jquery.searchFilter.css redmond ui.jqgrid.css ui.multiselect.css

拷贝jqgrid_demo38中的navgrid.html和navgrid.js作为编程的起始基础，navgrid.html做如下修改：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jqGrid Demos</title>  <link rel="stylesheet" type="text/css" media="screen" href="themes/redmond/jquery-ui-1.8.2.custom.css" mce_href="themes/redmond/jquery-ui-1.8.2.custom.css" /> <link rel="stylesheet" type="text/css" media="screen" href="themes/ui.jqgrid.css" mce_href="themes/ui.jqgrid.css" /> <link rel="stylesheet" type="text/css" media="screen" href="themes/ui.multiselect.css" mce_href="themes/ui.multiselect.css" /> <link rel="stylesheet" type="text/css" media="screen" href="themes/jquery.searchFilter.css" mce_href="themes/jquery.searchFilter.css" /> <mce:style></mce:style><style mce_bogus="1"> html, body { margin: 0;/* Remove body margin/padding */ padding: 2px; overflow: hidden;/* Remove scroll bars on browser window */ font-size: 75%; } .ui-layout-west .ui-jqgrid tr.jqgrow td { height: auto; white-space: normal !important; border-bottom: 0px none; } .rotate { /* for Safari */ -webkit-transform: rotate(-90deg); /* for Firefox */ -moz-transform: rotate(-90deg); /* for Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); }</style>  <mce:script src="js/jquery.min.js" mce_src="js/jquery.min.js" type="text/javascript"></mce:script>  <mce:script src="js/jquery-ui-1.8.2.custom.min.js" mce_src="js/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></mce:script> <mce:script src="js/jquery.layout.js" mce_src="js/jquery.layout.js" type="text/javascript"></mce:script> <mce:script src="js/i18n/grid.locale-en.js" mce_src="js/i18n/grid.locale-en.js" type="text/javascript"></mce:script> <mce:script type="text/javascript"></mce:script> <mce:script src="js/ui.multiselect.js" mce_src="js/ui.multiselect.js" type="text/javascript"></mce:script> <mce:script src="js/jquery.jqGrid.min.js" mce_src="js/jquery.jqGrid.min.js" type="text/javascript"></mce:script> <mce:script src="js/jquery.tablednd.js" mce_src="js/jquery.tablednd.js" type="text/javascript"></mce:script> <mce:script src="js/jquery.contextmenu.js" mce_src="js/jquery.contextmenu.js" type="text/javascript"></mce:script> <mce:script src="js/src/grid.formedit.js" mce_src="js/src/grid.formedit.js" type="text/javascript"></mce:script></head><body> <div style="font-size:12px;" mce_style="font-size:12px;"> This example show navigator.<br/> See below for all available options. <br/> Note: The data is not saved to the server<br/> </div> <br /> <table id="navgrid"></table> <div id="pagernav"></div> <mce:script src="navgrid.js" mce_src="navgrid.js" type="text/javascript"></mce:script></body></html>

navgrid.js做如下修改：

jQuery("#navgrid").jqGrid({ url: 'paging.go',datatype: "json", colNames: ['Inv No','Date', 'Client', 'Amount','Tax','Total','Closed','Ship via','Notes'], colModel: [ {name:'id',index:'id', width:55,editable:false,editoptions:{readonly:true,size:10}}, {name:'invdate',index:'invdate', width:80,editable:true,editoptions:{size:10}}, {name:'client_id',index:'client_id', width:90,editable:true,editoptions:{size:25}}, {name:'amount',index:'amount', width:60,align:"right",editable:true,editoptions:{size:10}}, {name:'tax',index:'tax', width:60,align:"right",editable:true,editoptions:{size:10}}, {name:'total',index:'total', width:60,align:"right",editable:true,editoptions:{size:10}},{name:'closed',index:'closed',width:55,align:'center',editable:true,edittype:"checkbox",editoptions:{value:"Yes:No"}},{name:'ship_via',index:'ship_via',width:70,editable: true,edittype:"select",editoptions:{value:"FE:FedEx;TN:TNT"}}, {name:'note',index:'note', width:100,sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"100"}} ], rowNum: 10, rowList: [10,20,30], pager: '#pagernav', sortname: 'id', viewrecords: true, jsonReader : { root: "rows", page: "page", total: "total", records: "records", repeatitems: false, cell: "cell", id: "id" }, sortorder: "desc", caption:"Navigator Example", editurl:"paging.go",height:210});jQuery("#navgrid").jqGrid('navGrid','#pagernav',{view:true}, //options{ height:280,jqModal:true, closeOnEscape:true, // 使用esc键关闭对话框reloadAfterSubmit:false}, // edit options{ recreateForm:true, height:280, closeOnEscape:true, // 使用esc键关闭对话框 reloadAfterSubmit:false}, // add options{ mtype:"POST",reloadAfterSubmit:false}, // del options{multipleSearch:true} // search options);