一、下载Jqgird相关依赖
下载地址：http://blog.mn886.net/jqGrid/
<script src="assets/js/jquery/jquery-1.7.1.js"></script>
<script src="assets/js/jqgrid/jquery.jqGrid.min.js"></script>
<script src="assets/js/jqgrid/i18n/grid.locale-en.js"></script>
<script src="assets/js/jqgrid/jquery.jqGrid.fluid.js"></script><link href="assets/css/ui.jqgrid.css" rel="stylesheet" type="text/css" media="screen">
<link href="assets/css/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" media="screen">二、编写Servlet
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.shuiwujia.form.JqgridListForm;
import com.shuiwujia.pojo.User;
import net.sf.json.JSONObject;
@WebServlet(urlPatterns = { "/JqgridServlet" })
public class JqgridServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
int perPageSize = 10;
int totalPage = 10;
public JqgridServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/json; charset=utf-8");
PrintWriter out = response.getWriter();
JqgridListForm JqgridListForm = new JqgridListForm();
int currentPage = Integer.parseInt(request.getParameter("page"));
int totalSize = perPageSize * totalPage;
List<User> list = new ArrayList<User>();
for (int i = perPageSize * (currentPage - 1); i < perPageSize * currentPage; i++) {
list.add(new User("用户" + i, "男", 21));
}
out = response.getWriter();
JqgridListForm.setFormList(list);
JqgridListForm.setPage(currentPage);
JqgridListForm.setRecords(totalSize);
JqgridListForm.setTotal(totalPage);
out.println(JSONObject.fromObject(JqgridListForm));
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}import java.io.Serializable;
import java.util.List;
public class JqgridListForm implements Serializable{
private static final long serialVersionUID = 1L;
/* 当前页数 */
private int page;
/* 总页数 */
private int total;
/* 总计录数 */
private long records;
private List<?> formList;
public int getPage() {
return page;
}
public void setPage(int page) {
this.page = page;
}
public int getTotal() {
return total;
}
public void setTotal(int total) {
this.total = total;
}
public long getRecords() {
return records;
}
public void setRecords(long records) {
this.records = records;
}
public List<?> getFormList() {
return formList;
}
public void setFormList(List<?> formList) {
this.formList = formList;
}
}三、编写Html页面
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<link href="assets/css/ui.jqgrid.css" rel="stylesheet" type="text/css" media="screen">
<link href="assets/css/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>
维度:
<select id="typeId">
<option value="性别">性别</option>
<option value="信用度">信用度</option>
<option value="类型">类型</option>
</select>
标签关系：
and<input type="radio" name="relation" value="and" checked="checked">
or<input type="radio" name="relation" value="or">
<input type="text" id="tagsFile"/>
<span class="input-group-btn">
<!-- <button class="btn btn-default" type="button"></button> -->
<button type="button" class="btn btn-default btn-lg" id="searchBtn">
<span class="glyphicon glyphicon-search" aria-hidden="true">搜索</span>
</button>
</span>
<div style="width:700px;">
<table id="mygrid"></table>
<div id="jqgrid-pager"></div>
</div>
</body>
<!-- Jqgrid -->
<script src="assets/js/jquery/jquery-1.7.1.js"></script>
<script src="assets/js/jqgrid/jquery.jqGrid.min.js"></script>
<script src="assets/js/jqgrid/i18n/grid.locale-en.js"></script>
<script src="assets/js/jqgrid/jquery.jqGrid.fluid.js"></script>
<script>
$(document).ready(function () {
var grid = $('#mygrid');
if (grid.length > 0) {
grid.jqGrid({
url : '${pageContext.request.contextPath}/JqgridServlet',
mtype : "POST",
contentType : 'application/json',
datatype : 'json',
colModel : [
{
label : '姓名',
name : 'name', width: '200%'
}, {
label : '年龄',
name : 'age', width: '100%'
}, {
label : '性别',
name : 'gender', width: '100%'
}],
height : 'auto',
shrinkToFit : true,
autoScroll : true ,
pager : 'jqgrid-pager',
page : '1', //初始化查询页数
rowNum : '10',
//rowList : [ 10, 20, 30 ],
sortname : 'name',
sortable : true,
sortorder : 'desc',
viewrecords : true,
recordtext : ' {0} - {1}, 共 {2} 条',//显示记录数的格式
pgtext : '第 {0} 页 共 {1} 页',//页数显示格式
emptyrecords : '无数据',//空记录时的提示信息
loadtext : '获取数据中...',//获得数据时的提示信息
jsonReader : {
root : 'formList', // json中代表实际模型数据的入口
records : 'records', // json中代表数据行总数的数据
page : 'page', // json中代表当前页码的数据
total : 'total', // json中代表页码总数的数据
repeatitems : false
}
});
resize_the_grid();
}
function resize_the_grid() {
if (grid.length > 0) {
grid.fluidGrid({
base : '#jqgrid-wrapper',
offset : 0
});
}
}
/*自适应*/
$(window).resize(resize_the_grid);
/*搜索*/
$('#searchBtn').click(function(){
var tagsFile = $('#tagsFile').val();
var typeId = $('#typeId option:selected').val();
var relation = $("input[name='relation']:checked").val();
console.log(tagsFile);
console.log(typeId);
console.log(relation);
jQuery('#mygrid').jqGrid('setGridParam',{
url: '${pageContext.request.contextPath}/JqgridServlet',
postData:{'searchField':tagsFile},
page:1
}).trigger('reloadGrid');
});
//搜索方法结束
$('#searchField').keyup(function (e){
if(e.keyCode == 13){
$('#searchBtn').click();
}
});
});
</script>
</html>
232
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
