Beispiele für JQuery EasyUI-Paging-Tutorials

Bei der Webentwicklung ist häufig Paginierung erforderlich. Wenn wir uns auf handgeschriebenen Code verlassen, ist möglicherweise viel Code vorhanden und der Stil sieht nicht gut aus. Hier finden Sie eine Einführung in die Paginierung von jquery easyui Funktion, die sehr praktisch und einfach ist

Nachdem Sie dann die erforderlichen Dateien gemäß dem „jquery EasyUI Framework Usage Document“ eingefügt haben, fügen Sie einfach den folgenden Code in $(function(){ }); ein:

 $('#pp').pagination(options);

Das Folgende stellt die spezifische Verwendung der Paginierung vor und schaut sich zunächst die Attribute an:

Attributname, Typbeschreibung, Standardwert

Gesamtzahl Legen Sie die Gesamtzahl der Datensätze fest wenn die Paginierung eingerichtet ist 1

pageSize-Anzahl pro Anzahl, die auf einer Seite angezeigt wird 10

pageNumber Number Wenn die Paginierung eingerichtet ist, die Anzahl der angezeigten Seiten 1

pageList-Array Benutzer können ändern die Größe jeder Seite,

pageList-Attributdefinition, wie viele Größen geändert werden können [10,20,30,50]

loading Boolean definiert, ob Daten falsch geladen werden

buttons-Array definiert benutzerdefinierte Schaltflächen, jede Schaltfläche enthält zwei Attribute:

iconCls: CSS-Klasse zum Anzeigen von

Hintergrundbild

handler: Handlerfunktion, wenn auf eine Schaltfläche geklickt wird, null

showPageList Boolesche Definition, ob die Seitenliste „true“ angezeigt werden soll

showRefresh Boolesche Definition, ob die Aktualisierungsschaltfläche „true“ angezeigt werden soll

beforePageText-Zeichenfolgenbezeichnung, die vor der

EingabefeldgruppePageafterPageText-Zeichen Die Bezeichnung der Zeichenfolge {pages}

displayMsg, die nach der Eingabefeldkomponente angezeigt wird, zeigt die Informationen einer Seite an.

Anzeige von {von} bis {bis} von {total} Elementen Ereignis Ereignisname Parameterbeschreibung onSelectPage pageNumber, pageSize Wird ausgelöst, wenn der Benutzer eine neue Seite auswählt.

Callback-Funktion

enthält zwei Parameter: pageNumber : die Anzahl der Seiten der neuen Seite pageSize: die Größe der neuen Seite onBeforeRefresh pageNumber, pageSize wird ausgelöst, bevor auf die Aktualisierungsschaltfläche geklickt wird. Wenn false zurückgegeben wird, wird der Aktualisierungsvorgang abgebrochen. onRefresh pageNumber, pageSize wird nach der Aktualisierung ausgelöst. onChangePageSize pageSize löst aus Demonstration, wenn die Seitengröße geändert wird

1. Datenextraktion und -anzeige.

DataGrid erhält Daten über das URL-Attribut. Beispiel: URL:'ListInfo.action'. Auf diese Weise werden die Daten durch Aufrufen der Methode in Action abgerufen. Was zurückgegeben wird, ist eine JSON-Zeichenfolge. Beachten Sie, dass JSON-Strings gemäß dem von DataGrid definierten Datenformat zusammengestellt werden müssen. Informationen zu diesem Datenformat finden Sie im Anhang meines vorherigen Artikels. Besonders hervorzuheben ist, dass der Wert des Gesamtfelds im JSON-String die Anzahl der Datenelemente ist, die für das Daten-Paging verwendet werden.

2. Paginierung der Daten.

Daten-Paging ist in Vordergrund-Paging und Hintergrund-Paging unterteilt, DataGrid wurde gekapselt. DataGrid definiert zwei Parameter: rows (die Anzahl der Elemente pro Seite) und page (die aktuelle Seitennummer). Diese beiden Parameter entsprechen den Attributen pageSize bzw. pageNumber. Der Benutzer kann es in den Attributen pageSize und pageNumber festlegen oder nicht festlegen, sodass der Standardwert verwendet wird. Wir müssen nur zwei Variablen in der Aktion „Private Int“ definieren und dann die erforderlichen Werte über SQL-Anweisungen abrufen. Die Paging-SQL-Anweisung (Oracle) lautet wie folgt:

Weisen Sie die Anzahl der extrahierten Daten dem Gesamtfeld zu, stellen Sie sie zusammen und geben Sie sie in einer JSON-Zeichenfolge zurück, und Sie können Paging erreichen. Natürlich ist

pagination:true,

auf jeden Fall erforderlich.

3. Datenoperationen.

Datenvorgänge können grob unterteilt werden in: Anzeigen, Löschen. Für die Anzeige können wir dies durch onClickRow- oder onDblClickRow-Ereignisse erreichen. Beispiel:

Zum Anzeigen doppelklicken.

$(function(){

$('#test').datagrid({

title:'数据列表',

width:900,

height:500,

.......(省略的属性)

onDblClickRow: function() {

var selected = $('#test').datagrid('getSelected');

if (selected){

window.open("DataView.action?Id="+selected.ID);

}}

Zum Löschen können Sie auf die Schaltfläche „Löschen“ klicken und die Löschmethode aufrufen. Die Löschschaltfläche kann beim Zusammenstellen des JSON-Strings dem OPERATION-Feld zugewiesen werden. Durch die Einstellung {field:'OPERATION', title: 'Operation', width: 120} kann die Löschschaltfläche auf der Seite angezeigt werden. Die Implementierung des Löschvorgangs ist wie folgt:

Auf diese Weise werden sowohl das Löschen der Seite als auch das Löschen der Datenbank realisiert.

function DelAff(){

$.messager.confirm('确认','是否真的删除?',function(r){ 

if (r){ 

var selected = $('#test').datagrid('getSelected');

if (selected){

var index = $('#test').datagrid('getRowIndex', selected);

$('#test').datagrid('deleteRow', index);

DeleteSubmit(selected);

}

}

});

}

function DeleteSubmit(selected)

{

var url="DataDelete.action?Id="+selected.ID;

$.post(

url     

);

}

4. Zu lösende Probleme

Wenn die zurückgegebenen Daten leer sind, liegt ein Fehler auf der Seite unter

IE-Browser

vor. Meine Lösung besteht darin, jedes Feld auf „“ zu setzen, sodass auf der Seite eine Zeile mit leeren Inhaltsdaten angezeigt wird. Wenn Sie auf dieses Problem gestoßen sind und es gelöst haben, geben Sie mir bitte einen Rat.

Das obige ist der detaillierte Inhalt vonBeispiele für JQuery EasyUI-Paging-Tutorials. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!