需要使用struts2的jqgrid的完整示例

时间:2016-05-11 11:59:34

标签: json struts2 jqgrid

我在struts2中使用jqgrid插件。我能够在浏览器中看到 JSON 数据,但不知道如何在网格中显示该数据(使用grid.jsp)。

以下是我正在使用的文件:

struts.xml中

<?xml version="1.0" encoding="UTF-8" ?>

<constant name="struts.devMode" value="true" />

<package name="default" namespace="/" extends="json-default">

    <result-types>
        <result-type name="json" class="com.googlecode.jsonplugin.JSONResult" />
    </result-types>

    <action name="getJSONResult" class="com.developer.am.action.JSONDataAction">
        <result type="json" />
    </action>

    <action name="ListUsers" class="com.developer.am.action.ListUsersAction">
        <result name="SUCCESS">grid.jsp</result>
    </action>

</package>

的web.xml

<?xml version="1.0" encoding="UTF-8"?>

http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd”     id =“WebApp_ID”version =“3.0”&gt;     Struts2_Json              的index.jsp     

<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>

JSONDataAction.java

package com.developer.am.action; 
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import com.opensymphony.xwork2.Action;

public class JSONDataAction{


int id = 1;
String firstName = "ASHOK";
String lastName = "BHOR";
String username = "ab";
String email="ab@.com";

        /*setter getter methos */

        }

ListUsersAction.java

package com.developer.am.action;

public class ListUsersAction {
     public String execute() {
            return "SUCCESS";
        }
}

的index.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
    <%@taglib prefix="st" uri="/struts-tags" %>
<!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=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<st:form action="getJSONResult">

<h1>Hello</h1>
<st:submit value="ok"></st:submit>
</st:form>

</body>
</html>

grid.jsp

 <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!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=ISO-8859-1">
<link rel="stylesheet" type="text/css" media="screen" href="../css/jquery-ui-1.10.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../css/ui.jqgrid.css" />
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.10.2.custom.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<title>List Users</title>
<script type="text/javascript"> 
jQuery().ready(function (){
    alert('Hi');
    jQuery("#list1").jqGrid({
           url:'Struts2_Json/getJSONResult.action',
        datatype: "json",
           colNames:['User Id','First Name', 'Last Name', 'Username','Email'],
           colModel:[
               {name:'id',index:'id', width:75},
               {name:'firstName',index:'firstName', width:90},
               {name:'lastName',index:'lastName', width:100},
               {name:'username',index:'username', width:80},
               {name:'email',index:'username', width:80}                   
           ],
           rowNum:10,
           autowidth: true,
           rowList:[10,20,30],
           pager: jQuery('#pager1'),
           sortname: 'id',
        viewrecords: true,
        sortorder: "desc",
        caption:"Users"
    }).navGrid('#pager1',{edit:false,add:false,del:false});    
});                
</script>
</head>
<body>
    <table id="list1"></table>
    hi
    <div id="pager1"></div>
</body>
</html>

1 个答案:

答案 0 :(得分:1)

我知道它已经很晚了,但仍在发布答案。好像有人遇到同样的问题一样,他可以在这里获得帮助。

最近遇到了同样的问题,我通过使用free-jqGrid的jsonReader属性解决了该问题。

我从后端得到的杰森是

 "gridModel1": [{
        "description": null,
        "filterLang": "en",
        "filterName": "welcome1",
        "filterType": "Announcement",
        "id": {
            "customer": "DemoCust",
            "languageId": "en",
            "name": "welcome1",
            "poolName": "w",
            "customerId": "23",
            "type": "Prompt",
            "version": "default"
        },
        "key": "xxyzz123",
        "numId": 1,
        "usedForReport": false,
        "value": "http:\/\/15.213.57.179:8080\/mcm\/resources\/Djezzy\/Questionnaire\/Versions\/default\/DemoCust\/Prompt\/en\/welcome1.wav"
    }

在jqGrid中使用jsonReader属性

$("#gridMod").jqGrid({
            url:"<<StrutsBackendCall>>",     
            datatype:"json",
            jsonReader: {
                root:"gridModel1"
            },
            colModel: [
                { name: "numId",index:"numId", label:"NumId" },

                { name: "filterName",index:"filterName", hidden:true, label:"id.Name"},

                { name: "id.poolName",index:"id.poolName",label:"Prompt Name" },
                { name: "id.name",index:"id.name", label:".wav File Name" },

                { name: "id.customerid",index:"id.customerid", hidden:true, label: "Tenant" }, 
                .....

            ],             
            /* loadonce:false, */
            guiStyle: "bootstrap",
            iconSet: "glyph",   
            sortorder: "asc",
            idPrefix: "gridModel1_",
            onSelectRowTopics:"rowselect_main1",
            pager: true,                
            cmTemplate: { autoResizable: true },
            rowNum:10,
            viewrecords: true,
            caption: "The grid, which uses predefined formatters and templates"
  )};

现在我可以在网格中看到数据。如果不清楚,请尝试提供帮助。