web-dev-qa-db-fra.com

Comment réinitialiser/effacer tous les filtres (select2, select, input) de la table x-editable?

Je souhaite disposer d'un bouton de réinitialisation/suppression pour tous les filtres utilisés, mais je ne vois pas comment déclencher un événement de clic lié à ce bouton ... par exemple:

 enter image description here

Que devrais-je déclencher et/ou attacher et passer à quoi afin de réinitialiser tous ces champs select2, select et input et restaurer tous les filtres à des valeurs null/empty?

javascriptjqueryjquery-select2x-editable
15
Crazy Serb

En cliquant sur votre bouton, tout ce dont vous avez besoin est de réinitialiser la valeur de select2.

Voir cette méthode de programmation pour le réinitialiser https://select2.github.io/examples.html#programmatic

Tout ce dont vous avez besoin pour que votre bouton réinitialise toutes les entrées select2 au lieu de 1, comme indiqué dans l'exemple.

$('#yourButton').on('click', function() {
    $('#yourfirstSelect2').val(null).trigger("change");
    $('#yourSecondSelect2').val(null).trigger("change");
    ....
});

Juste au cas où vous utiliseriez la version 3.5.x, alors il y a un petit changement comme on le voit ici http://select2.github.io/select2/#programmatic

$('#yourButton').on('click', function() {
    $('#yourfirstSelect2').select2("val", "");
    $('#yourSecondSelect2').select2("val", "");
    ....
});

Pour réinitialiser d'autres valeurs dans x-editable, vous pouvez suivre cette x-editable - réinitialiser les champs .

Il y a toujours un moyen jQuery de tout effacer sous une forme -

$('#formName')[0].reset();
26
Bikas

Cela a fonctionné pour moi

Il réinitialisera toutes les options select2 sélectionnées lorsque le formulaire sera réinitialisé. Vous pourrez alors lancer cet événement au clic ou tout autre événement en fonction de vos besoins.

$("#id").val(null).trigger("change");
6
gaurav

Selon votre capture d'écran, je suppose que tous vos filtres sont générés dynamiquement. Pour réinitialiser tout le champ, vous pouvez utiliser le code jQuery suivant.

$( document ).ready(function() {
    $('body').on('click','#resetButtonSelector', function() {
       $("body select").select2("val", "");
       $("body input").val("");
       $('body select').val("")
    });
});

Si vous avez un formulaire, vous pouvez utiliser ce code:

$( document ).ready(function() {
    $('body').on('click','#resetButtonSelector', function() {
       $("body select").select2("val", "");
       $('#formId')[0].reset();
    });
});

Voici quelques détails supplémentaires qui pourraient vous convenir,

$(':input','#formId')
 .not(':button, :submit, :reset, :hidden')
 .val('')
 .removeAttr('checked')
 .removeAttr('selected');

Veuillez consulter cet article pour: Réinitialiser un formulaire à plusieurs étapes avec jQuery

1
Bhavin Solanki

essayez ce code ci-dessous pour tout réinitialiser. trouvé sur https://vitalets.github.io/x-editable/docs.html#newrecord

<button id="reset-btn" class="btn pull-right">Reset</button>


<script>
$('#reset-btn').click(function() {
$('.myeditable').editable('setValue', null)  //clear values
    .editable('option', 'pk', null)          //clear pk
    .removeClass('editable-unsaved');        //remove bold css

$('#save-btn').show();
$('#msg').hide();                
});
<script>
1
J Santosh