1、首先引入easyui包
在jsp页面上引用以下文件：
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<script type="text/javascript" src="js/jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery-easyui-1.3.2/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js"></script>
注意：jquery-1.8.0.min.js要在jquery.easyui.min.js之前引入。
2、以下为jsp页面代码：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css"
href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<script type="text/javascript" src="easyui/jquery.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript">
$(function() {
$('#mydatagrid').datagrid({
title : 'datagrid实例',
iconCls : 'icon-ok',
width : 600,
pageSize : 5,//默认选择的分页是每页5行数据
pageList : [ 5, 10, 15, 20 ],//可以选择的分页集合
nowrap : true,//设置为true，当数据长度超出列宽时将会自动截取
striped : true,//设置为true将交替显示行背景。
collapsible : true,//显示可折叠按钮
toolbar : "#tb",//在添加 增添、删除、修改操作的按钮要用到这个
url : '<%= basePath %>page/plane_findAllPlane.action',//url调用Action方法
loadMsg : '数据装载中......',
singleSelect : true,//为true时只能选择单行
fitColumns : true,//允许表格自动缩放，以适应父容器
//sortName : 'xh',//当数据表格初始化时以哪一列来排序
//sortOrder : 'desc',//定义排序顺序，可以是'asc'或者'desc'（正序或者倒序）。
remoteSort : false,
frozenColumns : [ [ {
field : 'id',
checkbox : true
} ] ],
pagination : true,//分页
rownumbers : true
//行数
});
});
</script>
</head>
<body>
<h2>
<b>easyui的DataGrid实例</b>
</h2>
<table id="mydatagrid">
<thead>
<tr>
<th data-options="field:'planeName',width:100,align:'center'">学生学号</th>
<th data-options="field:'planeType',width:100,align:'center'">姓名</th>
<th data-options="field:'planeModel',width:100,align:'center'">性别</th>
<th data-options="field:'description',width:100,align:'center'">年龄</th>
</tr>
</thead>
</table>
</body>
</html>
3、action代码：
private String rows;// 每页显示的记录数
private String page;// 当前第几页 public String getRows() {
return rows;
} public void setRows(String rows) {
this.rows = rows;
} public String getPage() {
return page;
} public void setPage(String page) {
this.page = page;
}
public void findAllPlane() {
try {
//当前页数据集合
List<Plane> planeLibraryList = planeService.findAll(page, rows);
//总页数
int total = planeService.findSize();
//转化显示数据
List<PlaneView> list = new ArrayList<PlaneView>();
for (Plane plane : planeLibraryList) {
PlaneView view = new PlaneView();
view.setPlaneType(plane.getPlaneType());
view.setPlaneName(plane.getPlaneName());
view.setPlaneModel(plane.getPlaneModel());
view.setDescription(plane.getDescription());
list.add(view);
}
JSONObject jobj = new JSONObject();//new一个JSON
jobj.accumulate("total",total );//total代表一共有多少数据
jobj.accumulate("rows", list);//row是代表显示的页的数据
response.setCharacterEncoding("utf-8");//指定为utf-8
response.getWriter().write(jobj.toString());
} catch (IOException e) {
e.printStackTrace();
}//转化为JSOn格式
}
4、显示效果图
