jqGrid未显示结果

Question

jQuery对我来说一直很头疼。我似乎无法理解什么以及如何得到错误。

我想将数据从.asmx绑定到jqGrid。代码相对简单。请看下面的代码

.aspx页面中

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> 
    <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> 
    <link href="css/jquery-ui-custom.css" rel="stylesheet" /> 
    <script type="text/javascript" src="js/jquery.jqGrid.min.js"></script> 
    <link href="css/ui.jqgrid.css" rel="stylesheet" /> 
    <script type="text/javascript" src="js/grid.locale-en.js"></script> 
</asp:Content> 
<asp:Content ID="Content2" ContentPlaceHolderID="bodyContent" Runat="Server"> 
    <table id="jQGridDemo"> 
    </table> 
    <div id="jQGridDemoPager"> 
    </div> 
    <script type="text/javascript" src="js/Jgrid.App.js"></script> 
</asp:Content> 

的JavaScript查询到的数据绑定到的jqGrid

jQuery("#jQGridDemo").jqGrid({ 
    ajaxGridOptions: { contentType: "application/json" }, 
    url: 'ForecastWebservice.asmx/GetType', 
    datatype: "json", 
    postData: "{}", 
    colNames: ['TypeID', 'Name'], 
    colModel: [ 
     { name: 'TypeID', index: 'aTypeId'}, 
     { name: 'Name', index: 'aName'} 
    ], 
    mtype: 'GET', 
    gridview: true, 
    sortname: 'aTypeId', 
    sortorder: 'desc', 
    caption: "Forecast" 
}); 

，这是JSON响应我在谷歌获得Chrome开发者控制台

{"d":"[{\"aTypeId\":1,\"aName\":\"Replacement - Regular\"},{\"aTypeId\":3,\"aName\":\"Development - Replacement\"},{\"aTypeId\":5,\"aName\":\"Growth\"}]"} 

页面有标题但无法加载数据。

请帮忙。如果可能，请让我知道我该如何学习它。我已经在C＃，VB，SQL，PHP编码，但无法得到一个JavaScript的挂。它的行为如此不可行。

Answer 1

人们可以看到一些重要的错误：

1. 数据从Web服务被包裹在"d"财产。您必须通过使用jsonReader: { root: "d", repeatitems: false }通知jqGrid。
2. 从服务器返回的数据格式不正确。我想方法GetType返回string而不是object，并且您在GetType内部对JSON进行了序列化。这是不对的！你只需要返回对象，而DotNet会将序列化到JSON本身。目前您将对象转换为字符串，并且DotNet使得第二次对JSON字符串进行序列化。由于第二次序列化，可以看到结果为{"d":"[{\"aTypeId\":1,\"aName\":\"Replacement - Regular\"},...]"}而不是{"d":[{"aTypeId":1,"aName":"Replacement - Regular"},...]}。
3. 返回数据的格式表明您不需要服务器端分页数据。因此您应该添加loadonce: true选项。
4. 您在colModel的列上使用了错误的名称。正确的将是[{ name: 'aTypeId'}, { name: 'aName'}]没有任何index属性。

您应该总是在问题中包含jqGrid的哪个版本以及您使用哪个分支。我建议你使用最新版本free jqGrid - 这是我开发的分叉。