Basé sur le framework MetRonic de Bootstrap, implémente les boutons de fonction des liens de la page pour déplacer les enregistrements de collecte (en utilisant triable pour faire glisser et tri)

Dans l'article précédent: Le framework Metronic basé sur Bootstrap implémente la fonction préférée du lien de page, qui introduit l'implémentation de la fonction préférée du lien et le tri des enregistrements préférés. Cet essai utilise principalement des boutons de fonction pour déplacer les enregistrements de collecte. Bien que la fonction soit bien implémentée, après la sortie de l'article, certains lecteurs ont souligné qu'il était plus pratique de trier en utilisant la traînée directe. Par conséquent, le tri des enregistrements de liste a été étudié et introduisant ainsi comment utiliser le composant JS Open Source triable pour implémenter le tri de glisser. Cet essai présente l'application de ce composant dans la connexion du tri des favoris.

1. Examen du tri et du traitement des enregistrements préférés

Le traitement favoris introduit dans l'essai précédent est principalement pour faciliter les utilisateurs pour entrer rapidement un module de fonctions couramment utilisées. À mesure que le nombre d'enregistrements favoris augmente, il nous est nécessaire de les trier raisonnablement pour faciliter notre utilisation.

L'interface de tri des enregistrements des favoris originale est la suivante.

Cette interface contient le traitement du mouvement des enregistrements, y compris vers le haut ou vers le bas.

Le code logique implémenté ajuste principalement le tri des enregistrements précédents et suivants de l'enregistrement actuel, réalisant ainsi le réglage de la position. Le code est illustré ci-dessous.

 /// <summary> /// Mettre à jour l'ordre vers le haut ou vers le bas /// </ résumé> /// <param name = "id"> ID enregistré </ param> /// <param name = "Movup"> Up OU MOTION UP, true </ param> /// <retourne> </ returns> public bool upsewn (string id, bool moveup) {// Définir les règles de commande pour le tarif BOOL ISDESCENCE = true Résultat = BOOL RESTRUST = BOOL RESTRUSTE) false; webFavoriteInfo info = findById (id); if (info! = null) {// Construire la question de la chaîne Condition = ""; if (isDespenses) {condition = String.format ("SEQ {0} {1}", MovUp? ">": "<", info.seq);} else {condition = string.format ("SEQ {0}" 1} "STRING = String. "<": ">", info.seq);} var list = basase.find (condition); Decimal newSeq = 0m; switch (list.Count) {case 0: newSeq = info.seq; // il est déjà en haut ou en bas, la commande reste inchangée par défaut; cas 1: // il y a un enregistrement ou ci-dessous (isDespenessation) {newSeq = Move? (list [0] .seq + 1m): (list [0] .seq - 1m);} else {newSeq =! movup? (list [0] .seq + 1m): (list [0] .seq - 1m);} brisé; cas 2: // zone centrale, prenez la valeur moyenne newseq = (list [0] .seq + list [1] .seq) / 2m; break; par défaut: // plus que deux cas if (movup) {newSeq = (list.Count - 2]. 2m;} else {newSeq = (list [0] .seq + list [1] .seq) / 2m;} briss;} // Unified Modification Order info.seq = newSeq; result = update (info, info.id);} return result;}

Dans le code ci-dessus, en déterminant la position de l'enregistrement en mouvement actuel, puis en obtenant les enregistrements triés au-dessus ou en dessous. Si le nombre d'enregistrements est de 0, il est en haut ou en bas. S'il s'agit de 1 enregistrement, l'ajout ou la soustraction d'une certaine valeur de l'enregistrement est la valeur de la nouvelle position triée. S'il s'agit d'un record supérieur ou égal à 2 enregistrements, prenez les deux enregistrements de leurs valeurs les plus récentes et leurs valeurs moyennes.

2. Processus de traînée et de tri des favoris

Le traitement ci-dessus peut répondre aux exigences de base et la position de réglage est également correcte. Mais si nous pouvons faire glisser les éléments de la liste pour trier, ce sera plus pratique et convivial.

Sur la base du triage de tri, j'ai trouvé un meilleur composant de traitement JS (triable), qui se classe relativement haut sur GitHub, et je suppose qu'il y a beaucoup de gens qui l'utilisent.

L'utilisation de ce contrôle est relativement simple, le code est le suivant.

 <ul id = "items"> <li> Article 1 </li> <li> Article 2 </li> <li> Article 3 </li> </ul> var el = document.getElementById ('items'); var sortable = new sortable (el);

Regardons d'abord l'interface avec laquelle j'ai finalement intégré.

De cette façon, nous pouvons ajuster la position en déplaçant l'enregistrement.

Nous utilisons toujours la pagination pour afficher les listes pour améliorer l'efficacité de la récupération.

 <div> <v> <v> <span> Affichage </span> <select id = "Rows" onChange = "changerows ()"> <opopoption> 10 </ option> <option sélectionné> 50 </ option> <option> 100 </ option> <option> 1000 </ option> </lect> <span> enregistrements </span> <pander> Total Page: </span> <pan ID = 'TotalCount'> 0 </ spander> </span> <pandid ID = 'TotalCount'> 0 id = 'TotalPageCount'> 0 </span> pages. </ div> <hr /> <div id = "grid_body" class = 'list-group'> </div> <div> <ul id = 'grid_paging'> </ul> </div> </div> </div>

Ici, nous pouvons construire une série d'enregistrements de liste dans Grid_Body.

 <v> <span aria-hidden = "true"> </span> <a id = "e1f462c6-c749-4258-836f-e13ee8c8acd7" href = "http: // localhost: 2251 / user / index? tid = 2744dbf5-a648-47c1-9e9a-d8b4058884389"> Informations utilisateur système </a> <i> ✖ </i> </div>

Une fois que l'enregistrement est mis à jour, le composant triable a un événement onupdate à gérer, comme indiqué ci-dessous.

 var grid_body = document.getElementByid ('grid_body'); new sortable (grid_body, {handle: '.glyphicon-move', filter: ".js-remove", animation: 150, onupdate: function (/ ** événement * / evt) {var list = []; // construire l'objet de collection $ ('.. gens gens

De cette façon, nous remettons le traitement commercial sur la méthode EditFavorite, qui met principalement à jour les enregistrements de liste de manière unifiée. La logique de traitement consiste à supprimer d'abord les enregistrements précédents, puis à ajouter les enregistrements de collection de liste et à définir leurs enregistrements de tri sur l'ordre approprié.

 /// <summary> //// modifier la liste d'enregistrements /// </ résumé> /// <param name = "list"> Liste d'enregistrements </ param> /// <retourne> </ returns> [httppost] public ActionResult EditFavorite (list <clistItem> list) {CommunRansult result = new CommonResult (); var userrid = actuel Bllfactory <webfavorite> .instance.createTransaction (); if (trans! = Null) {try {// supprimer d'abord et enregistrer var condition = string.format ("Creator = '{0}'", userId); bllfactory <webfavorite> .instance.DeleteBonDintion (condition, trans); // Ajouter des enregistrements (Élément CLISTITEM dans la liste) {webFavoriteInfo info = new WebFavoriteInfo (); info.Title = itex.Text; info.url = item.value; info.seq = i -; info.creator = currentUser.id.ToString (); bllfactory <webfavorite> .instance.insert (info, trans);} trans.Commit (); result.success = true;} catch (exception ex) {result.errorMessage = ex.Message; trans.rollback (); Loghelper.Error (ex);}} return tojsonContent (result);};

Ce qui précède est une amélioration pour traîner et trier la liste des favoris. J'espère que le composant JS triable pourra être utilisé raisonnablement dans les projets réels pour améliorer les résultats de l'examen physique de nos utilisateurs. Si vous avez des questions, veuillez me laisser un message et l'éditeur répondra à tout le monde à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!