Heim > Web-Frontend > js-Tutorial > Hauptteil

Was ist Easyui?

怪我咯
Freigeben: 2017-06-27 11:35:44
Original
2252 Leute haben es durchsucht

1 Übersicht

1. Was ist easyui?

easyui ist eine Sammlung von Benutzeroberflächen-Plug-Ins, die auf jQuery basieren. Das heißt, die von easyui verwendete Haupttechnologie ist jQuery und stellt Plug-Ins bereit, die im Benutzer angezeigt werden Schnittstelle.

2.easyui ist eine Erweiterung des HTML-Plug-Ins. Die Verwendung von easyui zum Erstellen eines Plug-Ins muss daher mit dem entsprechenden HTML-Plug-In kombiniert werden, z. B. der von bereitgestellten Validatebox easyui textboxfilebox dateboxdatatimebox usw. muss im -Tag implementiert sein.

3.data-options

wird verwendet, um Plug-Ins zu instanziieren, d. h. um neue Funktionen zum EasyUI-Basis-Plug-In hinzuzufügen. in. Neue Funktionen können zentralisiert werden. Geschrieben im Datenoptionsattribut , wird der Attributwert in einfache Anführungszeichen gesetzt und die beiden Attribute werden durch Kommas getrennt. Neue Features können auch einzeln aufgeführt werden.

4. Jedes Plug-In kann als Container zum Hinzufügen anderer Plug-Ins betrachtet werden. Die Methode zum Hinzufügen ist:

Referenz andere Plug-Ins über die entsprechende Attribut-ID, z. B. das Hinzufügen einer Symbolleiste „toolbar“ = „#toolbar“ und das Hinzufügen von Schaltflächen „buttons“ = „#buttons“.

5. Syntaxformat zum Aufrufen der Plug-In-Funktion:

$(selector).插件名("方法名"[参数值]);
Nach dem Login kopieren

6.href Reload URL

  • href: Statisches Laden, Laden bestimmter Seiteninformationen.

  • Neuladen: dynamisches Laden, gesteuert durch Ereignisse, wie z. B. das Klicken auf eine Schaltfläche zum Laden bestimmter Seiteninformationen.

  • URL: Verweist auf Serverressourcen und ruft Daten vom Server ab.

Zwei Datagrid-Datengitter

1. Funktion

Daten Grid wird hauptsächlich verwendet, um die über Ajax aus der Datenbank erhaltenen Daten in tabellarischer Form anzuzeigen.

2. Das vom Server zurückgegebene JSON-String-Format:

"rows":[{},{}]",total":int数据
Nach dem Login kopieren

3. Das Datagrid ist erstellt in HTML über dem

-Tag.

4. Nachdem die Seite geladen wurde, ruft Datagrid automatisch Daten vom Server über Ajax ab und die URL muss beim Instanziieren des Plug-Ins angegeben werden.

5.Datagrid-Attribut

  • Symbolleiste hinzufügen: toolbar="#toolbar".

  • Zeilennummern anzeigen: rownumbers="true".

  • Es ist nur die Auswahl einer einzelnen Zeile zulässig: singleSelect="true".

  • Passen Sie die Spalten an die Breite der Tabelle an: fitColumns="true":.

  • Paginierungsleiste anzeigen: pagination="true".

6. Spaltenüberschriften

<thead>  <tr><th field="在此列显示的数据库字段"width="">列标题</th><th field="在此列显示的数据库字段"width="">列标题</th>  </tr></thead>
Nach dem Login kopieren

7. Ausgewählte Zeilen abrufen

var row=$(selector).datagrid("getSelected")
Nach dem Login kopieren

Zeile stellt die ausgewählte Zeile dar, einschließlich aller Daten einschließlich ID, Datenformat:

{name01:"value01",name02:"value02"}
Nach dem Login kopieren

8. Die Daten im Formular müssen nach der Änderung neu geladen werden:

$(selector).datagrid("reload");
Nach dem Login kopieren

Drei Formulare

1.form("clear"): Formular löschen.

2. Daten laden

$(selector).form("load",{name:"myName"});//加载自定义数据
$(selector).form("load",row);//加载datagrid选中行数据
Nach dem Login kopieren

3. Formularübermittlung

$(selector).form('submit',{
                           url:xxx,
                           onSubmit:function(){
                                    return $(this).form("validate");//验证,只要在前台验证通过后才提交
                                               },
                           success:function(){}//处理返回结果
})
Nach dem Login kopieren

Wenn keine Notwendigkeit besteht, Ajax-Rückgabedaten zu verarbeiten, kann die Übermittlung wie folgt abgekürzt werden:

$(selector).form("submit");
Nach dem Login kopieren

4. Verwenden Sie easyui. Nach dem Absenden des Formulars springt das Formular nicht automatisch. Wenn Sie springen müssen, müssen Sie die Sprungressource in der Rückruffunktion festlegen, z. B. window.location.href=". ".

Das obige ist der detaillierte Inhalt vonWas ist Easyui?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage