Im vorherigen Artikel wurde die Erfahrung der Erfahrung des Entwicklungsrahmens auf der Grundlage von Bootstrap Metronic [II] -Listenpaginierungsverarbeitung und der Verwendung von Plug-in JStree, die Datenpagierungsverarbeitung eingeführt, das Bootstrap-Paginator-Plug-In wurde verwendet und die Baumliste wurde verwendet, das Jstree-Plug-In wurde verwendet. In diesem Artikel wird weiterhin die häufig verwendete Steuerelemente -Select2 auf der Seite bearbeiten. Diese Steuerung kann die herkömmliche Steuerung der Dropdown-Liste ausgewählten Dropdown-Liste anreichern und mehr Funktionen und eine bessere Benutzererfahrung liefern.
1. Einführung in Select2 Control
Dieses Plug-In ist ein Erweiterungs-Plug-In, das auf Select basiert und umfangreichere Funktionen und Benutzererfahrungen bieten kann. Die offizielle Adresse der GitHub -Website lautet: https://select2.github.io/. Für bestimmte Anwendungsfälle finden Sie in der Adresse: https://select2.github.io/examples.html.
Im gesamten Framework haben wir viele Select2-Steuerelemente verwendet, um die Anzeige von Inhalten zu verarbeiten, einschließlich einer Dropdown-Liste mit einer Auswahl (einschließlich eines Kaskadierungs-Auswahlfelds), einer ausgewählten Dropdown-Liste, einer Tree-Dropdown-Liste usw. Der Schnittstelleneffekt ist wie folgt.
1) Der Effekt der Kaskadierungsschnittstelle von Provinzen, Städten und Verwaltungsregionen unter der Bearbeitungsschnittstelle . Wenn Sie eine Provinz auswählen, wird die Stadt unter der entsprechenden Provinz geladen. Wenn Sie eine Stadt auswählen, werden die Verwaltungsregionen unter der Stadt weiterhin geladen, wodurch der Dropdown-List-Effekt der Multi-Level-Korrelation erreicht wird.
2) Dropdown-Liste mehrerer Auswahl unter der Bearbeitungsschnittstelle
Wenn wir den Inhalt jedoch auswählen, zeigt das System die Listendaten automatisch ohne Auswahl an, was sehr intuitiv und freundlich ist, wie unten gezeigt.
3) Dropdown-Liste der Baumliste
Manchmal haben einige unserer Daten hierarchische Beziehungen wie die Organisation, die Liste der oberen Ebene usw.
2. Analyse des tatsächlichen Verwendungscodes der Select2 -Steuerung
1) grundlegender Schnittstellencode und Betrieb
Verwenden Sie die Steuerung aus Select2, normalerweise auf der regulären Auswahlsteuerung, einfach fest (setzen Sie die Klasse auf Select2).
<div> <div> <label> Wichtige Ebene </label> <div> <select id = "Bedeutung" name = "Bedeutung" placeholder = "Bedeutung ..."> </select> </div> </div> </div> <div> <div> <div> <label> Erkennung </label> </select id = "Erkennung".
Wenn es sich um eine festgelegte Liste handelt, wird nur der unten gezeigte Optionsinhalt festgelegt.
<div> <div> <label> Rauchen </label> <div> <select id = "rauchen" name = "rauchen" type = "text" placeholder = "rauchen ..."> <option> rauchen </option> <option> nicht rauch </option> </select> </div> </div> </div> </div>
Der einfache SELECT2 -Kontrollinitialisierungscode lautet wie folgt.
$ (Dokument) .Ready (function () {$ (". JS-Example-Basic-Single"). Select2 ();});Wenn im Allgemeinen mehrere Elemente ausgewählt werden dürfen, setzen Sie multiple = "multiple" wie im folgenden Code gezeigt.
<select id = "antwortedemand" name = "antwortedemand" multiple = "multiple"> </select>
2) Asynchroner Datenbindungsoperation
Im Allgemeinen werden die Daten unserer ausgewählten Steuerung dynamisch aus der Datenbank geladen, sodass die Daten normalerweise erhalten und durch AJAX gebunden werden.
Basierend auf der Berücksichtigung der Wiederverwendbarkeit von Code -Wiederverwendungen schreiben wir eine gemeinsame JS -Funktion, um den Code für Bindungsvorgänge zu reduzieren und die Wiederverwendbarkeit der Code zu verbessern.
// Wörterbuchinhalte an die angegebene SELECT -Steuerfunktion Bindelect (Strlname, url) {var control = $ ('#' + Strlname); // Set Select2's Processing Control.select2 ({duldClear: true, formatResult: formatResult, formatelection: formatelection, Escapemarkup: Funktion (m) {return m;}}); // Binden Sie den Inhalt von Ajax $ .getJson (URL, Funktion (Daten) {control.empty (); // Das Dropdown-Feld $ .each (Daten, Funktion (i, item) {control.append ("<option value = '" + item.value + ">" + item.text + "</option>");});});}); });Auf diese Weise können die an das öffentlichen Wörterbuchmodul gebundenen Daten weiter wie folgt eingekapselt und verarbeitet werden.
// Binden Sie den Dictionary -Inhalt an die angegebene Kontrollfunktion BindDictItem (Strlname, dikttyPename) {var url = '/dictData/getDictjson? DictTypeName =' + cododeuri (dicttyPename); Bindelect (Strlname, URL);}Auf diese Weise initialisieren wir die Select2 -Steuerung und binden den entsprechenden Wörterbuch- oder anderen Daten dynamisch. Dies kann durch den folgenden Initialisierungscode erreicht werden. Unter ihnen ist BindDictItem die Operation, die den Wörterbuchinhalt direkt bindet. ist der Betrieb der Funktionsverarbeitung wie $ ("#provinz"). on ("Change", Funktion (e) {}); Verarbeitet den Verknüpfungsvorgang, der die Änderungen im ausgewählten Inhalt übernimmt.
// Wörterbuchinformationen initialisieren (Dropdown List) -Funktion initdictItem () {// zweite Zuweisung Referenz BindDictItem ("Bereich", "Marktpartition"); BindDictItem ("Branche", "Kundenbranche"); BindDictItem ("Note", "Kundenebene"); BindDictItem ("CustomerType", "Kundentyp"); BindDictItem ("Quelle", "Kundenquelle"); BindDictItem ("CreditStatus", "Credit Rating"); BindDictItem ("Stage", "Kundenbühne"); BindDictItem ("Status", "Kundenstatus"); BindDictItem ("Bedeutung", "Wichtigkeit"); // Binden Sie die Provinz-, Stadt- und Verwaltungsregion (Verknüpfungsverarbeitung) Bindelect ("Provinz", "/Provinz/GetAllProvincenamedictjson"); $ ("#Provinz"). On ("change", function (e) {var provincename = $ ("#provinz"). Val (); bindelect ("city", "/city/getCitysByProvincenamedictjson? Provincename ="+ provincename);}); $ ("#City"). On ("Change", Funktion (e) {var CityName = $ ("#City"). Val (); Bindelect ("District", "/District/GetDistrictByCityNamedictjson? CityName ="+ CityName);}); }In Bezug auf die vom MVC-Controller zurückgegebenen Daten geben wir eine JSON-Datenliste auf die Front-End-Seite zurück, und ihr Datenformat ist wie folgt.
[{"Text": "", "value": "}, {" text ":" akademische Konferenz "," Wert ":" Akademische Konferenz "}, {" text ":" Friend Introduction "," Wert ":" Friend Introduction "}, {" Text ":" Werbemedien "," Wert ":" Werbemedien "}"}]Auf diese Weise werden die Eigenschaften des JSON-Objekts verwendet, wenn die Front-End-Seite die Steuerung ausgewählt2 verbindet.
// Binden Sie den Inhalt von Ajax $ .getJson (URL, Funktion (Daten) {control.empty (); // Das Dropdown-Feld $ .each (Daten, Funktion (i, item) {control.append ("<option value = '" + item.value + ">" + item.text + "</option>");});});});Der Implementierungscode des Controllers lautet wie folgt:
/// <summary> /// Get the corresponding dictionary data according to the dictionary type to facilitate binding of UI controls /// </summary> /// <param name="dictTypeName">Dictionary type name</param> /// <returns></returns> public ActionResult GetDictJson(string dictTypeName) { List<CListItem> treeList = new Liste <ClistItem> (); ClistItem pnode = new clistItem ("", ""); Treelist.insert (0, pnode); Dictionary <String, String> dict = Bllfactory <DictData> .Instance.getDictByDictType (dikttypename); foreach (String -Schlüssel in dict.keys) {Treelist.Add (neuer ClistItem (Schlüssel, dict [Schlüssel]); } kehren tojsonContent (Treelist); }3) Bindungsbetrieb der Baumliste
Für Attributlisten wie hierarchische Daten ihrer verbundenen Unternehmen, Abteilungen und Institutionen sind ihre verbindlichen Operationen ebenfalls ähnlich, wie im folgenden Code gezeigt.
// Bindelect ("Company_ID", "/user/getMyCompanyDictjson? UserId ="+@session ["userId"]); $ ("#Company_id"). On ("Change", Funktion (e) {var companyId = $ ("#Company_id"). Val (); Bindelect ("Dept_id", "/user/getDeptDictjson? ParentID ="+ companyId);}); $ ("#Dept_id"). On ("Change", Funktion (e) {var deptid = $ ("#Dept_id"). Val (); Bindelect ("pid", "/user/getUserDictjson? Deptid ="+ Deptid);});Es sind nur die Daten, die sie zurückgeben, wir verwenden sie nur als eingedrungene Anzeigeinhalt.
[ { "Text": "iqidi Group", "Value": "1" }, { "Text": "Guangzhou Branch", "Value": "3" }, { "Text": "Shanghai Branch", "Value": "4" }, { "Text": "Beijing Branch", "Value": "5" } ]Oder wie unten gezeigt
[ { "Text": "Guangzhou Branch", "Value": "3" }, { "Text": "General Manager's Office", "Value": "6" }, { "Text": "Financial Department", "Value": "7" }, { "Text": "Engineering Department", "Value": "8" }, { "Text": "Product R&D Department", "Value": "9" }, { "Text": "eine Gruppe entwickeln", "Wert": "14"}, {"text": "eine Gruppe 2", "Wert": "15"}, {"text": "Test Gruppe 2", "Wert": "15"}, {"Text": "Testgruppe 2", "Wert": "16", {{{{text ":" markt "," markt "," markt "," markt "," markt "," markt "," markt "," markt "," markt "," markt "," markt "," markt "," markt "," markt "," markt "," markt "," markt "," markt "," 1", "Value": "23" }, { "Text": "Market Department 2", "Value": "24" }, { "Text": "Comprehensive Department", "Value": "11" }, { "Text": "Production Department", "Value": "12" }, { "Text": "Human Resources Department", "Value": "13" } ]Um die beiden oben genannten Teile zusammenzufassen, können wir sehen, dass der Inhalt ihres Textes darin besteht, die Räume entsprechend der hierarchischen Beziehung zu erhöhen und damit die Anzeige der hierarchischen Beziehung zu erkennen.
In Bezug auf den Schnittstelleneffekt ist diese Verarbeitung jedoch in der Tat nicht so gut wie die Anzeige des Dropdown-List-Baums in EasyUi. Vielleicht kann ein besseres Bootstrap-Plug-In verwendet werden, um diesen baumförmigen Inhalt anzuzeigen.
4) Zuordnungsverarbeitung der SELECT2 -Steuerung
Bei den oben eingeführten Methoden geht es um die Initialisierung der SELECT2 -Steuer- und Bindungsdaten. Wenn wir also den Wert der Bearbeitungsschnittstelle nach der Initialisierung der Schnittstelle binden, müssen wir dem Steuerelement den Wert zuweisen, damit die Elemente, die wirklich angezeigt werden müssen, angezeigt werden.
Die Methode zum Löschen der Kontrolle ist wie folgt.
// den Wert der Select2 -Steuerung $ ("#pid") löschen. Select2 ("val", ""); $ ("#Company_id"). Select2 ("val", ""); $ ("#Dept_id"). Select2 ("val", "");Wenn mehrere Steuerelemente gelöscht werden müssen, können Sie die Sammlung verwenden, um sie zu verarbeiten
var select2ctrl = ["Bereich", "Branche", "Klasse", "CustomerType", "Quelle", "CreditStatus", "Stage", "Status", "Wichtigkeit"]; $ .each (select2ctrl, function (i, item) {var strl = $ ("#" + item); Strl.Select2 ("val", "");});Weisen Sie der Steuerung aus Select2 einen Wert zu, um die Elemente mit dem entsprechenden Wertinhalt anzuzeigen, und der Vorgang ähnelt dem oben.
$ ("#CustomerType"). Select2 ("Val", info.CustomerType); $ ("#Grade"). Select2 ("val", info.grade); $ ("#CreditStatus"). Select2 ("val", info.creditStatus); $ ("#Bedeutung"). Select2 ("val", info.ispublic);Wenn Sie es kaskadierend anzeigen müssen, fügen Sie eine Onchange -Funktionsverarbeitung hinzu, wie folgt der Zuordnungsverarbeitung des folgenden Kaskadierungscode.
$ ("#Provinz"). Select2 ("val", info.province) .trigger ('change'); // link $ ("#city"). Select2 ("val", info.city) .TRigger ('ändere'); // link $ ("#District"). Select2 ("Val", info.district); $ ("#Company_id1"). Select2 ("val", info.company_id) .trigger ('change'); $ ("#Dept_id1"). Select2 ("val", info.dept_id) .trigger ('change'); $ ("#Pid1"). Select2 ("val", info.pid);Schließlich gibt es zwei integrierte Schnittstelleneffekte als Referenz.
Das obige ist die Zusammenfassung der Erfahrung des Bootstrap-Metronik-Entwicklungsframeworks basierend auf der Dropdown-Liste [drei] der relevanten Inhalte der Verwendung des Select2-Plug-Ins. Ich hoffe, es wird für alle hilfreich sein. Wenn Sie weitere Informationen wissen möchten, achten Sie bitte auf die Website wulin.com!