Im vorherigen Artikel wird die Erfahrung des Bootstrap -Metronik -Entwicklungsrahmens zusammengefasst [i] Framework -Übersicht und Menümodulverarbeitung, eine grundlegende Zusammenfassung des Bootstrap -Entwicklungsrahmens, einschließlich des gesamten Schnittstelleneffekts, sowie des Layouts, der Menüs usw. setzt sich dieser Artikel fort und führt die häufig verwendeten Datenpaging -Verarbeitung sowie die Verwendung von Pagen -Inhalten sowie das Gebrauch von The BoottRAPTRELE vor.
In der Datenschnittstellenanzeige sind die Anzeige und Paging von tabellarischen Daten sehr häufige Verarbeitungsvorgänge. Mit dem Stillayout von Bootstrap und der AJAX -Datenverarbeitung von JQuery kann die dynamische Anzeige und das Paging von Daten gut erreicht werden.
1. Listenanzeige und Paging -Verarbeitung 1) Listenanzeige von Daten
Auf vielen Seiten müssen wir im Allgemeinen Datenbankdatensätze auflisten und paginieren.
Der folgende Abschnitt der Baumliste auf der linken Seite ist der allgemeine Datenabfrage -Anzeigebereich rechts, der in zwei Teile unterteilt ist: Inhalts- und Datenliste Abfrage. Der Abfrageinhalt wird normalerweise in Form der Verarbeitung platziert. Wenn der Benutzer die Abfrage auslöst, verarbeiten wir das Ereignis und fordern die entsprechenden Daten vom Controller im MVC -Hintergrund an, um es an das vordere Ende der Seite zurückzugeben und die Daten anzuzeigen und zu pagieren.
Wie im Abfragecode der Menüseite gezeigt, wird Folgendes angezeigt.
<form id = "ffSearch"> <div> <div> <Label> Anzeigename </Label> <div> <input name = "whc_name" type = "text"> </div> </div> </div> <div> <div> <div> <div> <div> <div> <div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </text " <label>Web connection address</label> <div> <input name="WHC_Url" type="text"> </div> </div> </div> <div> <div> <label>Web menu icon</label> <div> <input name="WHC_WebIcon" type="text"> </div> </div> </div> </form>
Im JS -Code der Seite verarbeiten wir die Verarbeitung der Daten, nachdem die Seite initialisiert wurde, wie im folgenden Skript gezeigt.
// Page Initialisierung $ (function () {initjstree (); // Initialisierungsbaum BindEvent (); // Bindungsereignisverarbeitungssuche (aktuelle Seite); // Initialisierung der ersten Seitendaten initictItem (); // Initialisierungs -Dictionary -Informationen});Der HTML -Code zum Anzeigen der Daten ist unten angezeigt. Der Hauptinhalt des Tabellenheaders wird angezeigt, und der Hauptinhalt des Tabelle Grid_body wird dynamisch erstellt und von Skripten angezeigt.
<table id = "grid" cellpadding = "0" cellpacing = "0"> <thead id = "grid_head"> <tr> <Th> <Eingabe -Typ = "CheckBox" Onclick = "SelectAll (this)"> </th> <Th> Anzeigename </Th> </Th> <Th> -Widen -Funktions -Handy -Handy -Handy -Handy -Ziehen. Symbol </th> <th> Systemnummer </th> <th> Betrieb </th> </tr> </thaid> <tbody id = "grid_body"> </tbody> </table> <div> <ul id = 'grid_paging'> </ul> </div>
Die Datenanzeige wird über die Suchskriptfunktion verarbeitet, nachdem die Seite fertig ist. Geben Sie bei der Verarbeitung zunächst die Bedingungen des seriellen Zahlenformulars und die Paging -Zustandsinformationen in den MVC -Controller über, um die entsprechenden Listendaten zu erhalten, und binden Sie sie dynamisch an der Schnittstelle ein, um den gesamten Verarbeitungsprozess abzuschließen. Der spezifische Code -Screenshot ist unten angezeigt.
Und der Code im Inneren
tr += getActionhtml (item.id);
Anschließend werden einige Operationschaltflächen über Skripte erzeugt, die Schnittstelle lautet wie folgt.
2) Verarbeitung von Daten Paging
Die auf unserer Seite angezeigten Daten sind im Allgemeinen kein fester Datensatz. Daher ist Pagination auch eine notwendige Verarbeitung, die die Leistung verbessern und benutzerfreundliche Erfahrung verbessern kann. Die Datenpaginierung wird mit dem Plug-in-Bootstrap-Paginator von Bootstrap verarbeitet. Diese Steuerung wird viel verwendet und ist ein sehr leistungsfähiges Paging -Plugin.
Bootstrap-Paginator seine Github-Code-Adresse lautet: https://github.com/lyonlai/bootstrap-paginator
Die Nutzungsbeispiele können eingeführt werden. Weitere Informationen finden Sie unter: http://lyonlai.github.io/bootstrap-paginator/
Bei Verwendung dieser Steuerung können Sie nach Einführung von JQuery- und Bootstrap -Stilen und Klassenbibliotheken diese über die folgende Codezeile hinzufügen und verwenden.
<script src = "/js/bootstrap-paginator.min.js"> </script>
Diese Steuerung Paging kann durch Handhabung von klickten und Seitenveränderungen implementiert werden.
Um Inhalte auf der Seite anzuzeigen, fügen wir dem HTML -Code ein Div hinzu und deklarieren ein UL -Element mit ID grid_paging. Der Code ist wie folgt.
<div> <ul id = 'grid_paging'> </ul> </div>
Dann lautet der spezifische JS -Verarbeitungscode wie folgt.
Im Hintergrund von MVC müssen wir die vom Benutzer auf der Front-End-Seite übergebenen Paging-Bedingungen und Formularbedingungen formulieren, damit wir die entsprechenden Daten basierend auf diesen Parametern erhalten und an den Client zurückgeben können.
Da diese Verarbeitung sehr häufig ist, können wir sie zur Verarbeitung in den Basisklassencontroller aufnehmen. Wenn eine spezielle Verarbeitung erforderlich ist, schreiben Sie die Paginationsfunktion FindWithPager im Subklass -Controller neu.
/// <summary> /// Die Datenbank gemäß den Bedingungen abfragen und die Objektsammlung zurückgeben (für Paginationsdatenanzeigen) /// </summary> /// <zurückgegeben> Geben Sie die Sammlung des Objekts an. String wobei = GetpagerCondition (); PagerInfo pagerInfo = getPagerInfo (); List <T> list = baseBll.findwithpager (wo, pagerInfo); // JSON -Formatanforderungen {insgesamt: 22, Zeilen: {}} // Konstruieren Sie das Format von JSON, um var result = new {total = pagerInfo.recordCount, rows = list}; return tojsonContentDate (Ergebnis); }GetPagerInfo soll die vom Benutzer übergebenen Paginationsparameter erhalten. Erinnern Sie sich noch an die URL-Parameter, die auf der oben angegebenen Front-End-Seite verarbeitet wurden, wie unten gezeigt?
url = "/Menü/findWithPager? Page =" + Seite + "& rows =" + Zeilen;
Der Implementierungscode des spezifischen MVC -Controller GetPagerInfo -Funktion lautet wie folgt.
/// <summary> /// Pagination Objektdaten gemäß Anforderungsparametern // </summary> /// <zurückgegeben> </returns> geschützte virtuelle PagerInfo getPagerInfo () {int pageIndex = request ["Seite"] == NULL? 1: int.Parse (Anfrage ["Seite"]); int pageSize = Request ["Zeilen"] == NULL? 10: int.Parse (Anfrage ["Zeilen"]); PagerInfo pagerInfo = new PagerInfo (); pagerInfo.currenetpageIndex = pageIndex; pagerInfo.pageSize = pageSize; Return PagerInfo; }Nach dem Erhalt der Formbedingungen und Paging -Bedingungen reicht die an den Rahmen übergebene Geschäftslogikklasse aus. Dies ist bereits die Support -Kategorie am Ende des Frameworks und wird nicht weiter erweitert.
List <T> list = baseBll.findwithpager (wo, pagerInfo);
Der endgültige Schnittstelleneffekt ist wie folgt
2. Plugin Jstree
Der vorherige Abschnitt verbessert auch die Anzeige von Baumlisten. Wenn die Daten hierarchisch sind, kann die Anzeige von Baumlisten im Allgemeinen ihre Struktur intuitiv anzeigen. In vielen Fällen können uns Baumlisten bei der Klassifizierungsanzeige von Daten unterstützen.
Zum Beispiel können wir für Benutzerdaten die Organisationsstruktur oder -rolle des Benutzers klassifizieren und diese über Baumlisten visuell angezeigt werden, sodass wir beim Suchen nach verschiedenen Arten von Benutzerlisten leicht zu finden sind.
Oder für Wörterbuchdaten oder Provinz- und Stadtdaten kann sie auch über eine Baumliste angezeigt werden.
Die offizielle Adresse der JStree -Kontrolle lautet https://www.jstree.com/
Die Website hat bereits die Anweisungen und Fallerklärungen von JStree -Kontrollen klargestellt. Im Allgemeinen können wir sie verwenden, indem wir uns direkt auf die Beispiele beziehen.
Der einfache JStree -Nutzungscode lautet wie folgt
$ (function () {$ ('#jstree_demo_div'). jstree ();});Für Ereignisse von JStree können wir Ereignisse im Allgemeinen über den folgenden Code binden.
$ ('#jstree_demo_div'). on ("geändert.jstree", function (e, data) {console.log (data.selected);});Für JStree verwenden wir im Allgemeinen JSON -Daten, um dynamisch zu binden. Die Datenformatdefinition dieses JSON ist wie folgt.
oder Attribute für den generierten einen Knoten}
Im Allgemeinen verwenden wir das folgende Skript, um Daten zu löschen und zu binden.
$ ('#jstree_demo_div'). Data ('jstree', false); // Die Daten löschen, Sie müssen JSON -Daten asynchron $ .getJson (url, function (data) {$ ('#jstree_demo_div'). }). Bind ('Loaded.jstree', LoadedFunction);});Wenn wir dem Benutzer ein Kontrollkästchen zur Verfügung stellen und den ausgewählten Status von Jstree festlegen müssen, ist der Schnittstelleneffekt wie folgt.
Dann muss die allgemeine Initialisierungsfunktion geändert werden, wie im folgenden Code gezeigt
//The initialization code of JSTree with checkbox $.getJSON(url, function (data) { control.jstree({ 'plugins' : [ "checkbox" ], //The selection box 'checkbox': { cascade: "", three_state: false }, //Not cascaded 'core': { 'data': data, "themes": { "responsive": false } } }). Bind ('Loaded.jstree', LoadedFunction);Wenn wir beide kombinieren, können wir die Initialisierungsbindung der JStree -Kontrolle in eine js öffentliche Funktion Bindjstree weiter verfeinern.
// Initialisieren Sie die JStree -Steuerung mit den angegebenen JSON -Daten // Treename ist der Baum -Div -Name, URL ist die Datenquellenadresse. Das Kontrollkästchen ist, ob das Kontrollkästchen das Kontrollkästchen angezeigt wird. Ladefunktion ist die geladene Callback -Funktion Bindjstree (Treename, URL, Kontrollkästchen, Ladefunktion) {var Control = $ (#'#', TREENNAME). = Argumente [2] || FALSCH; //Set the default value of checkbox to false if(isCheck) { //Initialize the checkbox tree $.getJSON(url, function (data) { control.jstree({ 'plugins' : [ "checkbox" ], //The selection box appears 'checkbox': { cascade: "", three_state: false }, //Not cascaded 'core': { 'data': data, "themes": {"Responsive": False}}}). Bind ('Loaded.jstree', LoadedFunction); } else {// Initialisierung der gewöhnlichen Baumliste $ .getJson (url, function (data) {contrat.jstree ({'core': {'data': data, "themes": {"responsive": false}}). }}Wenn die Seite JStree bindet, kann der Code also vereinfacht werden
// Initialisieren Sie die Organisationslistenfunktion InitDeptreeView () {var treeurl = '/user/getMyDeptJstreejson? UserId =@session ["userId"]'; Bindjstree ("Jstree_div", TreeUrl); // Ereignisverarbeitung von Baumsteuerung ändern $ ('#jstree_div'). On ("geändert.jstree", Funktion (e, data) {var icon = data.icon; loadDatabyou (data.selected);}); }Für eine Liste von Kontrollkästchen lautet der Initialisierungscode wie folgt.
// Alle Funktionssätze aller Benutzer var breeurl = '/function/getrolefunctionJstreEBErBEWELTE? UserId =@Session ["userId"] initialisieren; Bindjstree ("Tree_Function", TreeUrl, True); // Rollendatenberechtigungen, initialisieren Sie alle Abteilungen First TreeUrl = '/user/getMyDeptjstreejson? UserId =@session ["userId"]'; Bindjstree ("Tree_roledata", Treeurl, wahr);Für Kontrollkästchen initialisieren wir die Daten normalerweise und setzen dann den ausgewählten Status der Baumliste nach Bedarf fest. Dies erfordert keine häufige Initialisierung des Baumes, was die Leistung und die Reaktionserfahrung effektiv verbessern kann.
Nach der Initialisierung der Baumliste müssen wir die Auswahlelemente löschen und dann die von uns benötigten Auswahlelemente festlegen. Der spezifische Code lautet wie folgt. Achten Sie auf die Verarbeitung der Ereignisse overcock_all und check_node.
// Initialisieren Sie die Rollendatenberechtigungssatz (Organisation) Funktion initroledata (id) {if (id! = "") {Var treemenu = "tree_roledata"; $ ('#' + treemenu) .jstree ("Unerreger_all"); // Deaktivieren Sie die gesamte Auswahl // Ticken Sie den angegebenen Inhalt $ .getJson ("/roledata/getroledatalist? treemenu) .jstree ('check_node', item); // Node}); }}Beim Speichern von Daten erhalten wir die Liste der JStree -Knotenauswahl und speichern dann die Daten. Der spezifische Code ist wie folgt.
// Rollendaten -Berechtigungsfunktion speichern, saveroledata (rollen) {var OUTLIST = $ ('#tree_roledata'). Jstree ('get_selected'); var url = '/roledata/updateata? r =' + math.random (); var postdata = {rollenId: rollen, OULLIST: OUTLIST.JOIN (',')}; $ .post (url, postdata, function (json) {initroledata (rollen);}). Fehler (function () {showtips ("Sie sind nicht berechtigt, diese Funktion zu verwenden, bitte wenden Sie sich an den Administrator, um sie zu verarbeiten.");}); }Okay, schließlich habe ich die reguläre Datenanzeige und Datenpaging vorgestellt. Jstree -Bindung, Ereignisverarbeitung, Datenspeicherung und andere Vorgänge. Ich hoffe, Ihre fortgesetzte Unterstützung zu erhalten. Ich werde weiterhin die wichtigsten Punkte für die Bootstrap-Entwicklung und die Verwendung verschiedener Plug-Ins einführen, um das Lernen konkreter und praktischer zu gestalten, und kann uns nützliche Verweise auf Projekte mit realer Preisträger liefern.
Der obige Inhalt ist die Zusammenfassung der Erfahrung des Bootstrap-Metronik-Entwicklungsrahmens auf der Grundlage von Bootstrap [2] -Listenpaginierungsverarbeitung und Plug-in-JStree-Verwendung. Ich hoffe, es wird für alle hilfreich sein. Ich möchte mich bei Ihnen für Ihre Unterstützung für die Wulin.com -Website bedanken. Ich glaube, wir werden es besser machen!