Question

我一直在尝试在JQGrid上运行。这证明很难。我已经花了很多时间在这上面，所以我会非常感谢任何可以提供帮助的人。

实际的网格代码如下：

$(function () {
    $("#list2").jqGrid({
        url: '/Home/GetData',
        datatype: "json",        
        colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],
        colModel: [
            { name: 'id', index: 'id', width: 55 },
            { name: 'date', index: 'date', width: 90 },
            { name: 'client', index: 'client asc, date', width: 100 },
            { name: 'amount', index: 'amount', width: 80, align: "right" },
            { name: 'tax', index: 'tax', width: 80, align: "right" },
            { name: 'total', index: 'total', width: 80, align: "right" },
            { name: 'notes', index: 'notes', width: 150, sortable: false }
        ],
        jsonReader: {
            root: function(obj) {
                return $.parseJSON(obj);
            },
            page: "page",
            total: "total",
            records: "records",
            repeatitems: true,
            cell: "cell",
            id: "id",
            userdata: "userdata"
        },
        rowNum: 10,
        rowList: [10, 20, 30],
        pager: '#pager2',
        sortname: 'id',
        viewrecords: true,
        sortorder: "desc",
        caption: "JSON Example"
    });
    $("#list2").jqGrid('navGrid', '#pager2', { edit: false, add: false, del: false });

});

从服务器返回的json如下所示：

{
    "Page": "1",
    "Records": "13",
    "Total": 2,
    "UserData": {
        "Amount": 3220,
        "Name": "Totals:",
        "Tax": 342,
        "Total": 3564
    },
    "Rows": [{
        "Cell": {
            "Id": 13,
            "Date": "2014-09-01",
            "Client": "Client 3",
            "Amount": 1000.0,
            "Tax": 0.00,
            "Total": 1000.0,
            "Notes": null
        },
        "Id": 13,
    },
    {
        "Cell": {
            "Id": 14,
            "Date": "2014-09-01",
            "Client": "Client 4",
            "Amount": 2000.0,
            "Tax": 10.00,
            "Total": 2010.0,
            "Notes": null
        },
        "Id": 14,
    },
    {
        "Cell": {
            "Id": 15,
            "Date": "2014-09-01",
            "Client": "Client 5",
            "Amount": 3000.0,
            "Tax": 100.00,
            "Total": 3100.0,
            "Notes": null
        },
        "Id": 15,
    }]
}

有人能看到问题吗？很高兴提供所有代码。使用ASP.NET MVC作为服务器技术。

修改/更新

我更改了服务器内容，以便json对象中的所有属性都是小写的。我还为行数组中的每个项添加了一个id属性。仍然没有工作:(

另外，我在json对象中获得反斜杠，这与jqGrid网站上的示例不同：

"{\"page\":\"1\",\"records\":\"13\",\"total\":2,\"userData\":{\"amount\":6110,\"name\":\"Totals:\",\"tax\":110,\"total\":6220},\"rows\":[{\"cell\":{\"id\":13,\"date\":\"2014-09-01\",\"client\":\"Client 3\",\"amount\":1000.0,\"tax\":0.00,\"total\":1000.0,\"notes\":null},\"id\":13},{\"cell\":{\"id\":14,\"date\":\"2014-09-01\",\"client\":\"Client 4\",\"amount\":2000.0,\"tax\":10.00,\"total\":2010.0,\"notes\":null},\"id\":14},{\"cell\":{\"id\":15,\"date\":\"2014-09-01\",\"client\":\"Client 5\",\"amount\":3000.0,\"tax\":100.00,\"total\":3100.0,\"notes\":null},\"id\":15}]}"

修改/更新

我终于摆脱了斜线。有效的组合是使用JSON.NET将数据序列化为JSON，然后将其包装在ContentResult中。 JsonResult正在序列化一个已经被序列化为JSON的对象。

这是服务器端代码（C＃）：

public ActionResult GetData([FromUri]GridViewModel gridViewModel)
{
    var mockData = new MockData();

    mockData.Page = "1";
    mockData.Records = "13";
    mockData.Total = 2;
    mockData.UserData = new UserData
    {
        Amount = 6110,
        Name = "Totals:",
        Tax = 110,
        Total = 6220
    };

    mockData.Rows = new List<Object>
    {
        new
        {
            Cell = new Cell
            {
                Id = 13,
                Amount = 1000,
                Client = "Client 3",
                Date = DateTime.Now,
                Notes = null,
                Tax = 0.00M,
                Total = 1000
            },
            id = 13
        },
        new
        {
            Cell = new Cell
            {
                Id = 14,
                Amount = 2000,
                Client = "Client 4",
                Date = DateTime.Now,
                Notes = null,
                Tax = 10.00M,
                Total = 2010
            },
            id = 14
        },
        new
        {
            Cell = new Cell
            {
                Id = 15,
                Amount = 3000,
                Client = "Client 5",
                Date = DateTime.Now,
                Notes = null,
                Tax = 100.00M,
                Total = 3100
            },
            id = 15
        },
    };

    var jsonObject = JsonConvert.SerializeObject(
        mockData,
        Formatting.None,
        new JsonSerializerSettings
        {
            ContractResolver = new CamelCasePropertyNamesContractResolver(),
            DateFormatString = "yyyy-MM-dd",
            StringEscapeHandling = StringEscapeHandling.EscapeNonAscii
        }
        );

    //return Json(mockData, "application/json", JsonRequestBehavior.AllowGet);
    return new ContentResult
    {Content = jsonObject, ContentType = "application/json"};
}

public class MockData
{
    public string Page { get; set; }
    public string Records { get; set; }
    public int Total { get; set; }
    public UserData UserData { get; set; }

    public IEnumerable<Object> Rows { get; set; }

}

public class UserData
{
    public int Amount { get; set; }
    public string Name { get; set; }
    public int Tax { get; set; }
    public int Total { get; set; }
}

public class Cell
{
    public int Id { get; set; }
    public DateTime Date { get; set; }
    public string Client { get; set; }
    public decimal Amount { get; set; }
    public decimal Tax { get; set; }
    public decimal Total { get; set; }
    public string Notes { get; set; }
}

Answer 1

首先，如果您使用两个不同的 JSON数据发布一个问题，那将很困难。你从服务器生成哪一个？我建议您使用Internet Explorer的Fiddler或开发人员工具（按 F12 启动，然后使用“网络”选项卡开始捕获）来捕获服务器和客户端之间的HTTP流量。如果服务器响应确实是引用的字符串，如

"{\"page\":\"1\",\"records\":\"13\",\"total\":2,...}

然后您可能不需要将对象序列化为JSON。通常，ASP.NET会为您生成JSON序列化。问题是，只能对对象进行JSON序列化，但字符串也是如此。如果字符串中的引号（"）将被转义（请参阅here）。如果你真的还可以使用

jsonReader: {
    root: function (obj) {
        return $.parseJSON(obj).rows;
    },
    page: function (obj) {
        return $.parseJSON(obj).page;
    },
    total: function (obj) {
        return $.parseJSON(obj).total;
    },
    records: function (obj) {
        return $.parseJSON(obj).records;
    },
    repeatitems: false,
    userdata: "userData"
}

读取您的数据，但我建议您更好地调整服务器响应并删除其他不需要的JSON序列化。

然而，jqGrid允许您读取您发布的数据。 The demo证明了这一点。仍然需要解决的唯一问题是向每列添加jsonmap属性。

通常，数据项看起来像

{"cell": ["13", "2014-09-01", "Client 3", "1000", "0", "1000", ""], "id": 13}

或喜欢

{
    "id": 13,
    "date": "2014-09-01",
    "client": "Client 3",
    "amount": 1000,
    "tax": 0,
    "total": 1000,
    "notes": null
}

并不喜欢您的数据：

{
    "cell": {
        "id": 13,
        "date": "2014-09-01",
        "client": "Client 3",
        "amount": 1000,
        "tax": 0,
        "total": 1000,
        "notes": null
    },
    "id": 13
}

为了能够读取您的数据，必须在jsonmap的每个列定义中添加colModel属性：

{ name: "id", jsonmap: "cell.id", width: 55 },
{ name: "date", jsonmap: "cell.date", width: 90 },
{ name: "client", jsonmap: "cell.client", width: 100 },
{ name: "amount", jsonmap: "cell.amount", width: 80, align: "right" },
{ name: "tax", jsonmap: "cell.tax", width: 80, align: "right" },
{ name: "total", jsonmap: "cell.total", width: 80, align: "right" },
{ name: "notes", jsonmap: "cell.notes", width: 150, sortable: false }

此外，我建议您将选项height: "auto"，gridview: true和autoencode: true添加到网格定义中。您没有发布您的服务器代码。您使用的jqGrid和JSON数据格式需要服务器端排序，分页和搜索/过滤数据。如果您使用的是非大型数据集（例如少于1000行），则应考虑从服务器一次返回所有数据并使用loadonce: true选项。如果在第一次加载数据后datatype将更改为"local"，则内部将对jqGrid对数据进行排序，分页和过滤。

JQGrid - 空网格不显示数据

1 个答案: