0

我是 jQuery/jqGrid 的新手。我想从 asmx Web 服务返回 json 格式的数据并在 jqGrid 中显示数据。网格正在页面上呈现，但它不包含任何数据行。我不确定我是否返回了 jqGrid 正在寻找的正确格式。或者，如果我错过了其他东西。

（我遇到了许多与该主题相关的 SO 问题，所以如果已经回答，我提前道歉。在这一点上，即使是可用的不同答案的数量也会造成进一步的混乱）。

网络服务

 <System.Web.Script.Services.ScriptService()> _
    <WebService(Namespace:="http://tempuri.org/")> _
    <WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
    <Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
    Public Class WebService1
    Inherits System.Web.Services.WebService

    Public Class Person
        Public FirstName As String
        Public LastName As String
    End Class

    <WebMethod()>
    <ScriptMethod(UseHttpGet:=False, ResponseFormat:=ResponseFormat.Json)> _
    Public Function GetPersonList() As List(Of Person)

        Dim personList As New List(Of Person)

        'Connect to DB

        'While reading from DB       
            personList.Add(
                New Person() With {
                    .FirstName= dr("fname"),
                    .LastName = dr("lastName")
                })

        'Does personList need to be converted to a different format?
        Return personList

    End Function
    End Class

ASPX 页面

jQuery("#list1").jqGrid({
            url: "http://localhost/WebService1.asmx/GetPersonList",
            datatype: "json",
            mtype: 'POST',
            colNames: ['FirstName', 'LastName'],
            colModel: [
            { name: 'FirstName', index: 'FirstName', width: 90 },
            { name: 'LastName', index: 'LastName', width: 90 }
            ],
            rowNum:10,
            rowList: [10,20,30],
            pager: '#pager1',
            viewrecords: true,
            caption: "Person List"
        });
4

2 回答 2

2

重要的是要了解 jqGrid 发送到"http://localhost/WebService1.asmx/GetPersonList"附加参数。jqGrid是面向服务端实现数据分页的。因此它将只显示 10 行数据（请参阅 参考资料rowNum:10），并且起始页选择用户。因此最好更改服务器代码以支持分页。（参见代码示例的答案）

或者，您可以使用loadonce: truejqGrid 的选项。在这种情况下，jqGrid将实现客户端分页，并且服务器可以像您当前一样返回所有数据。不过，您必须添加更多参数才能使网格正常工作。重要的是要知道，ASMX 服务返回d属性内的所有数据。所以你必须使用jsonReaderwhich 来描述 jqGrid 如何读取从服务器返回的数据。可能是这样的

jsonReader: {
    repeatitems: false,
    root: function (obj) { return obj.d; },
    page: function () { return 1; },
    total: function () { return 1; },
    records: function (obj) { return obj.d.length; }
}

（以答案为例）。

于 2012-08-29T20:59:43.930 回答
1

编辑：使用这个。我已经使用 ASMX 服务对其进行了测试，该服务没有返回List<Person>.

$("#list1").jqGrid({
    url: "http://localhost/WebService1.asmx/GetPersonList",
    datatype: "json",
    mtype: 'POST',
    ajaxGridOptions: { contentType: 'application/json; charset=utf-8' 
    }, // ASMX wants request header to be application/json..
    serializeGridData: function (postdata) { 
        return null; 
    }, // ignores paging params - if not needed (else your service must define them)
    jsonReader: { // thanks Oleg for this tip on dealing with the ASMX data.d
        repeatitems: false,
        root: function (obj) { return obj.d; },
        page: function () { return 1; },
        total: function () { return 1; },
        records: function (obj) { return obj.d.length; }
    },
    colNames: ['FirstName', 'LastName'],
    colModel: [
        { name: 'FirstName', index: 'FirstName', width: 90 },
        { name: 'LastName', index: 'LastName', width: 90 }
        ],
    rowNum: 10,
    rowList: [10, 20, 30],
    viewrecords: true,
    caption: "Person List"
});

另一个有用的技巧是在定义 jqGrid 时使用Firebug之类的东西来设置断点。您还应该在 Firebug 控制台中看到对您的 Web 服务进行了调用，以及响应是否返回。

另一个有用的提示是将您的 JSON 包装在 JsonResponse 类中，其中包含时间戳、状态、消息、结果 .. 以及您需要的任何其他字段（我只使用这 4 个）。

public class JsonResponse
{
    public object[] Result { get; set; }
    public string TimeStamp { get; set; }
    public string Status { get; set; }
    public string Message { get; set; }
}
于 2012-08-29T20:05:47.063 回答