In einem System gibt es oft viele Menüelemente, jeder Menüelement entspricht einer Seite. Im Allgemeinen müssen Benutzer nur einige häufig verwendete Funktionen verwenden. Wenn Sie auf jeder Ebene zu den Menüs gehen müssen, um entsprechende Funktionen zu finden, ist dies in der Tat etwas umständlich. Vor allem, wenn es viele Menüs gibt und Kunden mit dem System als Ganzes nicht vertraut sind, wenn es ein Favoritenmodul gibt, das einem Browser ähnelt, verbinden und speichern einige häufig verwendete Menüs und findet die entsprechende Seite von der Homepage dieser Favoriten jedes Mal, es wird wirklich arbeitssparend und sehr bequem sein. In diesem Aufsatz wird die Idee eingeführt, diese Favoriten im basierten Bootstrap Development-Framework umzusetzen.
1. Systemfavoriten Schnittstellenverarbeitungseffekt
Um diese Favoritenfunktion zu erkennen, müssen wir auch einen Eingang zum Favoritenmodul an der offensichtlichen Position der Systemseite sowie der Funktion, die zu den entsprechenden Favoriten für jede Seite hinzugefügt werden kann, platzieren.
Nach dem Vergleich haben wir diese Eingangsfunktionen in der Nähe des Seitentitels platziert, damit wir sie einfach und schnell sammeln können, wie im folgenden Effekt gezeigt.
Wenn wir auf der Seite auf die Schaltfläche [Zu Favoriten] klicken, fügen wir den entsprechenden Seitentitel und die Verbindung zum Favoriten -Datensatz hinzu.
In der Funktion [Favoriten anzeigen] können wir die von uns hinzugefügten Seitenverknüpfungen anzeigen und auf einen der Datensätze klicken, um schnell die entsprechende Seite einzugeben, wodurch unsere Notwendigkeit, das Funktionsmodul schnell einzugeben.
Das Wichtigste hier ist, die Favoritenaufzeichnungen zu sortieren und die Datensätze nach oben oder unten zu verschieben, damit sie der Verarbeitung der Schnittstelle entsprechen können.
2. Der Implementierungsprozess von Systemfavoriten
Nach dem Verständnis des oben genannten Schnittstelleneffekts der Favoritenfunktion der Systemseite müssen wir den spezifischen Implementierungsprozess verstehen. Zunächst müssen wir eine Tabelle entwerfen, um Informationen zu speichern, die Favoriten, Seitentitel, Seitenadresse, Sortierung und anderen Informationen entsprechen.
Die Datenbankdesign -Schnittstelle ist unten angezeigt.
Wir haben festgestellt, dass die Sortierdatensätze im Dezimalformat gespeichert sind, und wir sortieren sie um einen Wert mit Längengrad, damit wir die Größe zwischen ihnen ändern können.
Verwenden Sie die Code -Erzeugung Tool Database2Sharp, um schnell den zugrunde liegenden Code und Webcontroller und den Ansichtscode zu generieren, und integrieren Sie ihn dann in das Framework, damit wir die Schnittstelle des gesamten Moduls haben und den Code verarbeiten können.
Da unsere Datenanzeige und Bearbeitungsschnittstelle im Allgemeinen relativ Standard sind und die Anforderungen an die Eingangsanzeige von Favoriten unterschiedlich sind, müssen wir der Listenschnittstelle eine Ansicht hinzufügen, um eine einfache Eintragsschnittstelle anzuzeigen, wie in der Abbildung gezeigt.
Diese Schnittstelle enthält die Bewegungsverarbeitung von Datensätzen, einschließlich Aufwärts oder Abwärts.
Wie bereits erwähnt, wird unsere Sortierung von Aufzeichnungen hauptsächlich durch das SEQ -Feld vom Typ Decimal erreicht.
Wenn die Entitätsklasse initialisiert wird, weisen wir dem UNIX -Zeitstempel der aktuellen Zeit den sortierten Wert zu.
Der obige DateTimetoint -Funktionscode ist unten dargestellt, was auch unsere häufig verwendete Verarbeitungsmethode ist.
/// <summary> /// Extended Time Interface kann den Formungswert zurückgeben /// </summary> /// <param name = "time"> </param> /// <returns> <returns> public static int datetimetoint (diese datetime time) {system.datetime = timezone, 1) 1), 1), 1, 1), 1), 1), 1, 1, 1, 1). return (int) (Zeit - Starttime) .Totalseconds; }Um die Datensatzbewegung zu realisieren, müssen wir eine sich bewegende logische Verarbeitung in der Service -BLL -Ebene implementieren, um den Aufruf des Controllers zu erleichtern.
/// <summary> /// Update Up oder Down Order /// </summary> /// <param name = "id"> aufgezeichnete ID </param> /// <param name = "moveUp"> nach oben oder nach unten verschieben, true oben </param> /// <returns> </returns> öffentlicher BOOL -Aktualisierung (String ID, Bool MoveUp))
Der implementierte Funktionscode ist wie folgt
/// <summary> /// Update Up oder Down Order /// </summary> /// <param name = "id"> record id </param> // <param name = "moveUp"> up oder move up, true </param> /// <Returns> </returns> public bool updown (String id, Bool MoveUp) {// Die Bestellungsregeln bool isdown = true; bool result = false; Webavoriteinfo info = findById (id); if (info! if (isDescending) {condition = string.format ("seq {0} {1}", MoveUp? ">": "<", info.sq); } else {condition = string.format ("seq {0} {1}", moveUp? "<": ">", info.seq); } var list = basiertal.find (Bedingung); Decimal Newseq = 0m; Switch (list.count) {case 0: newSeq = info.seq; // Es ist bereits oben oder unten, die Reihenfolge bleibt standardmäßig unverändert; Fall 1: // Es gibt einen Datensatz über oder unten, wenn (isDescending) {newseq = moveUp? (Liste [0] .Seq + 1m): (Liste [0] .Seq - 1M); } else {newseq =! moveup? (Liste [0] .Seq + 1m): (Liste [0] .Seq - 1M); } brechen; Fall 2: // im mittleren Bereich, nehmen Sie den Durchschnittswert Newseq = (Liste [0] .Seq + Liste [1] .Seq) /2m; brechen; Standard: // Der Fall, in dem mehr als zwei if (MoveUp) {newseq = (list [list.count - 2] .Seq + list [list.count - 1] .Seq) /2m; } else {newseq = (list [0] .sq + list [1] .sq) / 2m; } brechen; } // Unified Modification Order info.seq = newseq; result = update (info, info.id); } Rückgabeergebnis;}Auf diese Weise verkapulieren wir diese BLL -Schichtschnittstelle im MVC -Controller weiter, um die AJAX -Aufrufverarbeitung am vorderen Ende der Seite zu erleichtern. Der Kapselungscode ist wie folgt.
/// <summary> //// Move Record /// </summary> /// <param name = "id"> record id </param> /// <param name = "up"> ist wahr, ansonsten ist es falsch </param> /// <Ctrendites> </returns> [httppost] public actionResult updown (String id, bool up) {{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{conomResult). if (! string.isnullorempy (id)) {try {result.success = bllfactory <webFavorit> .Instance.Updown (id, up); } catch (Ausnahme ex) {result.errormessage = ex.Message; }} return tojsonContent (Ergebnis);}Auf diese Weise können wir diese Methode in der Schnittstellenansicht am vorderen Ende der Seite aufrufen.
Generieren Sie zunächst einen Front-End-HTML-Code durch JS-Bindung, wie unten gezeigt.
$ ("#grid_body"). "<a href = 'javaScript:;' class = 'btn btn-sm grün btn-sm blau 'onclick =/"down ('" + item.id + "')/" title ='> <span class class = 'glyphicon glyphicon-arrow-down'> </span> </a> "; tr + =" </td> "; tr + =" </tr> "; $ ("#GRID_BODY ").Verarbeiten Sie es dann durch die Aufwärts- oder Abwärtsfunktion und bewegen Sie die Position nach oben oder unten.
var updownurl = "/webavorit/updown" Funktion up (id) {var postdata = {id: id, up: true}; $.post(UpDownUrl, postData, function (json) { var data = $.parseJSON(json); if (data.Success) { showTips("Move up successfully"); Refresh();//Refresh page data} else { showTips(data.ErrorMessage); } });}function Down(id) { var postData = { id: id, up: false }; $.post(UpDownUrl, postData, function (json) { var data = $.parseJSON(json); if (data.Success) { showTips("Move down successfully"); Refresh();//Refresh page data} else { showTips(data.ErrorMessage); } });}Dies implementiert die Bewegungsreihenfolge, die wir brauchen. Zusätzlich bestimmen wir beim Hinzufügen, ob der entsprechende Benutzer eine URL hinzugefügt hat. Wenn es existiert, müssen es nicht wiederholt hinzugefügt werden. Das Front-End muss es nur über Ajax anrufen und dann darauf reagieren.
Durch die Implementierung dieser Codes können wir schnell Favoriten verwalten und schnell in den Benutzer eintreten und ein freundlicheres Erlebnis bieten.
Das obige ist die bevorzugte Favoritenfunktion der Seite, die auf Bootstrap basiert, die vom Editor vorgestellt wurden. Ich hoffe, es wird für alle hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird allen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!