0

I am new to jQuery and jqGrid. I have written following code to call a WCF RESTful service and populate a jqGrid. Though the call to WCF RESTful service returns a json output, jqGrid for some reason is not able to interpret this output.

IService Interface:

    [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; }

    }

Service Implementation:

    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 Script:

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

Call to "http://localhost:9002/SampleServices/Service/REST/Employees " returns the following: [{"empId":"1","empName":"Haris","dob":"/Date(290851200000-0700)/","department":"HR"}]

Developers could you please help me out with this?

4

1 に答える 1

0

現在のコードには多くのエラーがあります。最も重要なエラーは、jqGrid オプションの想像上の名前の使用です。ドキュメントを調べて、実際にサポートされているオプションとコールバックを使用する必要があります。いくつかの例: 現在使用しているdata、dataType、typeおよびcontentTypeオプションはjQuery.ajaxにあります。対応する jqGrid オプションはpostData、、、およびdatatypeです。を追加で使用する必要があります。詳細については、回答を参照してください。mtypeajaxGridOptions: { contentType: "application/json"}serializeGridData: function (postData) { return JSON.stringify(postData); }

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

デモを見る

ここに画像の説明を入力

于 2012-06-26T07:42:10.843 に答える