Comment utiliser un composant d'interface utilisateur triable jQuery dans votre application Web

Découvrez comment intégrer facilement un composant pouvant être trié dans votre application Web. Sortable est idéal pour éditer des listes de lecture ou n'importe quel autre endroit où vous voulez faire glisser une liste existante

Dans le dernier épisode nous avons parlé du Kendo UI Slider . composant, qui permet aux utilisateurs de sélectionner des valeurs dans une plage de valeurs. Dans cet épisode, nous découvrirons le composant Sortable . Le composant Sortable permet aux utilisateurs de réorganiser une liste d'éléments en rendant chaque élément déplaçable et pouvant être déposé. Cette fonctionnalité peut être utilisée pour modifier une liste de lecture ou réorganiser les lignes et les colonnes d'une feuille de calcul. Étant donné que le composant Sortable fonctionne sur une liste existante, il est idéal de l'utiliser avec d'autres composants de l'interface utilisateur Kendo qui sont des listes comme les composants ListView et TabStrip . À venir, vous verrez comment utiliser le composant Sortable pour réorganiser des enregistrements dans un tableau et comment l'intégrer au composant Grid .

Création d'un tableau sortable

Tout d'abord, nous allons créer un élément table avec quatre champs dans l'en-tête et trois enregistrements dans le corps. Les enregistrements ne pourront être déplacés que par glissement. Nous initialiserons donc le widget Sortable sur l'élément tbody . Par défaut, lorsque vous cliquez sur une ligne et que vous la faites glisser, l’espace réservé sera vide et l’indice sera une copie de la ligne que vous déplacez. L'espace réservé est ce qui est vu à l'emplacement où l'article doit être déposé. L'indice est ce qui est traîné avec le curseur. Voici un exemple de tableau qui a été rendu triable:

 < html > [[19659011] < head > 
     < meta   charset  =  " utf-8 "  > > 
     ] < titre >  Les biens à classer  </  titre > 
     < link   rel  =  " feuille de style  "   href  = "  https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.bootstrap-v4.min.css  " > 
     < script   src  = "  https://code.jquery.com/jquery-1.12.3. min.js  " >    </  script > 
     < script   src  = [19659010] " https://kendo.cdn.telerik.com/2018.2.620/js/kendo. all.min.js  " >    </  script > 
     < style >  
       body  { police de caractères :  helvetica ; } 
       tableau, tr  { frontière  de tableau . ] 1  px solide  #ddd ;   effondrement de la frontière :  effondrement ; } 
       td, th  { ] padding :   1  em ;   text-align :  gauche ; } 
      </  style > 
   </  head > 
    < body > 
     < tableau   id  =  " grille "  > 
       < thead > 
         < tr > 
           < e >  PersonID  </  e > 
           < e >  Prénom  </  e > 
           < e >  Nom de famille  </  e > 
           < e >  Ville  </  e > 
         </  tr > 
       </  thead > 
       < tbody > 
         < tr > 
           < td >  01  </  td > 
           < td >  Clark  </  td > 
           < td >  Kent  </  td > 
           < td >  Metropolis  </  td > 
         </  tr > 
         < tr > 
           < td >  02  </  td > 
           < td >  Bruce  </  td > 
           < td >  Wayne  </  td > 
           < td >  Gotham  </  td > 
         </  tr > 
         < tr > 
           < td >  03  </  td > 
           < td >  Peter  </  td > 
           < td >  Parker  </  td > 
           < td >  New York  </  td > 
         </  tr > 
       </  tbody > 
     </  tableau > 
     < script >  
       $  ( document ) .  ready  ( fonction  ()  {
         $  ] ( 'tbody' ) .  kendoSortable  () ; 
      } ) ; 
      </  script > 
   </  corps > 
 </  html > 
 

À l’heure actuelle, il n’est pas très agréable d’avoir un espace vide après le déplacement d’une ligne. En outre, rien n'indique à l'utilisateur qu'il fait glisser l'élément, car le curseur reste une flèche. Nous verrons ensuite comment personnaliser ces fonctions dans l’API du composant.

Personnalisation de la table triable

Dans l’exemple précédent, nous avons utilisé l’élément tbody pour initialiser le composant. Dans l'exemple suivant, nous allons utiliser l'élément tableau comme conteneur que nous avons donné à la grille id . L'utilisation de id de l'élément racine pour le composant pouvant être trié est préférable lorsque votre liste a été créée avec un autre composant Kendo UI. Dans ce cas, le même élément utilisé pour initialiser le composant serait utilisé pour rendre le composant triable. Dans cet exemple, nous allons changer notre curseur pour utiliser une icône de déplacement. Ensuite, nous ferons en sorte que l’espace réservé affiche la ligne du tableau que nous faisons glisser. Enfin, notre indice sera modifié pour afficher un message «Drop here». Voici le code mis à jour:

 $  ( '# grid ') .  kendoSortable  ( {
   curseur :   'mouvement' 
   cursorOffset :   { top :   10  de gauche :   30 
 
 Le meilleur outil 2023 pour ta croissance Instagram ! 
 
 
 
   
 
Source link 
Partager :
Cliquez pour partager sur Twitter(ouvre dans une nouvelle fenêtre)
Cliquez pour partager sur Facebook(ouvre dans une nouvelle fenêtre)
Articles similaires