【发布时间】：2010-09-15 21:54:16
【问题描述】：
有没有人能够实现 JQuery 网格插件 jqGrid？我正在尝试实现 JSON 分页，我觉得我已经接近了，但我也被无关紧要的细节所淹没。如果有人可以发布一些示例代码，我将不胜感激。
【问题讨论】：
标签： asp.net jquery ajax jqgrid
【发布时间】：2010-09-15 21:54:16
【问题描述】：
在我尝试为我的项目执行此操作时发现了您的帖子。我让它工作了。对于将来需要它的任何人，jqGrid 将无法使用 JSON 和 ASP.NET 开箱即用。您需要对 grid.base.js 进行一些小修改。在第 829 行附近，将 json case 部分替换为以下内容：
case "json":
gdata = JSON.stringify(gdata); //ASP.NET expects JSON as a string
$.ajax({ url: ts.p.url,
type: ts.p.mtype,
dataType: "json",
contentType: "application/json; charset=utf-8", //required by ASP.NET
data: gdata,
complete: function(JSON, st) { if (st == "success") { addJSONData(cleanUp(JSON.responseText), ts.grid.bDiv); if (loadComplete) { loadComplete(); } } },
error: function(xhr, st, err) { if (loadError) { loadError(xhr, st, err); } endReq(); },
beforeSend: function(xhr) { if (loadBeforeSend) { loadBeforeSend(xhr); } } });
if (ts.p.loadonce || ts.p.treeGrid) { ts.p.datatype = "local"; }
break;
然后添加如下函数：
function cleanUp(responseText) {
var myObject = JSON.parse(responseText); //more secure than eval
return myObject.d; //ASP.NET special
}
您还需要包含JSON parser and stringifier。除了使用 ASP.NET，修改后的代码也是 more secure，因为 eval 语句已经消失了。
编辑：我还应该注意到，您可能需要对 grid.celledit.js、grid.formedit.js、grid.inlinedit.js 和 grid.subgrid.js 进行类似的编辑.
【讨论】：
-
从 jqGrid 3.4 开始，这些 hack 还需要吗？
我刚刚使用 jTemplates 使用 jQuery 和 ASP.NET 进行客户端分页。我写了一篇关于它的博文，你可以在这里找到：http://www.aaron-powell.com/blog.aspx?id=1209
它着眼于如何创建模板化数据位置，从 ASP.NET 返回数据，然后实现分页解决方案。
【讨论】：
您可以使用 ASP.Net MVC JsonResult 来填充网格。
人物类
public class Person
{
public int ID { get; set; }
public string Name { get; set; }
public DateTime Birthday { get; set; }
public static IEnumerable<Person> GetABunchOfPeople()
{
// Get a bunch of People.
}
}
在您的控制器中，您将拥有：
public JsonResult GetABunchOfPeopleAsJson()
{
var rows = (Person.GetABunchOfPeople()
.Select(c => new
{
id = c.ID,
cell = new[]
{
c.ID.ToString(),
c.Name,
c.Birthday.ToShortDateString()
}
})).ToArray();
return new JsonResult
{
Data = new
{
page = 1,
records = rows.Length,
rows,
total = 1
}
};
}
而 url 的 jqGrid 配置将是：
url: '<%= ResolveUrl("~/Person/GetAllPeople") %>',
【讨论】：
我只是挣扎着试图把所有东西放在一起。我首先关心的是生成正确的 JSON 响应。我返回的类似乎被序列化为名为“d”的属性 - 这是 JQuery 的事情，还是 ASP.Net Web 方法约定？恐怕 jqGrid 会寻找顶级数据，而 asp.net 会将它放在一个名为“d”的属性中：
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static object GetData() {
TestClass tc = new TestClass() { One = "Hello", Two = "World" };
return tc;
}
$("#divResults").click(function() {
$.ajax({
type: "POST",
url: "GridData_bak.aspx/GetData",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(test) {
// Replace the div's content with the page method's return.
$("#divResults").text(test.d.One);
},
error: function(msg) {
$("#divResults").text(msg);
}
});
});
【讨论】：
flexgrid 插件在文档上非常稀疏，但是在演示页面的一小部分中，有一个关于创建 json 序列化对象的 tut，这有点误导，因为网格需要特定格式，我已经移植了 php 代码对于带有一点猴子油脂的 xml 选项，您可以对 json 格式执行相同的操作
这是我的 xml 端口
the setup for the grid
$("#tableToFlex").flexigrid({
url: 'WebService.asmx/getData'}
... *other configs* ...);
请考虑 webservice.asmx 类中的以下代码
<WebMethod()> _
<ScriptMethod(ResponseFormat:=ResponseFormat.Xml)> _
Public Function getData(ByVal page As Integer, _
ByVal qtype As String, _
ByVal Query As String, _
ByVal rp As Integer, _
ByVal sortname As String, _
ByVal sortorder As String) As System.Xml.XmlDocument
'note these parameters are inputted to determine paging and constrains for the resultant rows
'Sample list to send to the grid
Dim list = New List(Of ApplicationStateInformation)
'Sample row object that holds name , surname , address, idnumber ...
list.Add(New RowObjects( "test1", "test1", "test1", "12345"))
list.Add(New RowObjects( "test2", "test2", "test2", "12345"))
list.Add(New RowObjects( "test3", "test3", "test3", "12345"))
list.Add(New RowObjects( "test4", "test4", "test4", "12345"))
'retun a xml doc, as we are using the xml format on the flexgrid
Dim returnDoc = New System.Xml.XmlDocument()
returnDoc.Load(New IO.StringReader(ToXmlResult(list)))
Return returnDoc
End Function
Private Function ToXmlResult(ByVal list As List(Of RowObjects)) As String
'this is the xml document format the grid understands
Dim result As String = "<?xml version=""1.0"" encoding=""utf-8""?>" & vbCrLf
result += "<rows>" & vbCrLf
result += String.Format("<page>{0}</page>" & vbCrLf, "1")
result += String.Format("<total>{0}</total>" & vbCrLf, "10")
For Each item In list
result += ConvertRowData(item)
Next
result += "</rows>" & vbCrLf
Return result
End Function
Private Function ConvertRowData(ByVal row As RowObjects) As String
Dim result As String = String.Format("<row id='{0}'>" & vbCrLf, row.IdNumber.ToString)
'THESE SHOULD BE HTML ENCODED (the format arg) but I left it out
result += String.Format("<cell><![CDATA[{0}]]></cell>" & vbCrLf, row.Name)
result += String.Format("<cell><![CDATA[{0}]]></cell>" & vbCrLf, row.Surname)
result += String.Format("<cell><![CDATA[{0}]]></cell>" & vbCrLf, row.IdNumber)
result += "</row>" & vbCrLf
Return result
End Function
【讨论】：
我认为你可以让 jqgrid 与 json & asp.net 一起工作，而无需修改 grid.base.js 和其他 jqgrid 文件，你必须使用 datatype 属性来定义你自己的自定义 ajax 调用并定义一个 json 阅读器，jqgrid 将然后在每次重新加载网格时使用您的自定义 ajax 调用和阅读器。
xml 的过程与此类似，您只需定义一个 xmlreader 而不是 jsonreader。
jsonreader的所有属性都定义在online documentation中
有关自定义数据类型的示例，请参阅 live demo page 中“3.3 中的新功能”下的“作为数据类型的函数”
【讨论】：
-
好点。如果您只是检索数据，那是可行的。不幸的是，jqGrid 中的编辑功能不允许自定义 Ajax，除非您在 jqGrid 代码中进行更改，至少据我所知。
我的工具：
数据："{'page':'" + gdata.page + "','rows':'" + gdata.rows + "','sidx':'" + gdata.sidx + "',' sord':'" + gdata.sord + "','nd':'" + gdata.nd + "','_search':'" + gdata._search + "','searchField':'" + ts. p.searchdata.searchField + "','searchString':'" + ts.p.searchdata.searchString + "','searchOper':'" + ts.p.searchdata.searchOper + "'}",
成功：函数（JSON，st）{ if (st == "success") { addJSONData(JSON.d, ts.grid.bDiv);如果（加载完成）{加载完成（）； } }
Insted 使用完整的 ajax 事件使用成功事件。这样可以防止双重json序列化。
我在单元格编辑中没有意识到的一件事： 假设我想编辑具有相同数据类型（int）的多个单元格。 我只有一种网络方法！而且我不能使用具有不同名称的相同数据类型超载！ 有人解决这种问题吗？
【讨论】：