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',100,align:'center'">学生学号</th> <th data-options="field:'planeType',100,align:'center'">姓名</th> <th data-options="field:'planeModel',100,align:'center'">性别</th> <th data-options="field:'description',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、显示效果图
