jquery easyui 结合jsp简单展现table数据示例

复制代码 代码如下:

  <%@ page language="java" contentType="text/html; charset=UTF-8"

  pageEncoding="UTF-8"%>

  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

  <html>

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <title>Insert title here</title>

  <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-1.8.0.min.js"></script>

  <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

  </head>

  <body>

  <table id="dg" title="My Users" class="easyui-datagrid" style="width:500px;height:250px"

  url="getUsers.jsp"

  toolbar="#toolbar" rownumbers="true"

  fitColumns="true" singleSelect="true">

  <thead>

  <tr>

  <th field="firstname" width="50">First Name</th>

  <th field="lastname" width="50">Last Name</th>

  <th field="phone" width="50">Phone</th>

  <th field="email" width="50">Email</th>

  </tr>

  </thead>

  </table>

  </body>

  </html>

  

复制代码 代码如下:

  <%@page import="net.sf.json.JSONArray"%>

  <%@page import="java.util.*"%>

  <%@page import="org.codehaus.jackson.map.ObjectMapper"%>

  <%@ page language="java" contentType="text/html; charset=UTF-8"

  pageEncoding="UTF-8"%>

  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

  <html>

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <title>Insert title here</title>

  </head>

  <body>

  <%

  //String json = "{\"firstname\":\"firstname\",\"lastname\":\"lastname\",\"phone\":123456,\"email\":\"[email protected]\"}";

  List<Map<String,String>> list = new ArrayList<Map<String,String>>();

  Map<String,String> user1 = new HashMap<String,String>();

  user1.put("firstname", "name1");

  user1.put("lastname", "name2");

  user1.put("phone", "1234");

  user1.put("email", "[email protected]");

  list.add(user1);

  Map<String,String> user2 = new HashMap<String,String>();

  user2.put("firstname", "name2");

  user2.put("lastname", "name4");

  user2.put("phone", "1234");

  user2.put("email", "[email protected]");

  list.add(user2);

  JSONArray jsonArray = JSONArray.fromObject(list);

  System.out.println(jsonArray.toString());

  Map<String,Object> map = new HashMap<String,Object>();

  map.put("total", 1);

  map.put("rows", jsonArray);

  ObjectMapper objMap = new ObjectMapper();

  objMap.writeValue(response.getWriter(), map);

  //System.out.println(json);

  %>

  </body>

  </html>

  效果:

jquery easyui 结合jsp简单展现table数据示例