11.12.2014, 02:42
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Плагин для фильтрации строк таблиц
заголовки делаются стандартно - строки 77 - 84
добавлен параметр исключения колонок из фильтрации - это массив с номерами исключаемых колонок, либо ничего не указывайте.
Пример: Фильтр для таблицы
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body{height:1000px;background:#FF8C00;font-family:Georgia,"Times New Roman",Times,serif;letter-spacing:1px}
.zebra select{margin:0px auto;width:100%;background:#CCC;color:#FFF}
.zebra select option {color: #ff0;background: #000;}
.zebra select option:nth-of-type(1) {color: #FFFFFF;background: #000;}
.zebra td{border:1px solid #555555;color:#FFF;padding:5px;text-align:left;background:#000}
.zebra tr:nth-child(2n) td{background:#383838}
.zebra thead td:hover{background-image:-webkit-gradient(linear,top,bottom,color-stop(0,#E6E6FA),color-stop(1,#696969));background-image:-ms-linear-gradient(top,#E6E6FA,#696969);background-image:-o-linear-gradient(top,#E6E6FA,#696969);background-image:-moz-linear-gradient(top,#E6E6FA,#696969);background:-webkit-linear-gradient(top,#E6E6FA,#696969);background:linear-gradient(to bottom,#E6E6FA,#696969)}
.zebra thead tr td{padding:5px;font-weight:bold;background-image:-webkit-gradient(linear,top,bottom,color-stop(0,#000000),color-stop(1,#CCCCCC));background-image:-o-linear-gradient(top,#000000,#CCCCCC);background-image:-moz-linear-gradient(top,#000000,#CCCCCC);background-image:-webkit-linear-gradient(top,#000000,#CCCCCC);background:linear-gradient(to bottom,#000000,#CCCCCC)}
.zebra tbody tr:hover td{background-image:-webkit-gradient(linear,left,right,color-stop(0,#D2691E),color-stop(1,#DEB887));background-image:-ms-linear-gradient(left,#D2691E,#DEB887);background-image:-o-linear-gradient(left,#D2691E,#DEB887);background-image:-moz-linear-gradient(left,#D2691E,#DEB887);background:-webkit-linear-gradient(left,#D2691E,#DEB887);background:linear-gradient(to right,#D2691E,#DEB887)}
table.zebra{border-collapse:collapse;border-spacing:0;box-shadow:0 2px 1px 5px rgba(242,242,242,0.1);width:700px;margin:0px auto}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function () {
$("table").tablework([0,2]); //указать исключаемые колонки и без параметров
});
$.fn.tablework = function(arr) {
return this.each(function() {
var $table = $(this),
$trs = $table.find("tbody tr"),
$thead = $table.find('thead');
$thead.length || ($thead = $('<thead/>').prependTo($table));
var $tr = $('<tr/>').prependTo($thead),
hide = {};
$("td", $trs.first()).each(function(indx, element) {
var options = [$('<option/>', {
'text': 'Без выбора'
})],
$td = $trs.find(":nth-child(" + (indx + 1) + ")"),
temp = {};
$td.each(function(i, el) {
var text = $(el).text();
temp[text] || (
options.push($('<option/>', {
'text': text
})),
temp[text] = true
);
});
var $select = $('<select/>', {
multiple: "multiple",
html: options,
'change': function() {
var val = $(this).val() || [];
hide[indx] = [];
this.selectedIndex && $td.each(function(i, el) {
$.inArray($(el).text(), val) == -1 && hide[indx].push($trs[i])
});
var trs = [];
for (var k in hide) $.merge(trs, hide[k]);
$.unique(trs);
$trs.show();
$(trs).hide()
}
});
var td = $('<td/>').appendTo($tr);
if(!arr || $.inArray(indx, arr)==-1 ) td.append($select);
});
});
};
</script>
</head>
<body>
<br>
<table class="zebra" >
<thead>
<tr>
<th>№</th>
<th>Title 1</th>
<th>Title 2</th>
<th>Title 3</th>
</tr>
</thead>
<tbody>
<tr><td>1</td>
<td class="col1">Епихин</td>
<td class="col2">Александр</td>
<td class="col3">Валерьевич</td>
</tr>
<tr> <td>2</td>
<td class="col1">Буртовой</td>
<td class="col2">Евгений</td>
<td class="col3">Олегович</td>
</tr>
<tr><td>3</td>
<td class="col1">Епихин</td>
<td class="col2">Александр</td>
<td class="col3">Анатольевич</td>
</tr>
<tr> <td>4</td>
<td class="col1">Епихин</td>
<td class="col2">Сергей</td>
<td class="col3">Валерьевич</td>
</tr>
<tr><td>5</td>
<td class="col1">Буртовой</td>
<td class="col2">Александр</td>
<td class="col3">Олегович</td>
</tr>
</tbody>
</table>
</body>
</html>
Последний раз редактировалось рони, 04.02.2018 в 20:03.
Причина: добавлено исключение колонок из фильтрации
|
|
11.12.2014, 18:53
|
 |
Профессор
|
|
Регистрация: 22.03.2012
Сообщений: 3,744
|
|
|
Сообщение от Poznakomlus
|
|
еще вариант, но и он далек от идеала.
|
у твоего js-кода есть один большой недостаток - его нужно модифицировать при изменении количества столбцов |
|
11.12.2014, 19:17
|
 |
Профессор
|
|
Регистрация: 13.03.2013
Сообщений: 1,572
|
|
|
Сообщение от bes
|
|
его нужно модифицировать при изменении количества столбцов
|
да, именно так
Но он прост, в нем видны повторяющиеся блоки и понятно, что надо оптимизировать |
|
11.12.2014, 20:26
|
|
Интересующийся
|
|
Регистрация: 09.12.2014
Сообщений: 21
|
|
|
bes,
Благодарю за разъяснения, но для меня подобные конструкции пока еще сложные. Особенно строки с прототипирование и их методами.
Poznakomlus,
Спасибо что уделил внимание. Оказывается у одной задачи есть много решений. У тебя не совсем правильно работает код. Например если снять выделение с одной фамилии и со всех отчеств, а потом начать отмечать отчества, то появятся строки с фамилией которая не выбрана.
рони,
Спасибо, круто. Но тут нет возможности множественного выбора.
Мой код в сравнении с вашими слишком примитивный. Пойду читать матчасть.
|
|
11.12.2014, 20:33
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Сообщение от leshiple
|
|
Но тут нет возможности множественного выбора
|
есть ... но это если очень хочется
<select multiple>...</select> |
|
11.12.2014, 20:51
|
|
Профессор
|
|
Регистрация: 22.03.2012
Сообщений: 3,744
|
|
|
Сообщение от leshiple
|
bes,
Благодарю за разъяснения, но для меня подобные конструкции пока еще сложные. Особенно строки с прототипирование и их методами.
|
на самом деле ничего сложного
var trs = this.querySelectorAll("tbody tr");
Array.prototype.map.call(trs, function (tr ) {
если бы querySelectorAll возвращал обычный массив, то можно было бы сделать так
trs.map(function (tr) {
иначе приходится вызывать этот метод в контексте trs посредством call или apply
итого: остаётся только понять что такое map 
https://developer.mozilla.org/ru/doc...ects/Array/map |
|
11.12.2014, 21:36
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
добавил множественный выбор в плагин фильтрации строк таблицы ... Ctrl и Shift ... смотреть 11 пост ... для любого количества строк,колонок и самих таблиц
Последний раз редактировалось рони, 12.12.2014 в 01:40.
|
|
12.12.2014, 21:08
|
|
Интересующийся
|
|
Регистрация: 09.12.2014
Сообщений: 21
|
|
|
bes,
То есть метод map пройдет по массиву trs и и выполнит функцию function (tr) для каждого элемента массива на подобии цикла, а параметр tr и будет элементом массива trs и результатом будет новый массив в который под соответствующими индексами добавятся результаты выполнения функции function (tr)?
|
|
12.12.2014, 21:26
|
|
Профессор
|
|
Регистрация: 22.03.2012
Сообщений: 3,744
|
|
|
Сообщение от leshiple
|
bes,
То есть метод map пройдет по массиву trs и и выполнит функцию function (tr) для каждого элемента массива на подобии цикла, а параметр tr и будет элементом массива trs и результатом будет новый массив в который под соответствующими индексами добавятся результаты выполнения функции function (tr)?
|
да, если ты понял, что в реальности trs - не массив
на попадание в результирующий массив влияет наличие return в теле callback-функции, если return-а нет, то туда попадут одни undefined-ы
+ callback-функции можно передать ещё пару параметров помимо ссылки на текущий элемент |
|
12.12.2014, 22:40
|
|
Интересующийся
|
|
Регистрация: 09.12.2014
Сообщений: 21
|
|
Это круто.
var arr = [1, 2, 3];
arr = arr.map(function (el) {
el++;
return el;
});
alert(arr);
bes, если я правильно понял статью, ссылку на которую вы мне дали, то Array.prototype можно заменить на [] |
|
|
|
