2013-01-20 23 views
3

Grid.jsp:没有得到jQuery的网格数据的Struts 2

<html> 
<head> 
    <title>jqGrid Example Part 1</title> 
    <link rel="stylesheet" href="jquery-ui-1.8.14.custom.css" type="text/css"/> 
    <link rel="stylesheet" href="ui.jqgrid.css" type="text/css"/> 
    <script src="jquery-1.6.2.min.js" type="text/javascript"></script> 
    <script src="grid.locale-en.js" type="text/javascript"></script> 
    <script src="jquery.jqGrid.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 

     function getGrid() { 
      alert("I was here"); 
      var jqDataUrl = 'getData.action'; 
      // Set up the jquery grid 
      $("#jqTable").jqGrid({ 
       // Ajax related configurations 
       url  : jqDataUrl, 
       datatype : "json", 
       gridModel : "gridModel", 
       // Specify the column names 
       colNames : ["id", "name"], 
       // Configure the columns 
       colModel : [ 
        { name: "id", index: "id", width: 40, align: "left" }, 
        { name: "name", index: "name", width: 100, align: "left" } 
       ], 
       // Grid total width and height 
       width  : 550, 
       height  : 200, 
       // Paging 
       toppager : true, 
       pager  : $("#jqTablePager"), 
       rowNum  : 5, 
       rowList : [5, 10, 20], 
       viewrecords: true, // Specify if "total number of records" is displayed 
       // Default sorting 
       sortname : "Id", 
       sortorder : "asc", 
       // Grid caption 
       caption : "A Basic jqGrid - Read Only" 
      }).navGrid("#jqTablePager", 
        { refresh: true, add: false, edit: false, del: false }, 
        {}, // settings for edit 
        {}, // settings for add 
        {}, // settings for delete 
        {sopt: ["cn"]} // Search options. Some options can be set on column level 
      ); 

      alert("out"); 
     } 
    </script> 
</head> 
<body onload="getGrid();"> 
<div> 
    <p>hi</p> 
    <table id="jqTable" class="scroll"> 
    </table> 
    <div id="jqTablePager"></div> 
</div> 
</body> 
</html> 

Struts.xml是这样

<action name="getData" class="net.viralpatel.contact.view.ContactAction" method="getData"> 
<result name="success" type="json" >gird.jsp</result>   
</action> 

我可以看到JSON结果当我执行getData.action

{ 
    "data"  : "success", 
    "gridModel" : [ 
     {"id": 1, "name": "akhilesh"}, 
     {"id": 0, "name": null} 
    ], 
    "page"  : 1, 
    "records"  : 2, 
    "rows"  : 2, 
    "searchField" : null, 
    "searchOper" : null, 
    "searchString": null, 
    "sidx"  : null, 
    "sord"  : null, 
    "total"  : 2 
} 

我不能在我Grid..gridModel获得值正确映射到我的表...

+1

gird.jsp?一个错字? –

+0

你如何执行操作? –

+0

http:// localhost:8080/StrutsHibernate/getData.action – user1950540

回答

1

相反的定义:

gridModel: "gridModel" 

做:

jsonReader : { 
    repeatitems: false, 
    root  : "gridModel" 
},    // Specify the column names 

所以应为:

$("#jqTable").jqGrid({ 
    // Ajax related configurations 
    url  : "data.json", 
    datatype : "json", 
    jsonReader: { 
     repeatitems: false, 
     root  : "gridModel" 
    },    // Specify the column names 
    colNames : ["id", "name"], 
    // Configure the columns 
    colModel : [ 
     { name: "id", index: "id", width: 40, align: "left" }, 
     { name: "name", index: "name", width: 100, align: "left" } 
    ], 
    // Grid total width and height 
    width  : 550, 
    height  : 200, 
    // Paging 
    toppager : true, 
    pager  : $("#jqTablePager"), 
    rowNum  : 5, 
    rowList : [5, 10, 20], 
    viewrecords: true, // Specify if "total number of records" is displayed 
    // Default sorting 
    sortname : "Id", 
    sortorder : "asc", 
    // Grid caption 
    caption : "A Basic jqGrid - Read Only" 
}).navGrid("#jqTablePager", 
     { refresh: true, add: false, edit: false, del: false }, 
     {}, // settings for edit 
     {}, // settings for add 
     {}, // settings for delete 
     {sopt: ["cn"]} // Search options. Some options can be set on column level 
); 
+0

非常感谢您使用您的代码... – user1950540

+0

不要忘记接受并让其他人知道它是:) – OnaBai

+0

:(我没有这样做的声誉 – user1950540