|    | 
СИ-БИ техника | КВ техника | УКВ техника | Радиоизмерения | Защита от TVI | Источники питания | Софт | Расчеты | Справочники
Главная arrow Программирование arrow Java arrow Как отфильтровать данные в таблице  

Как отфильтровать данные в таблице

Проблема

Мне нужно выполнить фильтрацию таблицы, т. е. вывести в нее только те данные, что удовлетворяют определенному критерию. Можно ли это сделать?

Решение 1

Очевиднее некуда — выбрать из массива, на основе которого создается таблица, данные, удовлетворяющие заданному критерию, поместить их в другой массив и на основе уже этого массива создать таблицу.

Народ советует

Если набор критериев фильтрации ограничен, проще всего создать несколько массивов — по одному на каждый критерий. При выборе критерия фильтрации пользователем нам будет достаточно найти соответствующий массив и использовать его для создания таблицы.

Пример

Далее приведен HTML-код страницы, выводящей на экран таблицу — список языков программирования. При этом посетитель имеет возможность выбрать, какие языки отображать — интерпретируемые или компилируемые.

<HTML> <HEAD>

<TITLE>Языки программированиж/TITLE> <SCRIPT SRC="dynamictable.js"></SCRIPT>

<!-- Предполагается, что объявление объекта DynamicTable помещено в файл сценария dynamictable.js --> </HEAD> <BODY>

<DIV ID="tableHolder"></DIV> <SCRIPT TYPE="text/javascript">

var JSPS_COMPILING = "Компилируемый"; var JSPS_INTERPRETING = "Интерпретируемый"; var tableHead = new Array();

tableHead[0] = new Array("Категория", "Язык"); var tableBodyAll = new Array();

tableBodyAll[0] = new Array(JSPS_COMPILING, "C++"); tableBodyAll[1] = new Array(JSPS_INTERPRETING, "JavaScript"); tableBodyAll[2] = new Array(JSPS_COMPILING, "Pascal"); tableBodyAll[3] = new Array(JSPS_COMPILING, "Java"); tableBodyAll[4] = new Array(JSPS_INTERPRETING, "Perl"); tableBodyAll[5] = new Array(JSPS_COMPILING, "Delphi"); tableBodyAll[6] = new Array(JSPS_COMPILING, "Visual Basic"); // Объявляем два массива — для интерпретируемых и компилируемых // языков программирования соответственно var tableBodyI = new Array(); var tableBodyC = new Array();

// Заносим интерпретируемые и компилируемые языки в соответствующие // им массивы

for (var i = 0; i < tableBodyAll.length; i++) if {tableBodyAll[i][0] == JSPS_INTERPRETING)

tableBodyl[tableBodyl.length] = tableBodyAll[i] else

tableBodyC[tableBodyC.length] = tableBodyAll[i]; var tableObject = new EynamicTable(document.all["tableHolder"]);

// Функции для создания таблиц на основе различных массивов function showC () {

tableObject.createTable(tableBodyC, tableHead, null, "Языки программирования"); tableObject.showTable(); }

function showl() {

tableObject.createTable(tableBodyl, tableHead, null, "Языки программирования");

tableObject.showTable(); }

function showAll() {

tableObject.createTable(tableBodyAll, tableHead, null,"Языки программирования");

tableObj ect.showTable(); }

ShowAll(); </SCRIPT> <FORM>

<INPUT TYPE="button" VALUE="Вывести компилируемые" ONCLICK="showC();">

<INPUT TYPE="button" VALUE="Вывести интерпретируемые" ONCLICK=" showl () ;" >

<INPUT TYPE="button" VALUE="Вывести все" ONCLICK= "showAll () ; "> </FORM> </BODY> </HTML>

Решение 2

Также простое — просмотреть все ячейки таблицы с помощью свойств DOM. Все строки, не удовлетворяющие заданному критерию фильтрации, нужно скрыть, присвоив свойству display вложенного объекта style строку "попе". А все строки, удовлетворяющие критерию фильтрации, нужно сделать видимыми, для чего свойству display вложенного объекта style нужно присвоить строку "table-row".

Народ предупреждает!

В этом случае нужно использовать именно свойство display, а не visibility. Как мы знаем из главы 5, свойство display позволяет скрыть элемент страницы полностью, словно он и не был определен в коде HTML. А свойство visibility только делает элемент страницы невидимым, но оставляет его на странице, где он виден как пустое пространство.

Internet Explorer здесь снова демонстрирует свои, скажем так, особенности реализации. Он не поддерживает значение "table-row" свойства display (об этом говорилось в той же главе 5), а ведь именно это значение позволяет отобразить элемент страницы как строку таблицы. Поэтому в случае Internet Explorer приходится использовать значение "block" этого свойства как наиболее близкое к "table-row" по результату действия.

Для выполнения такого рода фильтрации автор написал универсальную функцию jspsFilterTable (листинг 8.4). Вот формат ее вызова:

jspsFilterTabie (<Таблиц>, <Функция фильтрации> [, <Дополнительный параметр функции фильтрации]);

Первым параметром функции передается таблица, которую нужно отфильтровать. Здесь все ясно.

Второй же параметр задает функцию фильтрации, проверяющую, удовлетворяют ли данные, помещенные в ячейках строки, заданному критерию. Эта функция должна принимать единственный обязательный параметр — строку таблицы — и возвращать значение true, если данные в ячейках этой строки удовлетворяют критерию фильтрации, и false в противном случае. Также функция фильтрации может принимать дополнительный параметр, который передается функции jspsFiiterTabie.

Функция jspsFilterTabie не возвращает значения.

Внимание!

Функция jspsFiiterTabie выполняет фильтрацию только секции тела таблицы. Автор посчитал, что секцию "поддона" и уж тем более секцию "шапки" фильтровать смысла не имеет.

Листинг 8.4. Функция JspsFiateriraMe, выполняющая фильтрацию таблицы

function jspsFiiterTabie(pTable, pFilterFunction, pAdditional) {

var piObject = jspsGetProgramInfo(); var isIE = (piObject.programName == JSPS_GPI_MSIE) var bodySectionObject = pTable.getElementsByTagName("TBODY"); bodySectionObject = bodySectionObject[0];

for (var i = 0; i < bodySectionObject.childNodes.length; i++) { var rowObject = bodySectionObject.childNodes[i]; rowObject.style.display = (pFilterFunction(rowObject, pAdditional)) ? ((isIE) ? "block" : "table-row") : "none"; } }

Если мы собираемся пользоваться для фильтрации таблицы функцией jspsFiiterTabie, нам также пригодится функция jspsClearFilterTable (листинг 8.5). Она делает все ячейки таблицы видимыми, аннулируя результат вызова функции jspsFilterTable. Функция имеет очень простой формат вызова:

jspsClearFilterTable(<Таблица>) ;

Единственным параметром этой функции передается таблица, ячейки которой нужно сделать видимыми. Значения эта функция не возвращает.

Листинг 8.5. Функция jspsClearFilterTable, аннулирующая результат выполнения функции jspsFilterTable, делая все ячейки таблицы видимыми

function jspsClearFilterTable(pTable) {

var piObject = jspsGetProgramlnfo();

var isIE = (piObject.programName == JSPS_GPI_MSIE)

var bodySectionObject = pTable.getElementsByTagName("TBODY");

bodySectionObject = bodySectionObject[0];

for (var i = 0; i < bodySectionObject.childNodes.length/ i++)

bodySectionObject.childNodes[i].style.display = (isIE) ? "block" : " table-row" ; }

Внимание!

Объявления функций jspsFilterTable И jspsClearFilterTable используют функцию jspsGetPrograminfо, чье объявление приведено в листинге 3.1.

Хорошая идея!

Добавьте объявление этих функций в файл сценариев dynamictable.js, содержащий объявление объекта DynamicTable. Впоследствии, чтобы использовать их, достаточно будет просто подключить к Web-странице этот файл сценариев с помощью тега:

<SCRIPT SRC="dynamictable.js"></SCRIPT>

Пример

Что ж, напишем еще одну страницу, которая будет выводить на экран таблицу — список языков программирования с возможностью фильтрации их по категории.

<HTML> <HEAD>

<TITLE>Языки программированиж/TITLE>

<SCRIPT SRC="browserdetect.js"></SCRIPT>

<!-- Предполагается, что объявление функции jspsGetProgramlnfо

помещено в файл сценария browserdetect.js -->

<SCRIPT SRC="dynamictable.js"></SCRIPT>

<!-- Предполагается, что объявление объекта DynamicTable и функций jspsFilterTable и jspsClearFilterTable помещено в файл сценария dynamictable.js --> </HEAD> <BODY>

<DIV ID="tableHolder"></DIV> <SCRIPT TYPE="text/javascript">

var JSPS_COMPILING = "Компилируемый";

var JSPS_INTERPRETING = "Интерпретируемый";

var tableHead = new Array();

tableHead[0] = new Array("Категория", "Язык");

var tableBody = new Array();

tableBody[0] = new Array(JSPS_COMPILING/ "C++");

tableBody[1] = new Array<JSPS_INTERPRETING, "JavaScript");

tableBody[2] = new Array(JSPS_COMPILING, "Pascal");

tableBody[3] = new Array(JSPS_COMPILING, "Java");

tableBody[4] = new Array(JSPS_INTERPRETING, "Perl");

tableBody[5] = new Array(JSPS_COMPILING, "Delphi");

tableBody[6] = new Array(JSPS_COMPILING, "Visual Basic");

var tableObject = new DynamicTable(document.all £"tableHolder"]);

tableObject.createTable(tableBody, tableHead, null, "Языки программирования");

tableObject.showTable();

// Функция фильтрации. Здесь мы передаем значение, с которым должен // сравниваться содержащийся в ячейке текст, дополнительным // параметром

function filterTable(pRowObject, pAdditional) { return (pRowObject.childNodes[0].firstChild.nodeValue == pAdditional) ; } </SCRIPT> <FORM>

<INPUT TYPE="button" VALUE="Вывести компилируемые" ONCLICK="jspsFilterTable(tableObject.table, filterTable,

JSPS_COMPILING);">

<INPUT TYPE="button" VALUE="Вывести интерпретируемые" ONCLICK="jspsFilterTable(tableObject.table, filterTable, JSPS_INTERPRETING);">

<INPUT TYPE="button" VALUE="Вывести все" ONCLICK="jspsClearFilterTable(tableObject.table);">

</FORM> </BODY> </HTML>

Как видим, код страницы получился много компактнее, чем в предыдущем примере. Вот что значит использование файлов сценариев!

Народ предупреждает!

В случае таблиц, выводимых постранично, нам придется вызывать функцию jspsFilterTable сразу же после вывода на экран очередной "страницы" таблицы.

RLBN.ru - Электроника и компьютеры
0.1517
Hosted by uCoz