我正在尝试使用JSP创建一个用于jqGrid的xml文件。 JSP文件如下:example.jsp:
<%@ page contentType="text/html; charset=utf-8" language="java"
import="java.sql.*, java.sql.Connection, java.sql.DriverManager, java.sql.SQLException, java.text.DateFormat, java.util.*, java.lang.Math, java.io.*, java.net.*, javax.servlet.*" errorPage="" %>
<%
out.println( "<?xml version='1.0' encoding='utf-8'?>");
out.println( "<rows>");
out.println( "<page>1</page>");
out.println( "<total>5</total>");
out.println( "<records>5</records>");
for( int i = 0; i < 13; i++)
{
out.println( "<row id='row"+(i+1)+"'>");
out.println( "<cell>1:"+(i+1)+"</cell>");
out.println( "<cell>2:"+(i+1)+"</cell>");
out.println( "<cell>3:"+(i+1)+"</cell>");
out.println( "<cell>4:"+(i+1)+"</cell>");
out.println( "<cell>5:"+(i+1)+"</cell>");
out.println( "<cell>6:"+(i+1)+"</cell>");
out.println( "<cell>7:"+(i+1)+"</cell>");
out.println( "<cell>8:"+(i+1)+"</cell>");
out.println( "<cell>9:"+(i+1)+"</cell>");
out.println( "<cell>10:"+(i+1)+"</cell>");
out.println( "<cell>11:"+(i+1)+"</cell>");
out.println( "<cell>12:"+(i+1)+"</cell>");
out.println( "<cell>13:"+(i+1)+"</cell>");
out.println( "</row>");
}
out.println( "</rows>");%>
当我从服务器调用此页面时,我看到一个xml格式文件。 但是当我从我的“example1.html”(根据我的需要修改了jqGrid提供的示例)中调用它时,没有数据显示。 这是example1.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jqGrid Demo</title>
<style>
html, body {
margin: 0; /* Remove body margin/padding */
padding: 0;
overflow: auto; /* Remove scroll bars on browser window */
font: 12px "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana;
}
</style>
<!-- In head section we should include the style sheet for the grid -->
<link rel="stylesheet" type="text/css" media="screen" href="themes/sand/grid.css" />
<!-- Of course we should load the jquery library -->
<script src="js/jquery.js" type="text/javascript"></script>
<!-- and at end the jqGrid Java Script file -->
<script src="js/jquery.jqGrid.js" type="text/javascript"></script>
<script type="text/javascript">
// We use a document ready jquery function.
jQuery(document).ready(function(){
jQuery("#list2").jqGrid({
// the url parameter tells from where to get the data from server
// adding ?nd='+new Date().getTime() prevent IE caching
url:'../js/example.jsp',
// datatype parameter defines the format of data returned from the server
// in this case we use a JSON data
datatype: "xml",
// colNames parameter is a array in which we describe the names
// in the columns. This is the text that apper in the head of the grid.
colNames:['Part Number', 'BOM', 'Database Ready', 'Config files Ready', 'HW Ready', 'SW Ready', 'OMNI Version', 'TCF Version', 'Default Cal File', 'Overall Status', 'Updated By', 'Update Date', 'Sign'],
// colModel array describes the model of the column.
// name is the name of the column,
// index is the name passed to the server to sort data
// note that we can pass here nubers too.
// width is the width of the column
// align is the align of the column (default is left)
// sortable defines if this column can be sorted (default true)
colModel:[
{name:'PartNumber',index:'PartNumber', width:55},
{name:'BOM',index:'BOM', width:90},
{name:'DatabaseReady',index:'DatabaseReady', width:100},
{name:'ConfigfilesReady',index:'ConfigfilesReady', width:80, align:"right"},
{name:'HWReady',index:'HWReady', width:80, align:"right"},
{name:'SWReady',index:'SWReady', width:80,align:"right"},
{name:'OMNIVersion',index:'OMNIVersion', width:150, sortable:false},
{name:'TCFVersion',index:'TCFVersion', width:55},
{name:'DefaultCalFile',index:'DefaultCalFile', width:90},
{name:'OverallStatus',index:'OverallStatus', width:100},
{name:'UpdatedBy',index:'UpdatedBy', width:80, align:"right"},
{name:'UpdateDate',index:'UpdateDate', width:80, align:"right"},
{name:'Sign',index:'Sign', width:80,align:"right"},
],
// pager parameter define that we want to use a pager bar
// in this case this must be a valid html element.
// note that the pager can have a position where you want
pager: jQuery('#pager2'),
// rowNum parameter describes how many records we want to
// view in the grid. We use this in example.php to return
// the needed data.
rowNum:10,
// rowList parameter construct a select box element in the pager
//in wich we can change the number of the visible rows
rowList:[10,20,30],
// path to mage location needed for the grid
imgpath: 'themes/sand/images',
// sortname sets the initial sorting column. Can be a name or number.
// this parameter is added to the url
sortname: 'PartNumber',
//viewrecords defines the view the total records from the query in the pager
//bar. The related tag is: records in xml or json definitions.
viewrecords: true,
//sets the sorting order. Default is asc. This parameter is added to the url
sortorder: "asc",
caption: "Demo"
});
});
</script>
</head>
<body>
<!-- the grid definition in html is a table tag with class 'scroll' -->
<table id="list2" class="scroll" cellpadding="0" cellspacing="0"></table>
<!-- pager definition. class scroll tels that we want to use the same theme as grid -->
<div id="pager2" class="scroll" style="text-align:center;"></div>
</body>
</html>
请记住,如果我使用常规的xml文件:“example.xml”,它可以正常工作
提前谢谢。
我尝试了这个example.jsp,使用数据:但是无法正常工作
<%@ page import="JSP_connection.build.classes.connection.*"%>
<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*, java.sql.Connection, java.sql.DriverManager, java.sql.SQLException, java.text.DateFormat, java.util.*, java.lang.Math, java.io.*, java.net.*, javax.servlet.*" errorPage="" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jqGrid Demo</title>
<style>
html, body {
margin: 0; /* Remove body margin/padding */
padding: 0;
overflow: auto; /* Remove scroll bars on browser window */
font: 12px "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana;
}
</style>
<!-- In head section we should include the style sheet for the grid -->
<link rel="stylesheet" type="text/css" media="screen" href="themes/sand/grid.css" />
<!-- Of course we should load the jquery library -->
<script src="js/jquery.js" type="text/javascript"></script>
<!-- and at end the jqGrid Java Script file -->
<script src="js/jquery.jqGrid.js" type="text/javascript"></script>
<script type="text/javascript">
// We use a document ready jquery function.
jQuery(document).ready(function(){
jQuery("#list2").jqGrid({
colNames:['Part Number', 'BOM', 'Database Ready', 'Config files Ready'],
colModel:[
{name:'PartNumber',index:'PartNumber', width:55},
{name:'BOM',index:'BOM', width:90},
{name:'DatabaseReady',index:'DatabaseReady', width:100},
{name:'ConfigfilesReady',index:'ConfigfilesReady', width:180, align:"right"},
],
data: [
{ PartNumber: 'T562RL18B02.00', BOM: 'Ready', DatabaseReady: 'Ready', ConfigfilesReady: 'Not Ready' },
{ PartNumber: 'T562RL18B02.00', BOM: 'Ready', DatabaseReady: 'Ready', ConfigfilesReady: 'Not Ready' }
],
// pager parameter define that we want to use a pager bar
// in this case this must be a valid html element.
// note that the pager can have a position where you want
pager: jQuery('#pager2'),
// rowNum parameter describes how many records we want to
// view in the grid. We use this in example.php to return
// the needed data.
rowNum:10,
// rowList parameter construct a select box element in the pager
//in wich we can change the number of the visible rows
rowList:[10,20,30],
// path to mage location needed for the grid
imgpath: 'themes/sand/images',
// sortname sets the initial sorting column. Can be a name or number.
// this parameter is added to the url
sortname: 'PartNumber',
//viewrecords defines the view the total records from the query in the pager
//bar. The related tag is: records in xml or json definitions.
viewrecords: true,
//sets the sorting order. Default is asc. This parameter is added to the url
sortorder: 'asc',
caption: 'Demo'
});
});
</script>
</head>
<body>
<!-- the grid definition in html is a table tag with class 'scroll' -->
<table id="list2" class="scroll" cellpadding="0" cellspacing="0"></table>
<!-- pager definition. class scroll tels that we want to use the same theme as grid -->
<div id="pager2" class="scroll" style="text-align:center;"></div>
</body>
</html>