【发布时间】：2014-09-01 20:57:41
【问题描述】：
我一直在尝试在 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 对象中的所有属性都是小写的。 我还为 rows 数组中的每个项目添加了一个 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; }
}
【问题讨论】：
-
你试过使用本地数据吗？它显示了什么？？？