最近因为自己学校的项目需要用jquery的一个表格插件jqGrid来进行表格显示。自己仿照网上http://blog.csdn.net/polaris1119/archive/2010/01/04/5130974.aspx的进行了一个例子的展示,可是基本相同的内容居然自己就不行了。方式是前台JS调用Servlet来获取json数据进行解析来显示。代码如下:HTML代码(WebRoot/web/testGrid.html)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>testGrid.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <link id="uiThemes" rel="stylesheet" type="text/css" media="screen"
href="../include/css/jqGrid/jquery-ui-1.8.6.custom.css"
mce_href="../include/css/jqGrid/jquery-ui-1.8.6.custom.css" />
<link rel="stylesheet" type="text/css" media="screen"
href="../include/css/jqGrid/ui.jqgrid.css"
mce_href="../include/css/jqGrid/ui.jqgrid.css" /> <!-- 引入jQuery -->
<script type="text/javascript"
src="../include/js/jquery-1.4.3.js"
mce_src="../include/js/jquery-1.4.3.js"></script>
<script type="text/javascript"
src="../include/js/jquery.contextMenu.js"
mce_src="../include/js/jquery.contextMenu.js"></script>
<script src="../include/js/jqGrid/jquery-ui-1.8.6.custom.min.js"
mce_src="../include/js/jqGrid/jquery-ui-1.8.6.custom.min.js"
type="text/javascript"></script>
<script src="../include/js/jqGrid/jquery-1.4.2.min.js"
mce_src="../include/js/jqGrid/jquery-1.4.2.min.js"
type="text/javascript"></script>
<script src="../include/js/jqGrid/grid.locale-cn.js"
mce_src="../include/js/jqGrid/grid.locale-cn.js"
type="text/javascript"></script>
<script src="../include/js/jqGrid/jquery.jqGrid.min.js"
mce_src="../include/js/jqGrid/jquery.jqGrid.min.js"
type="text/javascript"></script>
<script src="../include/js/jqGrid/grid.common.js"
mce_src="../include/js/jqGrid/grid.common.js"
type="text/javascript"></script>
<script src="../include/js/jqGrid/grid.formedit.js"
mce_src="../include/js/jqGrid/grid.formedit.js"
type="text/javascript"></script> <script type="text/javascript">
jQuery(document).ready(function(){
$("#gridTable").jqGrid({
url:'jqGridServlet',
datatype: "json",
height: 250,
colNames:['编号','用户名', '性别', '邮箱', 'QQ','手机号','出生日期'],
colModel:[
{name:'id',index:'id', width:60, sorttype:"int"},
{name:'userName',index:'userName', width:90},
{name:'gender',index:'gender', width:90},
{name:'email',index:'email', width:125,sorttype:"string"},
{name:'QQ',index:'QQ', width:100},
{name:'mobilePhone',index:'mobilePhone', width:120},
{name:'birthday',index:'birthday', width:100, sorttype:"date"}
],
sortname:'id',
sortorder:'asc',
viewrecords:true,
rowNum:10,
rowList:[10,20,30],
jsonReader:{
repeatitems : false
},
pager:"#gridPager",
caption: "jqGrid与Servlet集成"
}).navGrid('#gridPager',{edit:false,add:false,del:false});
}); </script>
</head>
<body>
This is grid1 page. <br>
<table id="gridTable"></table>
<div id="gridPager"></div>
</body>
</html>
调用的Servlet(JqGridForJSONServlet .java)package com.edu.ynu.servlet.web;import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;public class JqGridForJSONServlet extends HttpServlet {// private static final long serialVersionUID = 132383828833L;
@Override
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//定义返回的数据类型:json,使用了json-lib
JSONObject jsonObj = new JSONObject();
// 根据jqGrid对JSON的数据格式要求给jsonObj赋值
jsonObj.put("page", 1); // 当前页
jsonObj.put("total", 1); // 总页数
jsonObj.put("records", 4); // 总记录数 // 定义rows,存放数据
JSONArray rows = new JSONArray();
// 放入4条数据
for(int i=0;i<4;i++){
// 存放一条记录的对象
JSONObject cell = new JSONObject();
cell.put("id", i);
if(i%2==0){
cell.put("userName", "polaris");
cell.put("gender", "女");
}
else{
cell.put("userName", "徐新华");
cell.put("gender", "男");
}
cell.put("email", "[email protected]");
cell.put("QQ", "772" + i + "1837" + i);
cell.put("mobilePhone", "132" + i + "1837" + i + "3" + i);
cell.put("birthday", "198" + i + "-10-" + "1" + i); // 将该记录放入rows中
rows.add(cell);
} // 将rows放入json对象中
jsonObj.put("rows", rows); // 自控制台打印输出,以检验json对象生成是否正确
System.out.println("要返回的json对象:\n" + jsonObj.toString()); // 设置字符编码
response.setCharacterEncoding("UTF-8");
// 返回json对象(通过PrintWriter输出)
response.getWriter().print(jsonObj);
}
@Override
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request,response);
}
} <servlet>
<servlet-name>JqGridServlet</servlet-name>
<servlet-class>com.edu.ynu.servlet.web.JqGridForJSONServlet</servlet-class>
</servlet> <servlet-mapping>
<servlet-name>JqGridServlet</servlet-name>
<url-pattern>/jqGridServlet</url-pattern>
</servlet-mapping>然后用IE8,Firefox进行展示只有表头及边框,没有内容数据。firebug显示“404 /SAES/web/jqGridServlet”(项目名SAES)。已经为这个问题耽误了几天了,请大家帮帮忙啊!!!!!!!!!!!!!!!!!!!谢谢啊
<html>
<head>
<title>testGrid.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <link id="uiThemes" rel="stylesheet" type="text/css" media="screen"
href="../include/css/jqGrid/jquery-ui-1.8.6.custom.css"
mce_href="../include/css/jqGrid/jquery-ui-1.8.6.custom.css" />
<link rel="stylesheet" type="text/css" media="screen"
href="../include/css/jqGrid/ui.jqgrid.css"
mce_href="../include/css/jqGrid/ui.jqgrid.css" /> <!-- 引入jQuery -->
<script type="text/javascript"
src="../include/js/jquery-1.4.3.js"
mce_src="../include/js/jquery-1.4.3.js"></script>
<script type="text/javascript"
src="../include/js/jquery.contextMenu.js"
mce_src="../include/js/jquery.contextMenu.js"></script>
<script src="../include/js/jqGrid/jquery-ui-1.8.6.custom.min.js"
mce_src="../include/js/jqGrid/jquery-ui-1.8.6.custom.min.js"
type="text/javascript"></script>
<script src="../include/js/jqGrid/jquery-1.4.2.min.js"
mce_src="../include/js/jqGrid/jquery-1.4.2.min.js"
type="text/javascript"></script>
<script src="../include/js/jqGrid/grid.locale-cn.js"
mce_src="../include/js/jqGrid/grid.locale-cn.js"
type="text/javascript"></script>
<script src="../include/js/jqGrid/jquery.jqGrid.min.js"
mce_src="../include/js/jqGrid/jquery.jqGrid.min.js"
type="text/javascript"></script>
<script src="../include/js/jqGrid/grid.common.js"
mce_src="../include/js/jqGrid/grid.common.js"
type="text/javascript"></script>
<script src="../include/js/jqGrid/grid.formedit.js"
mce_src="../include/js/jqGrid/grid.formedit.js"
type="text/javascript"></script> <script type="text/javascript">
jQuery(document).ready(function(){
$("#gridTable").jqGrid({
url:'jqGridServlet',
datatype: "json",
height: 250,
colNames:['编号','用户名', '性别', '邮箱', 'QQ','手机号','出生日期'],
colModel:[
{name:'id',index:'id', width:60, sorttype:"int"},
{name:'userName',index:'userName', width:90},
{name:'gender',index:'gender', width:90},
{name:'email',index:'email', width:125,sorttype:"string"},
{name:'QQ',index:'QQ', width:100},
{name:'mobilePhone',index:'mobilePhone', width:120},
{name:'birthday',index:'birthday', width:100, sorttype:"date"}
],
sortname:'id',
sortorder:'asc',
viewrecords:true,
rowNum:10,
rowList:[10,20,30],
jsonReader:{
repeatitems : false
},
pager:"#gridPager",
caption: "jqGrid与Servlet集成"
}).navGrid('#gridPager',{edit:false,add:false,del:false});
}); </script>
</head>
<body>
This is grid1 page. <br>
<table id="gridTable"></table>
<div id="gridPager"></div>
</body>
</html>
调用的Servlet(JqGridForJSONServlet .java)package com.edu.ynu.servlet.web;import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;public class JqGridForJSONServlet extends HttpServlet {// private static final long serialVersionUID = 132383828833L;
@Override
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//定义返回的数据类型:json,使用了json-lib
JSONObject jsonObj = new JSONObject();
// 根据jqGrid对JSON的数据格式要求给jsonObj赋值
jsonObj.put("page", 1); // 当前页
jsonObj.put("total", 1); // 总页数
jsonObj.put("records", 4); // 总记录数 // 定义rows,存放数据
JSONArray rows = new JSONArray();
// 放入4条数据
for(int i=0;i<4;i++){
// 存放一条记录的对象
JSONObject cell = new JSONObject();
cell.put("id", i);
if(i%2==0){
cell.put("userName", "polaris");
cell.put("gender", "女");
}
else{
cell.put("userName", "徐新华");
cell.put("gender", "男");
}
cell.put("email", "[email protected]");
cell.put("QQ", "772" + i + "1837" + i);
cell.put("mobilePhone", "132" + i + "1837" + i + "3" + i);
cell.put("birthday", "198" + i + "-10-" + "1" + i); // 将该记录放入rows中
rows.add(cell);
} // 将rows放入json对象中
jsonObj.put("rows", rows); // 自控制台打印输出,以检验json对象生成是否正确
System.out.println("要返回的json对象:\n" + jsonObj.toString()); // 设置字符编码
response.setCharacterEncoding("UTF-8");
// 返回json对象(通过PrintWriter输出)
response.getWriter().print(jsonObj);
}
@Override
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request,response);
}
} <servlet>
<servlet-name>JqGridServlet</servlet-name>
<servlet-class>com.edu.ynu.servlet.web.JqGridForJSONServlet</servlet-class>
</servlet> <servlet-mapping>
<servlet-name>JqGridServlet</servlet-name>
<url-pattern>/jqGridServlet</url-pattern>
</servlet-mapping>然后用IE8,Firefox进行展示只有表头及边框,没有内容数据。firebug显示“404 /SAES/web/jqGridServlet”(项目名SAES)。已经为这个问题耽误了几天了,请大家帮帮忙啊!!!!!!!!!!!!!!!!!!!谢谢啊
datatype: "json", url地址不对, 也就是在web/下边没有这个jqGridServlet
<servlet-name>JqGridServlet</servlet-name>
<url-pattern>/jqGridServlet</url-pattern>
</servlet-mapping>
中:
<url-pattern>/web/jqGridServlet</url-pattern>
这样改试试看