Реализация jQGrid jQuery с форматированием ASP.Net и JSON - PullRequest
10 голосов
/ 08 октября 2008

Кто-нибудь смог реализовать плагин сетки JQuery, jqGrid? Я пытаюсь реализовать пейджинг JSON, и мне кажется, что я уже близко, но меня также затопляют несущественные детали. Если бы кто-нибудь мог опубликовать пример кода, я был бы очень признателен.

Ответы [ 8 ]

9 голосов
/ 11 января 2009

Нашел ваше сообщение, когда я пытался сделать это для своего проекта. Я получил это работает. Для тех, кому это нужно в будущем, 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-анализатор и строковый преобразователь . Наряду с работой с ASP.NET этот исправленный код также более безопасен , поскольку оператор eval пропал.

РЕДАКТИРОВАТЬ: Я должен был также заметить, что вам, возможно, придется внести подобные изменения в grid.celledit.js, grid.formedit.js, grid.inlinedit.js и grid.subgrid.js.

2 голосов
/ 11 января 2009

Я просто использую jTemplates для пейджинга на стороне клиента с помощью jQuery и ASP.NET. Я сделал пост в блоге, который вы можете найти здесь: http://www.aaron -powell.com / blog.aspx? Id = 1209

В нем показано, как создать шаблонное расположение данных, вернуть данные из ASP.NET и затем реализовать решение для пейджинга.

1 голос
/ 03 апреля 2009

Вы можете использовать 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 будет:

url: '<%= ResolveUrl("~/Person/GetAllPeople") %>',
0 голосов
/ 28 января 2009

Мой инвентарь:

data: "{'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 + "'}",

success: function (JSON, st) { if (st == "success") {addJSONData (JSON.d, ts.grid.bDiv); if (loadComplete) {loadComplete (); }}

Введено с использованием завершенного события ajax. Этот способ предотвращает двойное разделение JSON.

Только одна вещь, которую я не осознал при редактировании ячейки: Предположим, что я хочу редактировать несколько ячеек с одним и тем же типом данных (int). У меня есть только один веб-метод! и я не могу oveload с тем же типом данных с другим именем! Кто-нибудь решает такую ​​проблему?

0 голосов
/ 11 января 2009

Я думаю, что вы можете заставить jqgrid работать с json & asp.net без изменения grid.base.js и других файлов jqgrid, вы должны использовать свойство datatype для определения вашего собственного пользовательского вызова ajax и определения читателя json, jqgrid будет затем используйте пользовательский вызов ajax и ридер каждый раз, когда сетка перезагружается.

Процесс похож на xml, вы просто определяете xmlreader вместо jsonreader.

Все свойства jsonreader определены в онлайн-документации

Примеры пользовательских типов данных приведены в разделе «Функция как тип данных» на демонстрационной странице live в разделе «Новое в 3.3»

0 голосов
/ 21 ноября 2008

d в json - встроенная защита от потенциального подвига

пример Я обнаружил, что использует mvc

Полная информация здесь

0 голосов
/ 21 ноября 2008

Плагин flexgrid довольно редок по сложности, однако в небольшом разделе демо-страницы рассказывается о создании сериализованного объекта 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
0 голосов
/ 08 октября 2008

Я просто колеблюсь, пытаясь собрать все воедино. Моя первая задача - просто генерировать правильный ответ JSON. Похоже, мой возвращенный класс сериализуется как свойство с именем 'd' - это вещь JQuery или соглашение о веб-методах ASP.Net? Боюсь, что 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);
                }
            });
        });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...