害怕不可預測因素導致寫的丟失,所以分兩次, 這次使用servlet 返回json數據,顯示到page.
1.servlet 代碼如下:
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 jqueryServletForJson extends HttpServlet {
private static final long serialVersionUID = 1L;
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
JSONObject obj = new JSONObject();
obj.put("page", "1");
obj.put("total","1");
obj.put("records","1");
JSONArray lineitemArray = new JSONArray();
for(int i=0;i<5;i++){
JSONObject objlineitem = new JSONObject();
objlineitem.put("id",""+i);
objlineitem.put("invdate", "11");
objlineitem.put("name", "22");
objlineitem.put("amount", "33");
objlineitem.put("tax", "44");
objlineitem.put("total", "55");
objlineitem.put("note", "66");
lineitemArray.add(objlineitem);
}
obj.put("rows", lineitemArray);
System.err.println("==get the json data==>"+obj);
response.getWriter().print(obj.toString());
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
2.web.xml中配置servlet
<servlet>
<servlet-name>jsonTest</servlet-name>
<servlet-class>com.eastpro.jsonTest.jqueryServletForJson</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>jsonTest</servlet-name>
<url-pattern>/jsonTestServlet</url-pattern>
</servlet-mapping>
3.jsp的代碼如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First Grid</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.7.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="js/src/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="js/src/css/jquery.searchFilter.css" />
<style>
html, body {
margin: 0;
padding: 0;
font-size: 75%;
}
</style>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/src/grid.loader.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
jQuery("#jsonmap").jqGrid({
url:'http://10.0.0.43:7001/dyJqgrid/jsonTestServlet',//這裏是配置的servlet url.
datatype: "json",
colNames:['Inv No','Date', 'customer', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:90},
{name:'invdate',index:'invdate', width:110},
{name:'name',index:'name asc, invdate', width:100},
{name:'amount',index:'amount', width:80},
{name:'tax',index:'tax', width:80},
{name:'total',index:'total', width:80},
{name:'note',index:'note', width:150}
],
rowNum:10,
rowList:[10,20,30],
imgpath: 'themes/sand/images',
pager: jQuery('#pjmap'),
multiselect: false,
sortname: 'id',
viewrecords: true,
sortorder: "desc",
jsonReader: {
repeatitems : false
},
caption: "jqGrid test",
height: 220
}).navGrid('#pjmap',{edit:false,add:false,del:false});
});
</script>
</head>
<body>
<div style="font-size:12px;">
This example show how we can load array data.
In this case we use a addRowData method.
</div>
<br/>
<table id="jsonmap" class="scroll"></table>
<div id="pjmap" class="scroll"></div>
<a href="#" οnclick="jSearchCounselor();">ddddddd</a>
<table id="csTable">
</table>
</body>
</html>
4.同樣在index.jsp給一個link path.
5.測試結果如下 , 看起來樣式不對,沒有繼續研究..
6.如果在FF裏面測試呢,總是會報一個json未組織好..捆饒了好久...不明白..有知道的不吝賜教啊..謝謝.
