Im vorherigen Artikel: Das auf Bootstrap basierende metronische Framework implementiert die bevorzugte Favoritenfunktion der Seite, in der die Implementierung der Lieblingsfunktion und die Sortierung von bevorzugten Datensätzen eingeführt wird. In diesem Aufsatz wird hauptsächlich Funktionsschaltflächen verwendet, um Sammlungsdatensätze zu verschieben. Obwohl die Funktion gut implementiert ist, wiesen einige Leser darauf hin, dass es bequemer ist, durch Direktwiderstand bequemer zu sortieren. Daher wurde die Sortierung von Listendatensätzen untersucht und somit vorgestellt, wie die sortierbare Open -Source -JS -Komponente zur Implementierung der Drag -Sortierung verwendet wird. In diesem Aufsatz wird die Anwendung dieser Komponente bei der Verbindung von Favoriten eingebracht.
1. Überprüfen Sie die Sortierung und Verarbeitung von bevorzugten Datensätzen
Die im vorherigen Aufsatz eingeführte Favoritenverarbeitung besteht hauptsächlich darin, den Benutzern zu erleichtern, schnell in ein Modul von häufig verwendeten Funktionen einzutreten. Mit zunehmender Anzahl der Favoritenaufzeichnungen müssen wir sie vernünftigerweise sortieren, um unsere Verwendung zu erleichtern.
Die ursprüngliche Favoriten -Datensatz -Sortierschnittstelle lautet wie folgt.
Diese Schnittstelle enthält die Bewegungsverarbeitung von Datensätzen, einschließlich Aufwärts oder Abwärts.
Der implementierte logische Code passt hauptsächlich die Sortierung der vorherigen und nachfolgenden Datensätze des aktuellen Datensatzes an, wodurch die Positionsanpassung erkannt wird. Der Code ist unten angezeigt.
/// <summary> /// Update Up oder Down Order /// </summary> /// <param name = "id"> aufgezeichnete ID </param> /// <param name = "moveup"> up oder move up, true </param> // </<Ctrippites> </returns> öffentlich bool updown false; webavoriteinfo info = findById (id); if (info! ? (Liste [0] .Seq + 1m): (Liste [0] .Seq - 1m);} else {newSeq =! MoveUp? (Liste [0] .Seq + 1m): (Liste [0] .Seq - 1M);} Break; Fall 2: // mittlerer Bereich, nehmen Sie den Durchschnittswert Newseq = (Liste [0] .Seq + Liste [1] .Seq)/2M; Break; Standard: // mehr als zwei Fälle (MoveUp) {Newseq = (List). 2m;} else {newSeq = (Liste [0] .Seq + Liste [1] .Seq)/2m;} Break;} // Unified Modification Order info.seq = newSeq; result = update (info.id.id);} Rückgabeergebnis;}Im obigen Code, indem die Position des aktuellen Umzugsdatensatzes bestimmt und dann die oben oder unten sortierten Datensätze erhalten. Wenn die Anzahl der Datensätze 0 beträgt, liegt sie oben oder unten. Wenn es sich um einen Datensatz handelt, ist das Hinzufügen oder Subtrahieren eines bestimmten Werts aus dem Datensatz als Wert der neuen sortierten Position. Wenn es sich um einen Datensatz, der größer oder gleich 2 Datensätzen ist, nehmen Sie die beiden Datensätze ihrer neuesten und der Durchschnittswerte auf.
2. Drag- und Sortierprozess von Favoriten
Die obige Verarbeitung kann grundlegende Anforderungen erfüllen und die Anpassungsposition ist ebenfalls korrekt. Wenn wir jedoch die Listenelemente in die Sortierung ziehen können, ist dies bequemer und freundlicher.
Basierend auf dem Ziehensortieren fand ich eine bessere JS -Verarbeitungskomponente (sortierbar), die auf Github relativ hoch ist, und ich denke, es gibt viele Leute, die sie verwenden.
Die Verwendung dieser Kontrolle ist relativ einfach, der Code ist wie folgt.
<ul id = "items"> <li> Punkt 1 </li> <li> Artikel 2 </li> <li> Punkt 3 </li> </ul> var el = document.getElementById ('item'); var sortable = new sortable (el);Schauen wir uns zunächst die Schnittstelle an, die ich schließlich in sortierbar integriert habe.
Auf diese Weise können wir die Position anpassen, indem wir den Datensatz verschieben.
Wir verwenden immer noch Pagination, um Listen anzuzeigen, um die Effizienz des Abrufs zu verbessern.
<div><div><div><span>Display</span><select id="rows" onchange="ChangeRows()"><option>10</option><option selected>50</option><option>100</option><option>1000</option></select><span> records</span><span>Total records: </span><span id='totalCount'>0</span>, total page count: <span id = 'TotalPageCount'> 0 </span> Seiten. </div> <hr/> <div id = "grid_body" class = 'list-gruppe'> </div> <div> <ul id = 'grid_paging'> </ul> </div> </div> </div>
Hier können wir eine Reihe von Listendatensätzen in Grid_body erstellen.
<div> <span aria-hidden = "true"> </span> <a id = "e1f462c6-c749-4258-836f-e13ee8c8acd7" href = "http: // localhost: 2251/user/index?
Nachdem der Datensatz aktualisiert wurde, verfügt die sortierbare Komponente über ein Onupdate -Ereignis, wie unten gezeigt.
var grid_body = document.getElementById ('grid_body'); new sortable (Grid_body, {Handle: '. Glyphicon-move', filter: ".js-remove", Animation: 150, Onupdate: Funktion (/** Ereignis*/evt) {var list = []; //. {list.push ({'text': item.text, 'value': item.href});}); var url = "/webavorit/editFavorit"; var postdata = {list: list}; erfolgreich "); refresh (); // seitigen Daten} else {showtips (data.errormessage);}});},});Auf diese Weise übergeben wir die Geschäftsabwicklung an die EditFavorite -Methode, die die Listendatensätze hauptsächlich auf einheitliche Weise aktualisiert. In der Verarbeitungslogik werden zuerst die vorherigen Datensätze gelöscht, dann die List -Sammlungsdatensätze hinzugefügt und ihre Sortierdatensätze auf die entsprechende Bestellung festgelegt.
/// <summary> ////. Datensatzliste bearbeiten /// </summary> /// <param name = "list"> record -liste </param> // <returns> </returns> [httppost] public actionResult editfavorit (list <ClistItem> liste) {CommonResult result = new CommonResult (); Bllfactory <WEBApaRit> .InStance.Createtransaction (); if (trans! (ClistItem-Element in der Liste) {WebFavoriteinfo info = new WebFavoriteinfo (); info.title = item.text; info.url = item.Value; trans);} trans.commit (); result.success = true;} catch (Ausnahme ex) {result.errorMessage = ex.Message; trans.rollback (); logHelper.Error (ex);}} return tojsonContent (Ergebnis);}Das obige ist eine Verbesserung, um die Favoritenliste zu ziehen und zu sortieren. Ich hoffe, dass die sortierbare JS -Komponente in tatsächlichen Projekten vernünftigerweise verwendet werden kann, um die Ergebnisse der körperlichen Untersuchung unserer Benutzer zu verbessern. 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!