jqgrid Strona 1 z x pager

Question

Próbuję dowiedzieć się, jak korzystać z funkcjonalności stronicowania jqGrid. Obecnie utknąłem na stronie 1 z 4. Nieważne, czy naciskam przycisk Dalej, czy nie. Pozostaje tylko 1.

Używam ASP.Net z usługą sieciową do zapełniania moich danych JSON. Jak przechwycić zdarzenie z klienta, aby wypełnić właściwość usługi internetowej, aby przywrócić prawidłową wartość?

Każda pomoc jest doceniana.

Answer 1

Po naciśnięciu przycisku "Dalej" nowe żądanie zostanie wysłane na serwer. Żądanie będzie zawierać parametry page=2 i, na przykład, rows=10 jako część adresu URL (jeśli chcemy uzyskać następne 10 wierszy drugiej strony).

Twój kod serwera powinien odczytać te parametry i odesłać odpowiednie wiersze danych. Dane JSON odesłać z serwera powinien wyglądać po

{ 
    "total": "5", 
    "page": "2", 
    "records": "55", 
    "rows" : [ 
    {"id" :"21", "cell" :["cell11", "cell12", "cell13"]}, 
    {"id" :"22", "cell" :["cell21", "cell22", "cell23"]}, 
     ... 
    {"id" :"30", "cell" :["cell31", "cell32", "cell33"]}, 
    ] 
} 

(patrz http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#json_data). Dane muszą więc zawierać poprawną wartość dla page (strona = 2). Ogólnie możliwe jest, że teraz masz mniej danych, jak poprzednio, a ty zwrócisz numer strony 1 na żądanie, aby uzyskać numer strony 2.

Więc sugeruję, że obecnie twój kod serwera nie zwróci poprawna wartość page na wyjściu.

ZAKTUALIZOWANY: OK Jeff. Kontynuuję moją odpowiedź w jqgrid setGridParam datatype:local i opublikuję, jak obiecuje się kod, jak stronicowanie po stronie serwera, sortowanie i wyszukiwanie (lub wyszukiwanie zaawansowane).

Przede wszystkim w tym przykładzie nie będę naprawdę realizować sortowania i wyszukiwania i tylko symulować stronicowania, gdzie masz problem teraz. Prawdziwe stronicowanie, sortowanie i wyszukiwanie powinno być zaimplementowane jako odpowiednie instrukcje do bazy danych SQL, w której dane istnieją. Sortowanie następuje po ORDER BY, przeszukując do WHERE i przywołując do konstrukcji, takich jak konstrukty, takie jak TOP(x), lub ,. Ale to wszystko nie jest przedmiotem twojego pytania. Więc redukuję wszystko do prostej symulacji stronicowania danych.

zacznę z kodem ASMX Metoda WWW:

public JqGridData TestMethod (int page, int rows, string sidx, string sord, 
    bool _search, string searchField, string searchOper, string searchString) { 
    // for advance search use "string filters" instead of the last three parameters 
    int recordsCount = 205; 

    int startIndex = (page - 1) * rows; 
    int endIndex = (startIndex + rows < recordsCount) ? 
        startIndex + rows : recordsCount; 
    List<TableRow> gridRows = new List<TableRow> (rows); 
    for (int i = startIndex; i < endIndex; i++) { 
     gridRows.Add (new TableRow() { 
      id = i, 
      cell = new List<string> (2) { 
       string.Format("Name{0}", i), 
       string.Format("Title{0}", i) 
      } 
     }); 
    } 

    return new JqGridData() { 
     total = (recordsCount + rows - 1)/rows, 
     page = page, 
     records = recordsCount, 
     rows = gridRows 
    }; 
} 

których zajęcia JqGridData i TableRow są zdefiniowane jak następuje:

public class TableRow { 
    public int id { get; set; } 
    public List<string> cell { get; set; } 
} 
public class JqGridData { 
    public int total { get; set; } 
    public int page { get; set; } 
    public int records { get; set; } 
    public List<TableRow> rows { get; set; } 
} 

Mamy pominąć żadnej weryfikacji parametrów wejściowych TestMethod do sprawiają, że przykład kodu jest bardziej czytelny.

Teraz kod klienta:

$("#list").jqGrid({ 
    url: './MyTestWS.asmx/TestMethod', 
    datatype: 'json', 
    mtype: 'POST', 
    ajaxGridOptions: { contentType: 'application/json; charset=utf-8' }, 
    serializeGridData: function (postData) { 
     if (postData.searchField === undefined) postData.searchField = null; 
     if (postData.searchString === undefined) postData.searchString = null; 
     if (postData.searchOper === undefined) postData.searchOper = null; 
     //if (postData.filters === undefined) postData.filters = null; 
     return JSON.stringify(postData); 
    }, 
    jsonReader: { 
     root: function (obj) { return obj.d.rows; }, 
     page: function (obj) { return obj.d.page; }, 
     total: function (obj) { return obj.d.total; }, 
     records: function (obj) { return obj.d.records; } 
    }, 
    // you can also use following more simple form of jsonReader instead: 
    // jsonReader: { root: "d.rows", page: "d.page", total: "d.total", 
    //    records: "d.records", id: "d.names" } 
    colModel: [ 
     { name: 'name', label: 'Name', width: 250 }, 
     { name: 'title', label: 'Title', width: 250 } 
    ], 
    rowNum: 10, 
    rowList: [10, 20, 300], 
    sortname: 'name', 
    sortorder: "asc", 
    pager: "#pager", 
    viewrecords: true, 
    gridview: true, 
    rownumbers: true, 
    height: 250, 
    caption: 'My first grid' 
}).jqGrid('navGrid', '#pager', {edit: false, add: false, del: false, search: true}); 
//    {}, // use default settings for edit 
//    {}, // use default settings for add 
//    {}, // delete instead that del:false we need this 
//    {multipleSearch : true} // enable the advanced searching 
//    ); 

W kodzie używam tej samej techniki jak w jqgrid setGridParam datatype:local ale kod serializeGridData funkcja jest trochę inna. Ponieważ używamy metody POST, a nie GET do pobierania danych z serwera , wszystkie parametry wejściowe metody internetowej muszą zawsze być ustawione na.Z drugiej strony jqGrid ustawia nie zawsze parametry searchField, searchOper i searchString, ale tylko jeśli _search=true. Na przykład przy pierwszym obciążeniu jqGrid, _search=false i searchField, searchOper i searchString nie są zdefiniowane w postData. Aby rozwiązać problem, inicjujemy niezdefiniowane parametry za pomocą null.

Aby zaimplementować sortowanie, należy użyć parametrów sidx (indeks sortowania) i sord (kierunek sortowania: "asc" lub "desc").

Aby zaimplementować wyszukiwanie, należy użyć innych parametrów: _search, searchField, searchOper, searchString.

trakcie zaawansowanego przeszukiwania zamiast searchField, searchOper, searchString parametry parametr filters należy (patrz komentowane linii). Dane muszą być dekodowane w odniesieniu do deserializera JSON. Więc musi być ustawiony multipleSearch : true w jqgrid. Funkcja serializeGridData należy wymienić na

serializeGridData: function (postData) { 
    if (postData.filters === undefined) postData.filters = null; 
    return JSON.stringify(postData); 
} 

i prototyp metody internetowej powinna zostać zmieniona na

public JqGridData TestMethod (int page, int rows, string sidx, string sord, 
    bool _search, string filters) 

zdekodować parametr filters można użyć takiego prostego kodu:

if (_search && !String.IsNullOrEmpty (filters)) { 
    JavaScriptSerializer serializer = new JavaScriptSerializer(); 
    jqGridSearchFilter searchFilter = 
     serializer.Deserialize<jqGridSearchFilter> (filters); 
    // use the searchFilter here 
} 

gdzie klasa jqGridSearchFilter może być zdefiniowana następująco:

public class jqGridSearchFilterItem { 
    public string field { get; set; } 
    public string op { get; set; } 
    public string data { get; set; } 
} 
public class jqGridSearchFilter { 
    public string groupOp { get; set; } 
    public List<jqGridSearchFilterItem> rules { get; set; } 
} 

Mam nadzieję, że ta informacja wystarczy, aby zaimplementować wszelkiego rodzaju użycie jqGrid w odniesieniu do metody ASMX Web.

Użyłem tutaj najprostszego wysyłania danych z serwera do klienta z dodatkowym id poza głównymi danymi. Jeśli jedna z kolumn, które masz w tabeli to id, możesz nieco zmniejszyć wysyłanie danych do serwera. Aby uzyskać więcej informacji, patrz Jqgrid 3.7 does not show rows in internet explorer.

Answer 2

OK Odpowiadam na to, kiedy wziąłem to, co powiedział Oleg, ale zrozumiałem dokładnie, co miał na myśli.

Moje połączenie .ajax jest zawijane w funkcję, która przekazuje dane postdata jako parametr. Nie mogłem znaleźć żadnej dokumentacji tego parametru, ale pomyślałem, że być może to właśnie tam zawarto wartość strony. Jak widzisz, zrobiłem alert z postdata.page i niski i oto dostałem wartość (na podstawie kliknięcia następnego przycisku).

Tak więc utworzyłem parametr w moim webservice nazwie page (integer).

Tak jak na marginesie, przekazujesz do ASP swoją wartość całkowitą z jQuery.usługa Net tak:

data: "{'page':'" + postdata.page + "'}" 

Poniżej znajduje się pełna funkcja:

function processrequest(postdata) { 
alert(postdata.page); 
$(".loading").show(); 
$.ajax({ 
    type: "POST", 
    data: "{'page':'" + postdata.page + "'}", 
    datatype: "json", 
    url: "../webServices/myTestWS.asmx/testMethod", 
    contentType: "application/json; charset-utf-8", 
    complete: function (jsondata, stat) { 
     if (stat == "success") { 
      var thegrid = jQuery("#list")[0]; 
      var jsonObject = (eval("(" + jsondata.responseText + ")")); 
      thegrid.addJSONData(jsonObject.d); 
      $(".loading").hide(); 
     } else { 
      $(".loading").hide(); 
      alert("Error with AJAX callback"); 
     } 
    } 
}); 

}