struts與datagrid顯示數據

一、創建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>