Heim >Web-Frontend >js-Tutorial >Was ist Easyui?
Was ist Easyui?
- 怪我咯Original
- 2017-06-27 11:35:442278Durchsuche
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).插件名("方法名"[参数值]);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数据 3. Das Datagrid ist erstellt in HTML über dem 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. 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". Zeile stellt die ausgewählte Zeile dar, einschließlich aller Daten einschließlich ID, Datenformat: 1.form("clear"): Formular löschen. Wenn keine Notwendigkeit besteht, Ajax-Rückgabedaten zu verarbeiten, kann die Übermittlung wie folgt abgekürzt werden: 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!-Tag.
5.Datagrid-Attribut
6. Spaltenüberschriften
<thead> <tr><th field="在此列显示的数据库字段"width="">列标题</th><th field="在此列显示的数据库字段"width="">列标题</th> </tr></thead>
7. Ausgewählte Zeilen abrufen
var row=$(selector).datagrid("getSelected"){name01:"value01",name02:"value02"} 8. Die Daten im Formular müssen nach der Änderung neu geladen werden:
$(selector).datagrid("reload");
Drei Formulare
2. Daten laden
$(selector).form("load",{name:"myName"});//加载自定义数据
$(selector).form("load",row);//加载datagrid选中行数据 3. Formularübermittlung
$(selector).form('submit',{
url:xxx,
onSubmit:function(){
return $(this).form("validate")；//验证，只要在前台验证通过后才提交
},
success:function(){}//处理返回结果
})
$(selector).form("submit");In Verbindung stehende Artikel
Mehr sehen