jQuery Girl
  1. jQuery Girl
  3. Filtre personnalisé JQuery Mobile – Cases à cocher
Intereting Posts
Diagramme de Gantt / Chronologie verticale (similaire à Outlook) – Bibliothèque jQuery Ajouter une classe personnalisée à l’info-bulle Définissez l’atsortingbut «enctype» sur «application / json» jQuery change le SRC et l’ID d’un iFrame Existe-t-il un meilleur moyen d’organiser le javascript dans un seul fichier avec un code spécifique pour plusieurs pages? Comment utiliser l’adaptateur dans l’application dans Worklight qtip dynamic jQuery montre div, mais devient de plus en plus lent à chaque passage de la souris Est-il possible de glisser-déposer des données externes dans un jstree? jQuery Ui: impossible de faire glisser un élément de Div avec débordement JavaScript – Pourquoi mon téléchargement asynchrone ne se télécharge-t-il pas de manière asynchrone? Détecter le défilement dans un élément chargé ajax avec jQuery Comment positionner des éléments sous forme de courbe avec jQuery .each () Application Bootstrap “table-ssortingped” après la création dynamic de lignes Comment modifier le nombre de lignes par défaut de jQuery datatables Données de retour GetJSON

Filtre personnalisé JQuery Mobile – Cases à cocher

J’essaie de filtrer une liste d’éléments de case à cocher. Je souhaite que tous les éléments cochés soient inclus dans la liste, qu’ils répondent ou non aux critères de recherche. Mon idée était d’utiliser une recherche personnalisée et d’append un “~” au début de l’atsortingbut data-filtertext de tout élément coché, puis dans ma fonction de recherche, renvoie true si le “~” est présent ou si les critères habituels sont remplis . Tout d’abord, le code ci-dessous pose d’énormes problèmes et ne fonctionne pas. Notez le! sur le test pour vérifié – le statut n’a pas été mis à jour au moment où il est vérifié, j’aimerais beaucoup que quelqu’un puisse m’aider à corriger le problème. Deuxièmement, comment définir le data-filtertext correctement? Troisièmement, si vous pensez que cela va fonctionner? 

$('#my_id').find('.ui-btn').on('click', function(){ var id = this.htmlFor; var checked = ! $('#' + id).is(':checked'); if (checked) { var filter_text = '~' + this.innerHTML; this.atsortingbutes['data-filtertext'] = filter_text; } else { this.atsortingbutes['data-filtertext'] = this.innerHTML; } });

Vous n’avez pas besoin de modifier l’atsortingbut de filtre. A la place, utilisez l’événement filterCallback du widget filtrable pour voir si l’élément est coché ou contient le texte.

Donc, étant donné cette liste:

Attachez l’événement de rappel. Si la case est cochée, retourne false (ne pas filtrer) sinon, vérifiez à la fois le texte et data-filtertext pour voir si l’élément répond aux critères de filtrage: 

 $(document).on("pagecreate", "#page1", function () { $("#myList").filterable('option', 'filterCallback', checkedOrMatch); }); function checkedOrMatch(idx, searchValue) { var ret = false; var $chkbox = $(this).find('input[type="checkbox"]') var IsChecked = $chkbox.is(':checked'); if (IsChecked) { //always show checked items in list regardless of filter criteria ret = false; } else if (searchValue && searchValue.length > 0) { searchValue = searchValue.toLowerCase(); var text = $(this).text().toLowerCase(); var filttext = $chkbox.data("filtertext") || ''; filttext = filttext.toLowerCase(); //if neither text nor filtertext contain searchvalue, return true to filter out if (text.indexOf(searchValue) < 0 && filttext.indexOf(searchValue) < 0) { ret = true; //filter this one out } } return ret; }

DEMO