Mettre en oeuvre les sélections multiples avec jQuery UI sélectionnable

StackOverflow https://stackoverflow.com/questions/4396042

  •  10-10-2019
  •  | 
  •  

Question

Quelqu'un peut-il me aider à utiliser la bibliothèque sélectionnée du jquery pour exécuter les fonctions suivantes:

  • Permettre à un utilisateur de sélectionner plusieurs éléments avec un clic de souris
  • De-sélectionner un élément si elle est déjà sélectionné avec un clic de souris
Était-ce utile?

La solution

Ceci est contourné en une autre question , mais je suis reposter ici pour tous ceux qui trouve cela via Google. Si vous liez l'événement « mousedown » dans jQuery et ensemble metaKey là (comme si l'utilisateur tient le ctrl / cmd clé), puis lorsque vous appelez sélectionnable, il sera déjà ensemble. 

$(".YOUR_SELECTOR_HERE").bind("mousedown", function(e) {
  e.metaKey = true;
}).selectable();

Autres conseils

N'utilise pas sélectionnable mais vous obtiendrez le comportement que vous voulez avec la configuration que vous avez déjà:

au lieu de 

$( "#selectable" ).selectable()

essayer 

$(".ui-widget-content").click( function() {
    $(this).toggleClass("ui-selected");
});

Avez-vous vérifié page de démonstration sélectionnable? Vous pouvez déjà le faire. Pour sélectionner plusieurs éléments, juste le contrôle de maintien. Ceci est similaire à la façon dont vous travailler avec des fichiers. Est-ce en utilisant "Ctrl + clic" pas assez bon?

Code de démonstration ici: 

<style>
    #feedback { font-size: 1.4em; }
    #selectable .ui-selecting { background: #FECA40; }
    #selectable .ui-selected { background: #F39814; color: white; }
    #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
    #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
    </style>
    <script>
    $(function() {
        $( "#selectable" ).selectable();
    });
    </script>

<div class="demo">

<ol id="selectable">
    <li class="ui-widget-content">Item 1</li>
    <li class="ui-widget-content">Item 2</li>
    <li class="ui-widget-content">Item 3</li>
    <li class="ui-widget-content">Item 4</li>
    <li class="ui-widget-content">Item 5</li>
    <li class="ui-widget-content">Item 6</li>
    <li class="ui-widget-content">Item 7</li>
</ol>

</div>

Jetez un oeil à ma réponse sur ce fil.

jQuery UI sélectionnable - par défaut de sélection multiple faisant

Il comprend le remplacement complet de code pour les js ui sélectionnables, ainsi que définissant les changements nécessaires, ce qui en fait une option qui peut être passé.

utilisez ce code peut être ot vous aide 

  $('#selectable').bind("mousedown", function (e) {
      e.metaKey = true;    
 }).selectable('filter : td')​

si vous utilisez le sélectionnable sur la table pour td est le choix de l'utilisation ( 'filtre: td') else

utilisation sélectionnable ()

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top