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"
});

这是我在Google Chrome开发者控制台中获得的JSON响应

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

该页面包含标题但无法加载数据。

请帮忙。我已经疯了javascript编码。如果可能的话，请让我知道如何学习它。我已经完成了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的版本以及您使用的fork。我建议您使用最新版本的free jqGrid - 它是我开发的分支。