Базы данных Simple Tabular Data

Простые базы данных (STD)

      Вы можете создать простую базу данных в текстовом файле с расширением txt. Для этого можно воспользоваться обычным блокнотом Windows. Затем вы можете показать ее, всю или только часть, на своей странице. При этом построение таблицы произойдет автоматически. Вам не придется путаться в множестве табличных тэгов, таких как < TR> и < TD>. Но самое главное заключается в том, что вы сможете сортировать и фильтровать данные. Нельзя только редактировать данные и сохранять на диске на сервере. Чтобы внести изменения в базу данных, вам придется отредактировать текстовый файл и перекачать его на сервер, как вы это делали при создании и изменении своего сайта.
      База данных (текстовый файл) может содержать как просто данные для просмотра, так и тэги, которые при показе будут интерпретироваться. Например, вы можете поместить в ячейки таблицы картинки, ссылки и др. элементы. Все это делается с помощью элемента ActiveX под названием Simple Tabular Data (STD). В IE 5.x и 6.0 этот элемент имеется.
      Все это подробно описано в книге "Сам себе Web-дизайнер", (512с.), а здесь мы рассмотрим простейший пример использования STD.

Пример 1

Создадим текстовый файл, в котором разместим наши табличные данные следующим образом. В 1-й строке укажем имена столбцов. Это - просто переменные, например p1, p2, ... Они записываются через некоторый символьный разделитель, например, через запятую ',' или вертикальную черту '|'. В конце строки следует нажать клавишу < Enter>
Во 2-й строке записываются данные, через выбранный вами разделитель. Каждый элемент соответствует своему столбцу. Аналогично записываем остальные строки нашей таблицы.
Если ваши данные содержат запятые, то в качестве разделителя лучше использовать |. Вот пример таблицы из 3-х столбцов и 5-строк данных (1-я строка - имена столбцов) c разделителем в виде запятой:
p1,p2,p3
Вася,Дворник,5000
Аня,Секретарша,25000
Петя,Водитель,6000
Ипполит,Директор,35000 < A HREF="raznoe.htm">Раздел 'Разное',Cсылка
В последней строке мы написали тэг HTML, а не просто слова или цифры. Сохраним этот файл под именем, например, kadr.txt

Теперь в HTML-код нужно вставить элемент ActiveX, обеспечивающий интерпретацию данных из текстового файла с данными. Он задается тэгом < OBJECT>, содержащим тэги параметров. Вообще говоря, параметров у него много, но мы используем только некоторые. Если вы используете кириллицу при наборе данных, то для гарантированно правильного отбражения данных в таблице добавьте в тэг < OBJECT> еще один параметр:
< PARAM NAME='CharSet' VALUE='windows-1251'> Элемент ActiveX (объект STD):
<OBJECT ID="kadr" CLASSID="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83"> <!Разделитель - запятая > <PARAM NAME="FieldDelim" VALUE=","> <! Текстовый файл - источник данных > <PARAM NAME="DataURL" VALUE="kadr.txt"> <PARAM NAME="UseHeader" VALUE=true> </OBJECT>
В нужном месте HTML-кода следует вставить группу тэгов, организующих таблицу для просмотра. В этой таблице следует организовать лишь заголовки столбцов (если они нужны) и лишь одну строку данных.
Обратите внимание, как связана таблица с элементом ActivX. Атрибут DATASRC имеет значение # id_тэга_object, в нашем примере это #kadr.
Атрибут DATAFORMATAS='html' указывает, что содержимое столбца следует интерпретировать, как HTML-код, а не рассматривать как текст. Таблица для отображения данных (вставляется в нужном месте HTML-кода):
<TABLE WIDTH 75% DATASRC=#kadr BORDER style="background:ffff00"> <THEAD><br> <TH>Имя</TH> <TH>Должность</TH> <TH>Зарплата</TH> </THEAD> <TR> <TD><SPAN DATAFLD="p1" DATAFORMATAS='html'></SPAN></TD> <TD><SPAN DATAFLD="p2"></SPAN></TD> <TD><SPAN DATAFLD="p3"></SPAN></TD> </TR> </TABLE>

Вот как это все будет выглядеть на Web-странице:

Имя Должность Зарплата

Пример 2

Далее показан модифицированный пример той же базы данных. Теперь можно производить сортировку данных, щелкнув на заголовке соответствующего столбца.
Для этого, кроме объекта STD и таблицы, нам понадобится скрипт. Скрипт содержит функцию, реагирующую на щелчок путем модификации тэга < OBJECT>. Здесь использован следующий хитрый прием. Сначала база данных показывается без всякой сортировки. Мы сохраняем блок тэгов < OBJECT ...> кроме заключительного тэга < /OBJECT> в переменной obj. При щелчке на заголовке таблицы вызывается функция сортировки sort(field), которой передается имя поля. Эта функция дописывает к значению переменной obj строку, содержащую тэги, отвечающие за сортировку: ''. Далее, функция заменяет в HTML-коде страницы тэги < OBJECT ...> на те, которые содержатся в переменной obj. Это делается с помощью великолепного свойства outerHTML. Я его люблю и часто использую. Все эти раскрывающиеся папки на моем сайте сделаны с его помощью.
Аналогично можно сделать и фильтрацию (выборку данных по заданному критерию). Подробности - в указанной выше книге.

<OBJECT ID="DB" CLASSID="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83"> <PARAM NAME="FieldDelim" VALUE=","> <PARAM NAME="DataURL" VALUE="kadr.txt"> <PARAM NAME="UseHeader" VALUE=true> </OBJECT> <TABLE WIDTH 75% DATASRC=#DB BORDER style="background:00ffff"> <THEAD> <TH onClick="sort('p1')">Имя</TH> <TH onClick="sort('p2')">Должность</TH> <TH onClick="sort('p3')">Зарплата</TH> </THEAD> <TR> <TD><SPAN DATAFLD="p1" DATAFORMATAS='html'></SPAN></TD> <TD><SPAN DATAFLD="p2"></SPAN></TD> <TD><SPAN DATAFLD="p3"></SPAN></TD> </TR> </TABLE> <SCRIPT> // сохраняем тэги объекта STD в переменной var obj='<OBJECT ID="DB" CLASSID="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83"><PARAM NAME="FieldDelim" VALUE=","><PARAM NAME="DataURL" VALUE="kadr.txt"><PARAM NAME="UseHeader" VALUE=true>' function sort(field) // сортировка по значениям столбца field { t=document.all('DB') t.outerHTML=obj+'<PARAM NAME="SortColumn" VALUE="'+field+'"></OBJECT>' } </SCRIPT>

На Web-странице это будет выглядеть следующим образом:

Имя Должность Зарплата

Щелкните на заголовках столбцов таблицы, чтобы выполнить сортировку.

Пример 3

В этом примере мы показываем только одну строку таблицы в виде набора полей ввода данных. Перемещение по строкам производится с помощью кнопок, которые выполняют методы (функции) объекта STD.
Здесь мы не приводим блок тэгов < OBJECT...>, т.к. он такой же, как и в предыдущем примере.
Мы указали id в тэге < TABLE> и NAME в < INPUT>, чтобы иметь возможность обращаться к содержимому ячеек нашей таблицы из скрипта. Например, чтобы получить текущее значение столбца p2 (Должность), следует использовать такую запись:
mytab.f2.value
В тэге < TABLE> мы использовали стиль style="visibility:visible", чтобы в случае необходимости установить свойство видимости visibility в состояние hidden (невидимый). Это позволит нам загружать базу данных, но не выводить ее на экран. При этом доступ к данным остается открытым. Однако следует заметить, что невидимый элемент занимает на странице столько же места, что и видимый.<> Невидимые таблицы можно использовать для служебных целей. Например, в них можно хранить данные для поиска по всему сайту.
<TABLE id="mytab" WIDTH=10 style="visibility:visible"> <TR> <TD>Имя<INPUT NAME="f1" DATASRC="#DB" DATAFLD="p1" DATAFORMATAS='html'></TD> </TR> <TR> <TD>Должность<INPUT NAME="f2" DATASRC="#DB" DATAFLD="p2"></TD> </TR> <TR> <TD>Зарплата<INPUT NAME="f3" DATASRC="#DB" DATAFLD="p3"></TD> </TR> </TR> </TABLE> <Button onClick="cmdFirst()">Первая</button> <Button onClick="cmdLast()">Последняя</button> <Button onClick="cmdNext()">Следующая</button> <Button onClick="cmdPrev()">Предыдущая</button> <SCRIPT> function cmdFirst() { DB.recordset.moveFirst(); } function cmdLast() { DB.recordset.moveLast(); } function cmdNext() { if (!DB.recordset.eof) DB.recordset.moveNext(); } function cmdPrev() { if (!DB.recordset.bof) DB.recordset.movePrevious(); } </SCRIPT> </td>

На Web-странице это будет выглядеть так:

Имя

Должность

Зарплата

Фильтр
Чтобы установить фильтр в базе данных (сделать выборку нужных строк), следует в тэг < OBJECT> для для объекта STD дописать еще следующие параметры:

< PARAM NAME="FilterColumn" VALUE='имя_поля'>
< PARAM NAME="FilterCriterion" VALUE='операция_сравнения'>, где операция_сравнения есть =, ==, !=, <, >, <= или >=.
< PARAM NAME="FilterValue" VALUE=значение>

Использование фильтра рассмотрено в примере Поиск по сайту.