主要的代碼如下：
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/commons/taglibs.jsp" %>
<html>
<head>
<%@ include file="/commons/meta.jsp" %>
<title>User Manage</title>
<link rel="stylesheet" type="text/css" media="screen" href="<c:url value="/scripts/styles/jqGrid/themes/basic/grid.css"/>" />
<link rel="stylesheet" type="text/css" media="screen" href="<c:url value="/scripts/styles/jqGrid/themes/jqModal.css"/>" />
<script src="<c:url value="/scripts/plugIn/jqGrid/jquery.jqGrid.js"/>" type="text/javascript"></script>
<script src="<c:url value="/scripts/plugIn/jqGrid/jqModal.js"/>" type="text/javascript"></script>
<script src="<c:url value="/scripts/plugIn/jqGrid/jqDnR.js"/>" type="text/javascript"></script>
<script src="<c:url value="/scripts/plugIn/corner/jquery.corner.js"/>" type="text/javascript"></script>
</head>
<script type="text/javascript">
jQuery(document).ready(function(){
//var _documentWidth = $(document.body).innerWidth();
//alert('_documentWidth2=>'+_documentWidth);
jQuery("#list").jqGrid({
url:'${ctx}/module/yhqxgl/userinfo/data-xmlmap.xml',
datatype: 'xml',
mtype: 'GET',
xmlReader: {
root:"result",
row:"invoice",
page:"invoices>currentpage",
total:"invoices>totalpages",
records:"invoices>totalrecords",
repeatitems:false,
id:"asin"
},
colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],
colModel :[
{name:'invid', index:'invid', width:55, xmlmap:"invoiceno"},
{name:'invdate', index:'invdate', width:90, xmlmap:"invoicedate"},
{name:'amount', index:'amount', width:80, align:'right', xmlmap:"invoiceamount"},
{name:'tax', index:'tax', width:80, align:'right', xmlmap:"invoicetax"},
{name:'total', index:'total', width:80, align:'right', xmlmap:"invoicetotal"},
{name:'note', index:'note', width:150, sortable:false, xmlmap:"notes"}
],
pager: jQuery('#pager'),
rowNum:10,
rowList:[10,20,30],
sortname: 'invid',
sortorder: "desc",
viewrecords: true,
multiselect: true,
//multikey: 'ctrlKey', //不設置這個值時可以連續的選中記錄
multiboxonly :true,
width:800,
height: 'auto',
hidegrid: false,
imgpath: '${ctx}/scripts/styles/jqGrid/themes/basic/images',
caption: 'My first grid',
loadError : function(xhr,st,err) {
$("#tblMasterMessage").html("Type: "+st+"; Response: "+ xhr.status + " "+xhr.statusText);
},
ondblClickRow : function(rowid) {
//$("#tblDetails").editGridRow(rowid,editdtprm);
alert('ondblClickRow rowid=>'+rowid);
},
onRightClickRow : function(rowid){
alert('onRightClickRow rowid=>'+rowid);
},
onSelectRow : function(rowid){
alert('onSelectRow rowid=>'+rowid);
},
onSortCol : function(index, colindex, sortorder){
alert('onSortCol index=>'+index +" colindex=>"+colindex +" sortorder=>"+sortorder);
}
});
//block-query
$("#queryForm").corner("bevel 8px")
});
</script>
<body>
<div id="queryForm" style="height:200px;width:100px;background-color:red"></div>
<table id="list" class="scroll" width="100%"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>
<div id="tblMasterMessage"></div>
</body>
</html>
其中，
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Cache-Control" content="no-store"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="0"/>
<script>
var _contextPath = '${ctx}';
</script>
<script src="<c:url value="/scripts/jquery/jquery.js"/>" type="text/javascript"></script>
<link href="<c:url value="/scripts/styles/default.css"/>" type="text/css" rel="stylesheet">
其中，
function jqGridInclude()
{
// var pathtojsfiles = "/greatwall/scripts/plugIn/jqGrid/"; // need to be ajusted
var pathtojsfiles = _contextPath + "/scripts/plugIn/jqGrid/";
// set include to false if you do not want some modules to be included
var combineIntoOne = false;
var combinedInclude = new Array();
var combinedIncludeURL = "combine.php?type=javascript&files=";
var minver = true;
var modules = [
{ include: true, incfile:'grid.locale-en.js',minfile: 'min/grid.locale-en-min.js'}, // jqGrid translation
{ include: true, incfile:'grid.base.js',minfile: 'min/grid.base-min.js'}, // jqGrid base
{ include: true, incfile:'grid.common.js',minfile: 'min/grid.common-min.js' }, // jqGrid common for editing
{ include: true, incfile:'grid.formedit.js',minfile: 'min/grid.formedit-min.js' }, // jqGrid Form editing
{ include: true, incfile:'grid.inlinedit.js',minfile: 'min/grid.inlinedit-min.js' }, // jqGrid inline editing
{ include: true, incfile:'grid.celledit.js',minfile: 'min/grid.celledit-min.js' }, // jqGrid cell editing
{ include: true, incfile:'grid.subgrid.js',minfile: 'min/grid.subgrid-min.js'}, //jqGrid subgrid
{ include: true, incfile:'grid.treegrid.js',minfile: 'min/grid.treegrid-min.js'}, //jqGrid treegrid
{ include: true, incfile:'grid.custom.js',minfile: 'min/grid.custom-min.js'}, //jqGrid custom
{ include: true, incfile:'grid.postext.js',minfile: 'min/grid.postext-min.js'}, //jqGrid postext
{ include: true, incfile:'grid.tbltogrid.js',minfile: 'min/grid.tbltogrid-min.js'}, //jqGrid table to grid
{ include: true, incfile:'grid.setcolumns.js',minfile: 'min/grid.setcolumns-min.js'} //jqGrid setcolumns
];
var filename;
for(var i=0;i<modules.length; i++)
{
if(modules[i].include === true) {
if (minver == true)
filename = pathtojsfiles+modules[i].incfile;
else
filename = pathtojsfiles+modules[i].minfile;
if (combineIntoOne !== true) {
IncludeJavaScript(filename);
} else {
combinedInclude[combinedInclude.length] = filename;
}
}
}
if ((combineIntoOne === true) && (combinedInclude.length>0) ) {
var fileList = implode(",",combinedInclude);
IncludeJavaScript(combinedIncludeURL+fileList);
}
function implode( glue, pieces ) {
// http://kevin.vanzonneveld.net
//original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
//example 1: implode(' ', ['Kevin', 'van', 'Zonneveld']);
//returns 1: 'Kevin van Zonneveld'
return ( ( pieces instanceof Array ) ? pieces.join ( glue ) : pieces );
};
function IncludeJavaScript(jsFile)
{
var oHead = document.getElementsByTagName('head')[0];
var oScript = document.createElement('script');
oScript.type = 'text/javascript';
oScript.src = jsFile;
oHead.appendChild(oScript);
};
};
jqGridInclude();