0

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

服务接口：

    [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)/","部门":"HR"}]

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

4

1 回答 1

0

您当前的代码有很多错误。最重要的错误是 jqGrid 选项的想象名称的使用。您应该检查文档并使用真正受支持的选项和回调。只是一些示例：您使用current data、和jQuery.ajaxdataType中存在的选项。对应的jqGrid 选项应该是、和。您应该另外使用. 有关更多详细信息，请参阅答案。typecontentTypepostDatadatatypemtypeajaxGridOptions: { 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 回答