Question

有没有人能够实现JQuery网格插件jqGrid？我正在尝试实现JSON分页，我觉得我已经接近了，但我也被无关紧要的细节所淹没。如果有人可以发布一些示例代码，我将非常感激。

Answer 1

在我尝试为我的项目执行此操作时找到了您的帖子。我搞定了。对于将来需要它的任何人来说，jqGrid将无法与JSON和ASP.NET一起开箱即用。你需要对grid.base.js进行一些小的修改。在第829行附近，用以下内容替换json案例部分：

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进行类似的编辑。

Answer 2

我只是使用jQuery和ASP.NET进行客户端分页的jTemplates。我在上面写了一篇博文，你可以在这里找到：http://www.aaron-powell.com/blog.aspx?id=1209

它介绍了如何创建模板化数据位置，从ASP.NET返回数据，然后实现分页解决方案。

Answer 3

您可以使用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
                              }
               };
}

网址的jqGrid配置为：

url: '<%= ResolveUrl("~/Person/GetAllPeople") %>',

Answer 4

我只是在试图将所有东西拉到一起。我首先关心的是生成正确的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);
                }
            });
        });

Answer 5

flexgrid插件在doumentation上非常稀疏但是在演示页面的一小部分中有一个关于创建json序列化对象的啧啧，这有点误导，因为网格需要特定的格式，我已经移植了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

Answer 6

json中的d是针对潜在利用的内在防御

example我发现使用mvc

完整信息here

Answer 7

我认为你可以让jqgrid与json＆amp; asp.net没有修改grid.base.js和其他jqgrid文件，你必须使用datatype属性来定义你自己的自定义ajax调用并定义一个json阅读器，jqgrid将在每次网格重新加载时使用你的自定义ajax调用和阅读器

对于xml，您只需定义一个xmlreader而不是jsonreader，该过程类似。

jsonreader的所有属性都在online documentation

中定义

有关自定义数据类型的示例，请参阅“{3.3}中的新内容”下的live demo page中的“作为数据类型”

Answer 8

我的实施：

数据：“{'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）; if（loadComplete）{loadComplete（）; }}

使用完整的ajax事件使用成功事件。这种方式可以防止双json seralize。

我在细胞编辑中没有意识到的一件事：假设我想编辑具有相同数据类型（int）的多个单元格。我只有一个网络方法！并且我无法使用不同名称的相同数据类型进行过度加载！有人解决这类问题吗？

使用ASP.Net和JSON格式实现jQuery的jgGrid

8 个答案: