I have a JavaScript Filter which allows me to filter out rows (make hidden) from my Task List.
Demo of what I have right now: http://ift.tt/1NtGe72
It currently works with dropdown selection fields and allows multiple filters to be combined.
For example you can filter out every task that doesn't have a Status of Completed and doesn't have a Milestone set to Milestone 3.
It works great thanks to the help creating it from SO user Lucio Paiva on my other question here How to combine multiple FIlters together to filter Task Rows using jQuery?
It looks like this...
I now need to improve upon the features of this code to add some different types of filters besides a simple true/false based on a dropdown selection.
- Date Range - I need to add in the ability to filter out rows that dont match a date range. FOr example be able to use a fancy date range selector...
- Multi-select/checkbox - I also need to be able to select more than 1 item for some of the filter columns. For example on the Milestone column. Be able to select Milestone 2 and Milestone 3 and it would filter out all rows that don't match one of the 2. Image below shows example of GitHub issue which has a filter that allows more than 1 selection on a Label filter. IMage has 3 labels filters selected...
- With both these new types of filters it needs to still work with the existing dropdown selection filters and still allow multi-filter so that many filters can be set and work together like it currently works.
Below is my code for the filter JS and HTML
JavaScript which filters the Task list rows...
(function () {
var
filters = {
user: null,
status: null,
milestone: null,
priority: null,
tags: null,
title: 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();
})();
HTML table of Filters and Tasks which the Filters apply to...
<br><h2>Testing Task List Filters</h2><hr><br>
<div class="container">
<div class="row">
<table class="table">
<thead>
<tr class="filters">
<th>
<input type="text" id="title-filter" value="" class="form-control">
</th>
<th>Assigned User
<select id="user-filter" class="form-control">
<option>None</option>
<option>John</option>
<option>Rob</option>
<option>Larry</option>
<option>Donald</option>
<option>Roger</option>
</select>
</th>
<th>Status
<select id="status-filter" class="form-control">
<option>Any</option>
<option>Not Started</option>
<option>In Progress</option>
<option>Completed</option>
</select>
</th>
<th>Milestone
<select id="milestone-filter" class="form-control">
<option>None</option>
<option>Milestone 1</option>
<option>Milestone 2</option>
<option>Milestone 3</option>
</select>
</th>
<th>Priority
<select id="priority-filter" class="form-control">
<option>Any</option>
<option>Low</option>
<option>Medium</option>
<option>High</option>
<option>Urgent</option>
</select>
</th>
<th>Tags
<select id="tags-filter" class="form-control">
<option>None</option>
<option>Tag 1</option>
<option>Tag 2</option>
<option>Tag 3</option>
</select>
</th>
</tr>
</thead>
</table>
<div class="panel panel-primary filterable">
<div class="panel-heading">
<h3 class="panel-title">Tasks</h3>
<div class="pull-right"></div>
</div>
<table id="task-list-tbl" class="table">
<thead>
<tr>
<th>Title</th>
<th>Created</th>
<th>Due Date</th>
<th>Priority</th>
<th>Milestone</th>
<th>Assigned User</th>
<th>Tags</th>
</tr>
</thead>
<tbody>
<tr id="task-1"
class="task-list-row"
data-task-id="1"
data-title="Task title 1"
data-user="Larry"
data-status="In Progress"
data-milestone="Milestone 2"
data-priority="Urgent"
data-tags="Tag 2">
<td>Task title 1</td>
<td>01/24/2015</td>
<td>09/24/2015</td>
<td>Urgent</td>
<td>Milestone 2</td>
<td>Larry</td>
<td>Tag 2</td>
</tr>
<tr id="task-2"
class="task-list-row"
data-task-id="2"
data-title="Task title 2"
data-user="Larry"
data-status="Not Started"
data-milestone="Milestone 2"
data-priority="Low"
data-tags="Tag 1">
<td>Task title 2</td>
<td>03/14/2015</td>
<td>09/18/2015</td>
<td>Low</td>
<td>Milestone 2</td>
<td>Larry</td>
<td>Tag 1</td>
</tr>
<tr id="task-3"
class="task-list-row"
data-task-id="3"
data-title="Task title 3"
data-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>
<tr id="task-4"
class="task-list-row"
data-task-id="4"
data-title="Task title 4"
data-user="Donald"
data-status="Completed"
data-milestone="Milestone 1"
data-priority="High"
data-tags="Tag 1">
<td>Task title 4</td>
<td>11/16/2014</td>
<td>02/29/2015</td>
<td>High</td>
<td>Milestone 1</td>
<td>Donald</td>
<td>Tag 1</td>
</tr>
<tr id="task-5"
class="task-list-row"
data-task-id="5"
data-title="Task title 5"
data-user="Donald"
data-status="Completed"
data-milestone="Milestone 3"
data-priority="High"
data-tags="Tag 1">
<td>Task title 5</td>
<td>11/16/2014</td>
<td>02/29/2015</td>
<td>High</td>
<td>Milestone 3</td>
<td>Donald</td>
<td>Tag 1</td>
</tr>
<tr id="task-6"
class="task-list-row"
data-task-id="6"
data-title="Task title 6"
data-user="Donald"
data-status="Completed"
data-milestone="Milestone 2"
data-priority="High"
data-tags="Tag 3">
<td>Task title 6</td>
<td>11/16/2014</td>
<td>02/29/2015</td>
<td>High</td>
<td>Milestone 2</td>
<td>Donald</td>
<td>Tag 3</td>
</tr>
<tr id="task-7"
class="task-list-row"
data-task-id="7"
data-title="Task title 7"
data-user="Donald"
data-status="Completed"
data-milestone="Milestone 1"
data-priority="High"
data-tags="Tag 1">
<td>Task title 7</td>
<td>11/16/2014</td>
<td>02/29/2015</td>
<td>High</td>
<td>Milestone 1</td>
<td>Donald</td>
<td>Tag 1</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire