jqGrid没有被WCF Rest服务调用填充

Question

我是jQuery和jqGrid的新手。我编写了以下代码来调用WCF RESTful服务并填充jqGrid。虽然对WCF RESTful服务的调用返回了json输出，但jqGrid由于某种原因无法解释此输出。

IService接口：

    [ServiceContract]
    public interface IService
    {
      [OperationContract]
      [WebInvoke(UriTemplate = "/Employees", RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json, Method = "GET")]
      List<Employee> GetCollection();
    }

    [DataContract(Namespace="")]
    public class Employee
    {
      [DataMember(IsRequired = true, Name = "empId", Order = 1)]
      public string EmpId { get; set; }
      [DataMember(IsRequired = false, Name = "empName", Order = 2)]
      public string EmpName { get; set; }
      [DataMember(IsRequired = false, Name = "dob", Order = 3)]
      public DateTime DOB { get; set; }
      [DataMember(IsRequired = false, Name = "department", Order = 4)]
      public string Department { get; set; }

    }

服务实施：

    public List<Employee> GetCollection()
    {           
        List<Employee> empList = new List<Employee>();
        Employee emp = new Employee();
        emp.EmpId = "1";
        emp.DOB = Convert.ToDateTime("21/03/1979");
        emp.EmpName = "Haris";
        emp.Department = "HR";
        empList.Add(emp);

        return empList;            

    }

JQuery脚本：

    jQuery(document).ready(function() {        
        $("#jQGrid").html("<table id=\"list\"></table><div id=\"page\"></div>");
          jQuery("#list").jqGrid({
            url:'http://localhost:9002/SampleServices/Service/REST/Employees',
            //datastr: mystr,
            data: "{}",  // For empty input data use "{}",
            dataType: "json",
            type: "GET",
            contentType: "application/json; charset=utf-8",
            colNames: ['Emp Id.', 'Emp Name', 'DOB', 'Department'],
            colModel: [{ name: 'empId', index: 'empId', width: 90, sortable: true },
            { name: 'empName', index: 'empName', width: 130, sortable: false },
            { name: 'dob', index: 'dob', width: 100, sortable: false },
            { name: 'department', index: 'department', width: 180, sortable: false }
            ],
            multiselect: false,
            paging: true,
            rowNum: 1,
            rowList: [1, 5, 10],
            pager: $("#page"),
            loadonce: true,
            caption: "Employee Details",
            success: successFunction
          }).navGrid('#page', { edit: false, add: false, del: false }
        );
    });

致电         “http：// localhost：9002 / SampleServices / Service / REST / Employees” 返回以下内容：         [{ “EMPID”： “1”， “empName”： “哈里斯”， “出生日期”： “/日期（290851200000-0700）/”， “部门”： “HR”}]

开发人员可以帮我解决这个问题吗？

Answer 1

您当前的代码有很多错误。最重要的错误是使用jqGrid选项的想象名称。您应该检查the documentation并使用真正支持的选项和callbacks。只是一些示例：jQuery.ajax中存在当前data，dataType，type和contentType选项。相应的jqGrid选项应为postData，datatype，mtype和ajaxGridOptions: { contentType: "application/json"}。您还应该使用serializeGridData: function (postData) { return JSON.stringify(postData); }。有关详细信息，请参阅the answer。

为了能够以"/Date(290851200000-0700)/"格式阅读日期，您需要使用formatter: "date"。您需要在jqGrid中包含的最重要的事情是jsonReader，它对应您使用的数据。

所以相应的代码应该是以下内容：

$(function () {
    'use strict';
    $("#jQGrid").html("<table id=\"list\"></table><div id=\"page\"></div>");
    $("#list").jqGrid({
        url: "HarisFarooqui.json",
        datatype: "json",
        height: "auto",
        jsonReader: {
            root: function (obj) {
                return obj;
            },
            repeatitems: false
        },
        serializeGridData: function (postData) {
            return JSON.stringify(postData);
        },
        colNames: ['Emp Id.', 'Emp Name', 'DOB', 'Department'],
        colModel: [
            { name: 'empId', width: 90, sortable: true, sorttype: "int" },
            { name: 'empName', width: 130, sortable: false },
            { name: 'dob', width: 100, formatter: "date", sortable: false },
            { name: 'department', width: 180, sortable: false }
        ],
        rowNum: 10,
        rowList: [10, 30, 1000],
        loadonce: true,
        rownumbers: true,
        gridview: true,
        pager: "#page",
        caption: "Employee Details"
    });
});

请参阅the demo