jgGrid 没有被 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":"Haris","dob":"/Date(290851200000-0700)/","department":"HR"}]

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

Answer 1

您当前的代码有很多错误。最重要的错误是 jqGrid 选项的想象名称的使用。您应该检查the documentation 并使用真正受支持的选项和callbacks。仅举一些例子：您当前使用的data、dataType、type 和contentType 选项存在于jQuery.ajax 中。对应的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