Das DataGrid von EasyUi unterstützt die serverseitige Pagination, es gibt jedoch weniger offizielle Informationen. Im Folgenden fasst zwei serverseitige Paginationsmechanismen von DataGrid zusammen. Einer ist der DataGrid -Standardmechanismus , und der andere besteht darin , AJAX zu verwenden, um Daten zu erhalten und DataGrid zu füllen , die gemäß der Situation verwendet werden können.
1: Verwenden Sie den DataGrid -Standardmechanismus
Hinter der Bühne:
public JsonResult getQuestionUnit () {// Easyi DataGrid selbst übergibt Zeilen und Seite int pageSize = convert.toint32 (Anfrage ["Zeilen"]); int pagenum = convert.toint32 (Request ["Seite"]); var dal = new qSQuestionunitdal (); var frageUnits = dal.getList ("", pagenum -1, pageSize); // Der in den Vordergrund zurückgegebene Wert muss insgesamt und die Zeilen var easyuipages = new Dictionary <String, Object> () enthalten; easyuipages.add ("Total", FrageUnits. easyuipages.add ("Zeilen", FrageUnits); return JSON (EasyUipages, JsonRequestBehavior.AllowGet); } Frontend: (function () {(function () {('#dgd').datagrid({ pageNumber: 1, //url: "@ViewBag.Domain/Paper/GetQuestionUnit?arg1=xxx", columns: [[ { field: 'Id', title: 'id', width: 100 }, { field: 'Name', title: 'name', width: 100 }, ]], Pagination: True, Rownumbers: True, Pagelist: [3, 6]}); var p = ('#dgd'). datagrid ('getPager'); ('#dgd'). datagrid ('getPager'); {Seiten} Seiten ', DisplayMsg:' Total {Total} Data ',});Sie müssen die ('#dgd'). DataGrid -Methode an platzieren
$ (function () {});Wenn Sie versuchen, die ('#DGD'). DataGrid -Methode über andere JS -Methoden anzurufen, erhalten Sie nicht das richtige Paging -Ergebnis.
Wie Sie sehen können, wurde die Zeilen -URL im obigen JS -Code ausgezeichnet. Wenn wir keine anderen Vorgänge ausführen müssen und vorhaben, Daten abzufragen, sobald die Seite geladen ist, können wir den Code nicht aussprechen. Manchmal müssen jedoch manchmal die URL -Parameter, wie z. B. der Wert von Arg1, bestimmte Operationen an der Schnittstelle ausführen und sie dann über JS -Code erhalten. Zu diesem Zeitpunkt sollte die URL kommentiert und an andere Orte zugeordnet werden, z. B.:
var Step1ok = function () {$ ('#dgd'). datagrid ({url: "@viewbag.domain/papier/getQuestionUnit? arg1 = xxx",});};Im obigen Code können wir davon ausgehen, dass eine Schaltfläche in der Schnittstelle geklickt und die Methode Step1OK aufgerufen wird. Dann werden die Daten an URL abgefragt und der Benutzeroberfläche angezeigt.
Zwei: Verwenden Sie AJAX, um Daten zu erhalten und DataGrid zu füllen
Wenn wir eine größere Flexibilität verfolgen möchten, können wir den Standardmechanismus von DataGrid nicht verwenden, dh die URL angeben, um Daten zu erhalten, sondern AJAX, um Daten zu erhalten und DataGrid zu füllen. Auf diese Weise müssen Sie noch die ('#dgd'). DataGrid -Methode platzieren
$ (function () {});Der Hintergrundcode bleibt unverändert, aber das Klicken auf eine Schaltfläche und die Aufruf von Schritt1OK -Methoden erfolgt:
var Step1ok = Funktion () {.Messager.Progress (Titel: 'pleasewaiting', msg: 'loadingdata ...', text: 'processing .....'); $ (p) .pagination ({OnselectPage: function (pageNumber, pageSize) {alert ('OnselectPage Pagenumber:' + pageNumber + ', pageSize:' + pageSize); getData (pageNumber, pageSize);}}); getData (1,3);};Wenn der erste Anruf aufgerufen wird, werden 3 Datenstücke auf der ersten Seite erhalten:
getData (1,3);
Dann können wir sehen, dass wir gleichzeitig auch einen Zeitprozessor für das OnselectPage -Ereignis der Pagination erstellt haben, so dass wir, wenn die Seite ein weiterer Tag ist, zu:
getData (Pagenumber, pageSize);
Da wir den ursprünglichen Mechanismus von DataGrid für die Pagination umgangen haben, haben wir außerdem unser eigenes Cover $ .Messager.Progress übernommen und dann die Abdeckung im Erfolg von Ajax aufgedeckt.
Die GetData -Methode lautet wie folgt:
var getData = function (Seite, Zeilen) {.ajax ({type: "post", url: "@viewbag.domain/papier/getQuestionUnit", Daten: "page =" + page + "& rows =" + Zeilen, Fehler: Funktion (xmlhttprequest, textstatus, errorthdrown) {alert) (textatus, {{{{alert) {{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{alert) (text “; URL: "@viewbag.domain/papier/getQuestionUnit", Daten: "Page =" + Seite + "& rows =" + Zeilen, Fehler: Funktion (xmlhttprequest, textstatus, errorthrown) {alert (textstatus); //.each(data,function(i,Item)//alert(Item);//).Das obige ist die vollständige Beschreibung der beiden Methoden der Easyui -Pagination Paging, die Ihnen vom Herausgeber vorgestellt wurde. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie mehr wissen möchten, achten Sie bitte auf die Website wulin.com!