10

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

4

8 回答 8

9

在我尝试为我的项目执行此操作时找到了您的帖子。我让它工作了。对于将来需要它的任何人,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 解析器和 stringifier。与 ASP.NET 一起使用时,此修改后的代码也更安全,因为 eval 语句已消失。

编辑:我还应该注意到您可能必须对 grid.celledit.js、grid.formedit.js、grid.inlinedit.js 和 grid.subgrid.js 进行类似的编辑。

于 2009-01-11T10:45:51.750 回答
2

我刚刚使用 jTemplates 使用 jQuery 和 ASP.NET 进行客户端分页。我写了一篇关于它的博客文章,你可以在这里找到:http ://www.aaron-powell.com/blog.aspx?id=1209

它着眼于如何创建模板化数据位置、从 ASP.NET 返回数据,然后实现分页解决方案。

于 2009-01-11T11:42:24.223 回答
1

您可以使用 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") %>',
于 2009-04-02T21:05:50.213 回答
0

我只是挣扎着试图把所有东西都放在一起。我首先关心的是生成正确的 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);
                }
            });
        });
于 2008-10-08T01:29:17.257 回答
0

flexgrid 插件在文档上非常稀疏,但是在演示页面的一小部分中,有一个关于创建 json 序列化对象的 tut,这有点误导,因为网格需要特定格式,我已经为 xml 选项移植了 php 代码用一点猴子油脂,你可以对 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
于 2008-11-21T13:04:05.370 回答
0

json 中的 d 是针对潜在漏洞的内置防御

我发现使用 mvc 的示例

完整信息在这里

于 2008-11-21T14:34:37.153 回答
0

我认为您可以使 jqgrid 与 json 和 asp.net 一起使用,而无需修改 grid.base.js 和其他 jqgrid 文件,您必须使用 datatype 属性来定义您自己的自定义 ajax 调用并定义一个 json 阅读器,然后 jqgrid 将使用您的每次重新加载网格时自定义 ajax 调用和读取器。

这个过程与 xml 类似,您只需定义一个 xmlreader 而不是 jsonreader。

jsonreader的所有属性都在在线文档中定义

有关自定义数据类型的示例,请参阅实时演示页面中“3.3 中的新功能”下的“作为数据类型的函数”

于 2009-01-11T19:24:56.070 回答
0

我的工具:

数据:"{'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){如果(st ==“成功”){addJSONData(JSON.d,ts.grid.bDiv);如果(加载完成){加载完成();} }

Insted 使用完整的 ajax 事件使用成功事件。这种方式可以防止双重 json 序列化。

只有一件事我没有意识到单元格编辑:假设我想编辑具有相同数据类型(int)的多个单元格。我只有一种网络方法!而且我不能使用具有不同名称的相同数据类型超载!有没有人解决这种问题?

于 2009-01-28T07:29:36.093 回答