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：//本地主機：9002/SampleServices /服務/ REST/Employees「 返回以下內容： [{「empId」：「1」，「empName」：「Haris」，「dob」：「/ Date（290851200000-0700）/」，「department」：「HR」}]

Developers can you這個你能幫我嗎？

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