Wie kombiniert man mehrere Filter zusammen, um filter Task Zeilen mit jQuery?

Habe ich gehackt zusammen ein einfaches Beispiel Task-Liste, Tabelle mit HTML und der Verwendung von jQuery. Ich habe anbei noch einige on change Veranstaltungen zu meinem Filter DropDown Selection Fields

Demo: http://codepen.io/jasondavis/pen/MwOwMX?editors=101

Habe ich eine Filter-Auswahl-Feld für jeden von diesen:

Zugewiesenen Benutzer
Task-Status
Meilenstein
Priorität
Tags

Unabhängig Sie alle arbeiten, um den job zu erledigen in ausfiltern von nicht passenden Ergebnisse von meinem Task-Liste Tabelle.

Für jede Aufgabe Zeile, Speichere ich den Wert der einzelnen filterbaren option in einem Data Attribute wie in diesem Beispiel Aufgabe Zeile HTML -:

      <tr id="task-3"
          class="task-list-row" 
          data-task-id="3"
          data-assigned-user="Donald"
          data-status="Not Started"
          data-milestone="Milestone 1"
          data-priority="Low"
          data-tags="Tag 3">
        <td>Task title 3</td>
        <td>11/16/2014</td>
        <td>02/29/2015</td>
        <td>Low</td>
        <td>Milestone 1</td>
        <td>Donald</td>
        <td>Tag 3</td>
      </tr>

Also der eigentliche Text für die Task-Zeile spielt keine Rolle, weil der Task-Zeile wird nicht angezeigt, alle Eigenschaften. Was zählt, ist der gespeicherte Wert in der Task-Zeile Data-Attribute.

Aufgabe der Zeile/Datensatz mit einem Miledstone eingestellt Milestone 2 wird ein Data-Attribut wie dieses data-milestone="Milestone 2"

Ein Beispiel-JavaScript/jQuery-Filter code:

//Task Milestone Dropdown Filter
$('#milestone-filter').on('change', function() {
  var taskMilestone = this.value;

  if(taskMilestone === 'None'){
    $('.task-list-row').hide().filter(function() {
      return $(this).data('milestone') != taskMilestone;
    }).show();
  }else{
    $('.task-list-row').hide().filter(function() {
      return $(this).data('milestone') == taskMilestone;
    }).show();  
  }
});

So, wie ich schon erwähnte. Ich kann jede meiner "Filter", um die Arbeit von thereself, aber sobald ich versuche mehr als 1 filter gleichzeitig, es wird nicht funktionieren mit diesem aktuellen code.

Ich würde schätzen jede Hilfe bei der Modifizierung von meinem code, um eine funktionierende multi-filter-Beispiel bitte?

Mein Aktuelles demo ist hier: http://codepen.io/jasondavis/pen/MwOwMX?editors=101

Update Test 2

Nachdem einige dachten, ich bin zu denken, dass vielleicht ich brauche zu speichern, die die aktuellen Filter-Werte in Variablen und dann auf jede change - Ereignis anstelle von das:

 return $(this).data('milestone') != taskMilestone;

Wäre es stattdessen brauchen, um mehr so sein wie diese...

 return $(this).data('milestone') != taskMilestone
        && $(this).data('priority') != taskPriority
        && $(this).data('tags') != taskTags
        && .... for all filters;

Klingt das ungefähr richtig?

Nevermind, habe gerade versucht, dies ohne Glück!

InformationsquelleAutor JasonDavis | 2015-06-23

9

Sie waren in der Nähe in Ihrem zweiten test. Hier ist eine funktionierende demo:

http://codepen.io/luciopaiva/pen/oXpzGw?editors=101

Umgestalteten ich deinen code ein wenig auf und zentralisierte die Logik um updateFilters(), die aufgerufen wird, jedes mal wenn ein change-Ereignis Auftritt. Sie beginnt, indem Sie annehmen, dass jede Zeile gezeigt werden sollte und dann tests gegen jeden filter, unterscheidet sich von der Standard-Wert (sei es 'Any', 'None' oder undefined).

Durch die Art und Weise, wenn Sie ändern, können data-user-assigned in data-user, hier ist ein etwas verbesserter code, die erheblich reduziert die Anzahl der code-Zeilen:

http://codepen.io/luciopaiva/pen/YXYGYE?editors=101

Ich bin mit der call ich kann also passieren das DOM-element (referenziert durch this), um den Kontext der changeFilter().

Außerdem habe ich alle Filter in ein Objekt (filters) also ich kann auf jeden seinen Namen, wie filters[filterName] und in der Lage sein, Dinge zu automatisieren.

Es ist erwähnenswert, dass filters variable ist global, und das ganze sollte innerhalb einer IIFE.

Aber lassen Sie uns weiter. Sie können sogar noch weiter gehen und entfernen Sie den Standardcode für jeden change Ereignis, wenn man bedenkt, können Sie element #assigned-user-filter zu #user-filter:

http://codepen.io/luciopaiva/pen/YXYGaY?editors=101

Die Javascript von diesem letzten Ansatz:
```
(function () {
  var
    filters = {
      user: null,
      status: null,
      milestone: null,
      priority: null,
      tags: null
    };

  function updateFilters() {
    $('.task-list-row').hide().filter(function () {
      var
        self = $(this),
        result = true; //not guilty until proven guilty

      Object.keys(filters).forEach(function (filter) {
        if (filters[filter] && (filters[filter] != 'None') && (filters[filter] != 'Any')) {
          result = result && filters[filter] === self.data(filter);
        }
      });

      return result;
    }).show();
  }

  function bindDropdownFilters() {
    Object.keys(filters).forEach(function (filterName) {
      $('#' + filterName + '-filter').on('change', function () {
        filters[filterName] = this.value;
        updateFilters();
      });
    });
  }

  bindDropdownFilters();
})();
```
Hier habe ich die gleiche Logik wie in der zweite Ansatz, die Verwendung von filtern auf Namen zu verweisen jedem dropdown-Menü. Klassische boilerplate!
- das ist einfach genial! Ich könnte nie kam so eine elegante Lösung und anscheinend sonst niemand auf, SO kann entweder! Also danke sehr das ist sehr hilfreich zu sein in meinem Projekt-Management-app, die ich auf Arbeit bin.
- Wenn Sie Lust auf eine Herausforderung es wäre schön, fügen Sie einen neuen filter für Termine. Etwas, wo der Optionen wäre so etwas wie Fälligkeitsdatum fällig innerhalb von 30 Tagen, 7n Tage, etc...sowie zugangstermin in der Vergangenheit aufgrund von heute. Offensichtlich sind Sie nicht verpflichtet, aber wenn Sie genießen die Lösung dieser Art von Problemen, ist etwas anderes, das ich wollte, zu tun, einen filter für und wie auch ich fühlen es ist vielleicht nicht zu schwierig. Irgendwelche Gedanken? Vielen Dank für die obige Lösung mal wieder so richtig zu schätzen wissen, die Zeit und Mühe, seine große!
- Sie sind herzlich willkommen! Über die Fälligkeit filter, werfen Sie einen Blick auf moment.js, es ist eine wunderbare Bibliothek für die Manipulation von Datum/Zeit.Posten Sie, was Sie haben, so weit wie eine neue Frage, und vielleicht können wir anfangen.
InformationsquelleAutor Lucio Paiva

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.