一、创建Web工程
工程名称：sajdemo
二、添加jar包支持
--struts-2.8.7.jar
commons-fileupload-1.2.2.jar
commons-io-2.0.1.jar
commons-lang3-3.1.jar
freemarker-2.3.19.jar
struts2-core-2.3.7.jar
ognl-3.0.5.jar
xwork-core-2.3.7.jar
javassist-3.11.0.GA.jar
--json.jar
json-lib-2.3-jdk15.jar
struts2-json-plugin-2.3.7.jar
commons-lang-2.4.jar
ezmorph-1.0.6.jar
commons-beanutils-1.8.0.jar
三、添加配置文件与修改web.xml文件
web.xml配置
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<filter>
<filter-name>struts2</filter-name>
<filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
struts.xml配置
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
"http://struts.apache.org/dtds/struts-2.3.dtd">
<struts>
<constant name="struts.devMode" value="true" />
<package name="data" namespace="/" extends="json-default">
<action name="orderItemAction_*" class="cn.jbit.sajdemo.web.action.OrderItemAction" method="{1}">
<result name="success" type="json">
<param name="root">result</param>
</result>
</action>
</package>
</struts>
四、创建Action与javabean
1.在src下创建包
包名：cn.jbit.sajdemo.domain
包名：cn.jbit.sajdemo.web.action
2.在包下创建Action与javabean
javabean:
public class Product {
private String productId;
private String productName;
private Double productPrice;
//省略get and set
}
public class OrderItem {
private String itemId;
private Integer count;
private Product product;
//省略get and set
}
public class OrderItemAction extends ActionSupport {
private JSONObject result;
public String list(){
//创建产品
Product p1 = new Product();
p1.setProductId("p123");
p1.setProductName("苹果手机");
p1.setProductPrice(3000d);
Product p2 = new Product();
p2.setProductId("p124");
p2.setProductName("三星手机");
p2.setProductPrice(3000d);
//创建订单项
OrderItem oi1 = new OrderItem();
oi1.setCount(10);
oi1.setItemId("o123");
oi1.setProduct(p1);
OrderItem oi2 = new OrderItem();
oi2.setCount(20);
oi2.setItemId("o124");
oi2.setProduct(p2);
//创建集合并添加订单项
List<OrderItem> orderItems = new ArrayList<OrderItem>();
orderItems.add(oi1);
orderItems.add(oi2);
//将集合添加到Map中
Map<String,Object> map = new HashMap<String, Object>();
map.put("rows", orderItems);
//将Map转换为Json格式
result = JSONObject.fromObject(map);
//输出Json后的格式数据
System.out.println(result);
return SUCCESS;
}
//省略get and set
}
五、添加EasyUI支持
jquery-easyui-1.3.2
六、视图
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
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" href="jquery-easyui-1.3.2/themes/default/easyui.css" type="text/css"></link>
<link rel="stylesheet" href="jquery-easyui-1.3.2/themes/icon.css" type="text/css"></link>
<script type="text/javascript" src="jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.3.2/jquery.easyui.min.js"></script>
</head>
<body>
<table id="dg"></table>
</body>
<script type="text/javascript">
$(‘#dg‘).datagrid({
url:‘orderItemAction_list.action‘,
columns:[[
{field:‘count‘,title:‘商品数量‘,width:100},
{field:‘itemId‘,title:‘订单项编号‘,width:100},
{field:‘product‘,title:‘商品名称‘,formatter:function(value){
return value.productId;
},width:100}
]]
});
</script>
</html>
本文出自 “素颜” 博客，请务必保留此出处http://suyanzhu.blog.51cto.com/8050189/1571537
原文地址：http://suyanzhu.blog.51cto.com/8050189/1571537
