Фильтрация таблицы
Теперь можно добавить возможность выбора автора из списка и затем ото- бражать на экране книги только выбранного автора. Если в библиотеке очень много книг, такая возможность будет совсем не лишней! Сначала создадим список выбора с помощью тега
<SELECT>.
Выберите автора: <SELECT NAME="auth" onChange="auth ()">
<OPTION VALUE="">Bce
<OPTION VALUE="Дюма">Дюма
<OPTION VALUE="Достоевский">Достоевский
<OPTION VALUE="Толстой">Толстой </SELECT>
Поскольку при выборе какого-либо из пунктов списка содержимое акии броузера должно изменяться, применим обработчик событий onChange (напомним, что он реагирует на изменения значения). Пусть он вызывает еще не написанную функцию auth(), которая будет выводить на экран книги только выбранного автора. Для облегчения написания этой функпии мы продублировали названия пунктов списка в атрибуте VALUE= каждого из тегов
<OPTION>.
Теперь напишем эту функцию. Это проще, чем может показаться. Дело в том, что у нашего элемента управления есть свойство Filter, значением кото-рого может являться строка типа название поля=строка, то есть сравнение одного из полей с заданной строкой. В данном случае это может быть, например: Auther=Дюма.
Поскольку имя автора у нас уже хранится как значение атрибута VALUE= , мы можем написать так:
hudlit.Filter="Author="+document.all.auth.value;
Кстати, в качестве значения атрибута VALUE= первого элемента списка (“Все”) мы не зря использовали пустую строку. Сравнение с ней в любом случае даст положительный результат, поэтому она как бы отменяет фильтр. Теперь остается только перерисовать изображения с помощью метода Reset:
hudlit.Reset () ; Вот и все1 Давайте теперь посмотрим, что у нас получилось.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Электронная библиотека</ТITLЕ>
<STYLE> BODY { background-color: #F4FFEF; color: #182F1A;
font-family: sans-serif;
font-size: 120%; } </STYLE>
<SCRIPT> function auth() { hudlit.Filter="Author="+document.all.auth.value ; hudlit.Reset () ; } </SCRIPT>
</HEAD>
<BODY>
<Н1>Художественная литература</Н1> Выберите автора:
<SELECT NAME="auth" onChange="auth()">
<OPTION VALUE="">Bce <OPTION VALUE="Дюма">Дюма
<OPTION VALUE="Достоевский">Достоевский
<OPTION VALUE="Толстой">Толстой </SELECT> <BR><BR>
<OBJECT ID = "hudlit" CLASSID = "clsid:333C7BC4-460F-llDO-BC04-0080C7055A83" BORDER="0" WIDTH="0" HEIGHT="0">
<PARAM NAME = "DataURL" VALUE = "books.txt">
<PARAM NAME = "UseHeader" VALUE = "True"> </OBJECT>
<TABLE DATASRC = "#hudlit"> <TR>
<TD><SPAN DATAFLD="Author"></SPAN>, «
<SPAN DATAFLD="Name"> </SPAN>»,
<SPAN DATAFLD="Size"></SPAN> кбайт.
<SPAN DATAFLD="File" DATAFORMATAS="html"></SPAN></TD>
</TR>
</TABLE>
</BODY>
</HTML>
Результат показан на рис. 9.1. На этом рисунке вы можете видеть все назва ния книг, но если пользователь выберет из списка одного из авторов, то в окне броузера отобразятся только книги выбранного автора.
Теперь можно несколько усложнить задачу. Пусть пользователь имеет возможность не только выбирать автора, но и вводить название книги
Рис. 9.1. Страница, на которой используются данные из базы
(мало ли, может быть, он и не помнит имя автора). Кроме того, пусть него будет возможность отсортировать список книг по имени автора и. по названию книги.
Поскольку мы используем элемент управления Tabular Data, обе эти зада решаются очень просто.
Чтобы пользователь мог сам ввести название ну ной книги, создадим для этого текстовое поле и кнопку Поиск рядом с ним
<INPUT TYPE="text" NAME="book" SIZE="15" MAXLENGTH="25">
<INPUT TYPE="button" NAME="search" VALUE="Поиск" onClick="bookname()">
Как видите, кнопке Поиск мы назначили обработчик событий onClick. Тепе; при нажатии этой кнопки будет выполняться еще не написанная функция booknameO, которая должна выбрать из “базы данных” только те записи, в которых присутствует введенное пользователем название книги. Скорее всего, это будет одна запись, если, конечно, в базе нет книг с одинаковыи названиями, как, например, “ Записки сумасшедшего” Гоголя и “Записки сумасшедшего” Толстого.
Собственно говоря, эта функция очень похожа на предыдущую — нам ведь всего лишь нужно применить свойство Filter, в условии которого сравнить значения поля Name (название книги) со строкой, введенной пользователем:
hudlit. Filter="Name="+document. all. book. value;
hudlit.Reset() ;
Правда, для наглядности хорошо бы при поиске введенной пользовате-лем книги вернуть список выбора автора в исходное состояние, иначе может возникнуть следующая ситуация. Допустим, пользователь сначала выбрал из списка одного автора (например, пункт Толстой) и увидел на экранe список имеющихся книг Толстого. Затем он решил поискать книгу под названием “Тихий Дон” (которой в нашей базе данных пока нет). Он вводит в строку поиска название книги и, естественно, не получает ничего в ответ .В этот момент он смотрит на экран и видит, что у него в списке авторов выбран Толстой. Тогда он начинает думать, что, наверное, компью- тер искал “Тихий Дон” Толстого, хотя на самом деле фильтр применялся ко всей базе. Пользователь начинает раздражаться и нервничать.
Чтобы не возникало подобных недоумении, давайте просто при поиске введенного пользователем названия книги автоматически выбирать из списки авторов пункт Все.Для этого достаточно изменить свойство selectedlndex
списка выбора:
document. all. auth. selectedlndex=0 ;
Эту строку мы добавим в функцию booknameO. Аналогично можно посту-пить и при поиске книг одного автора - на всякий случай очищать поле ввода названия книги. Для этого добавим в функцию auth() следующую строку:
document.all.book.value="";
