<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>grid.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" media="screen"
href="css/themes/redmond/jquery-ui-1.8.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen"
href="css/themes/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen"
href="css/themes/ui.multiselect.css" />
<link rel="stylesheet" type="text/css" media="screen"
href="css/themes/jquery.searchFilter.css" />
<style>
html,body { -
-margin: 0; /* Remove body margin/padding */
padding: 0;
overflow: hidden; /* Remove scroll bars on browser window */
font-size: 75%;
}
</style>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script>
<script src="js/src/ui.multiselect.js" type="text/javascript"></script>
<script src="js/src/grid.loader.js" type="text/javascript"></script>
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script type="text/javascript">
$(function(){
$("#grid_id").jqGrid({
url:'/demo2/servlet/JqGridJsonServlet',
mtype: 'GET',
datatype: 'json',
jsonReader : {
id: "invId",//the unique id of the row.如果不設置則默認爲行號.
repeatitems: false
//element tells jqGrid that the information for the data in the row is repeatable - i.e. the elements have the same tag cell described in cell element. Setting this option to false instructs jqGrid to search elements in the json data by name. This is the name from colModel or the name described with the jsonmap option in colModel.
//A very useful feature here is that there is no need to include all the data that is represented in colModel. Since we make a search by name, the order does not need to match the order in colModel.
//設置爲false，則可以在json串中根據列/值爲傳數據，並且列/值在json串中的位置可以隨意，也可以不傳。
},
height: "auto",
loadui: "disable",
colNames:['Inv No','Date', 'ClientId', 'Amount','Tax','Total','Notes'],
colModel :[
{name:'invId', index:'invId', width:70, search:false},
//name:Set the unique name in the grid for the column. This property is required. As well as other words used as property/event names, the reserved words (which cannot be used for names) include subgrid, cb and rn.
//index:Set the index name when sorting. Passed as sidx parameter.index是後臺排序時使用。
//search:Determines if the field can be searched.是否可以作爲搜索條件
{name:'invDate', index:'invDate', width:120, editable:true, search:false},
{name:'client_Id', index:'client_Id', width:120, editable:true},
{name:'amount', index:'amount', width:90, align:'right', editable:true},
{name:'tax', index:'tax', width:90, align:'right', editable:true},
{name:'total', index:'total', width:90, align:'right', editable:true},
{name:'note', index:'note', width:180, sortable:false, editable:true, search:false}
],
pager: '#pager',
rowNum:10,
rowList:[10,20,30],
sortname: 'invid',
sortorder: 'asc',
viewrecords: true,
caption: 'My first grid'
});
//jQuery("#grid_id").jqGrid('navGrid','#pager',{parameters},prmEdit, prmAdd, prmDel, prmSearch, prmView)
jQuery("#grid_id").jqGrid('navGrid','#pager',{add:true,edit:true,view:true,del:true,search:true,refresh:true},
{url:'/demo2/servlet/JqGridJsonServlet',closeAfterEdit:true, closeOnEscape:true, left:240}, // settings for edit
{url:'/demo2/servlet/JqGridJsonServlet',closeAfterAdd:true, closeOnEscape:true, left:240}, // settings for add
{url:'/demo2/servlet/JqGridJsonServlet',closeAfterEdit:true, closeOnEscape:true, top:90, left:240, resize:false, drag:false}, // settings for del
{url:'/demo2/servlet/JqGridJsonServlet',multipleSearch:true, closeAfterSearch:true, closeOnEscape:true, sopt:['le','ge']}, // enable the advanced searching
{closeOnEscape:true, left:240} // allow the view dialog to be closed when user press ESC key
);
});
</script>
</head>
<body>
<table id="grid_id"></table>
<div id="pager"></div>
</body>
</html>servlet
package com.qoma.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.lang.StringUtils;
import com.et.ar.exception.ActiveRecordException;
import com.qoma.db.vo.InvHeader;
import com.qoma.service.InvHeaderService;
import com.qoma.util.Json;
public class JqGridJsonServlet extends HttpServlet {
/**
*
*/
private static final long serialVersionUID = 1676458940650461673L;
private InvHeaderService service = new InvHeaderService();
private InvHeader vo;
private String search;// 是否爲搜索
private String filters;// 搜索值
private String searchField;
private String searchOper;
private String searchString;
private Integer page;// 當前頁
private Integer rows;// 每頁記錄數
private String sidx;// 排序列
private String sord;// 排序爲正序倒序
private String oper;// 數據操作
private String s;// 返回值
private Long count;// 總記錄數
private Integer totalPages;// 總頁數
private Integer start;// 開始位置
/**
* Constructor of the object.
*/
public JqGridJsonServlet() {
super();
}
/**
* Destruction of the servlet. <br>
*/
public void destroy() {
super.destroy(); // Just puts "destroy" string in log
// Put your code here
}
/**
* The doGet method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to get.
*
* @param request
* the request send by the client to the server
* @param response
* the response send by the server to the client
* @throws ServletException
* if an error occurred
* @throws IOException
* if an error occurred
*/
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
/**
* The doPost method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to
* post.
*
* @param request
* the request send by the client to the server
* @param response
* the response send by the server to the client
* @throws ServletException
* if an error occurred
* @throws IOException
* if an error occurred
*/
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html");
PrintWriter out = response.getWriter();
this.initParameter(request);
if ("true".equals(search)) {// 搜索
if (StringUtils.isEmpty(filters)) {// 單條件搜索
this.pageCount();
try {
List<InvHeader> list = service.getLimitList(start, rows, sidx, sord, searchField, searchString, searchOper);
s = service.getAllJson(page, totalPages, count, list);
} catch (ActiveRecordException e) {
e.printStackTrace();
s = Json.FAILURE;
}
} else {// 多重搜索
//filters = {"groupOp":"AND","rules":[{"field":"client_Id","op":"eq","data":"2"},{"field":"tax","op":"ne","data":"4"}]}
}
} else {
if (StringUtils.isEmpty(oper)) {// 查詢操作
this.pageCount();
try {
List<InvHeader> list = service.getLimitList(start, rows, sidx, sord);
s = service.getAllJson(page, totalPages, count, list);
} catch (ActiveRecordException e) {
e.printStackTrace();
s = Json.FAILURE;
}
} else {// 增刪改操作
if ("del".equals(oper)) {
try {
service.deleteInvHeader(vo);
s = Json.SUCCESS;
} catch (ActiveRecordException e) {
e.printStackTrace();
s = Json.getFailure(e.getMessage());
}
} else {
if ("add".equals(oper)) {
try {
if (service.addInvHeader(vo)) {
s = Json.SUCCESS;
} else {
s = Json.FAILURE;
}
} catch (ActiveRecordException e) {
e.printStackTrace();
s = Json.getFailure(e.getMessage());
}
} else if ("edit".equals(oper)) {
try {
if (service.updateInvHeader(vo)) {
s = Json.SUCCESS;
} else {
s = Json.FAILURE;
}
} catch (ActiveRecordException e) {
e.printStackTrace();
s = Json.getFailure(e.getMessage());
}
}
}
}
}
out.println(s);
out.flush();
out.close();
}
/**
* Initialization of the servlet. <br>
*
* @throws ServletException
* if an error occurs
*/
public void init() throws ServletException {
// Put your code here
}
private void initParameter(HttpServletRequest request) {
search = request.getParameter("_search");
filters = request.getParameter("filters");
searchField = request.getParameter("searchField");
searchOper = request.getParameter("searchOper");
searchString = request.getParameter("searchString");
oper = request.getParameter("oper");
String pageValue = request.getParameter("page");
page = StringUtils.isEmpty(pageValue) ? 0 : Integer.parseInt(pageValue);
String rowsValue = request.getParameter("rows");
rows = StringUtils.isEmpty(rowsValue) ? 0 : Integer.parseInt(rowsValue);
sidx = request.getParameter("sidx");
sord = request.getParameter("sord");
String idValue = request.getParameter("id");
Integer invId = (StringUtils.isEmpty(idValue) || "_empty".equals(idValue)) ? 0 : Integer.parseInt(idValue);// add操作時,id值默認爲_empty
String invDateValue = request.getParameter("invDate");
String clientIdValue = request.getParameter("client_Id");
String amountValue = request.getParameter("amount");
String taxValue = request.getParameter("tax");
String totalValue = request.getParameter("total");
String noteValue = request.getParameter("note");
vo = new InvHeader();
vo.invId = invId;
vo.invDate = invDateValue;
vo.client_Id = StringUtils.isEmpty(clientIdValue) ? 0 : Integer.parseInt(clientIdValue);
vo.amount = StringUtils.isEmpty(amountValue) ? 0 : Float.parseFloat(amountValue);
vo.tax = StringUtils.isEmpty(taxValue) ? 0 : Float.parseFloat(taxValue);
vo.total = StringUtils.isEmpty(totalValue) ? 0 : Float.parseFloat(totalValue);
vo.note = noteValue;
}
private void pageCount() {
if (StringUtils.isEmpty(searchField) || StringUtils.isEmpty(searchString) || StringUtils.isEmpty(searchOper)) {
try {
count = service.getCount();
} catch (ActiveRecordException e) {
e.printStackTrace();
}
} else {
try {
count = service.getCount(searchField, searchString, searchOper);
} catch (ActiveRecordException e) {
e.printStackTrace();
}
}
if (null == sidx || "".equals(sidx))
sidx = "1";
if (count > 0 && rows > 0) {
totalPages = new Long(count / rows).intValue();
if (count % rows != 0) {
totalPages += 1;
}
} else {
totalPages = 0;
}
// if for some reasons the requested page is greater than the
// total
// set the requested page to total page
if (page > totalPages)
page = totalPages;
// calculate the starting position of the rows
start = rows * page - rows;
if (start < 0)
start = 0;
}
}