jqGrid分页技术学习（一）jqGrid环境准备_trirand.web 分页设置-优快云博客

本文链接：https://blog.youkuaiyun.com/thomas_h_zhang/article/details/6285079

本文详细介绍如何使用jqGrid创建一个具备导航功能的动态表格。通过下载jqGrid并配置Eclipse环境，用户可以快速设置表格样式及功能，如排序、分页等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

从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 );