VPF::Взаимодействие пользовательской формы с БД XML

hag1989

Дата 20.11.2009, 00:34 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 5
Регистрация: 19.11.2009

Репутация: нет
Всего: нет

Генерация таблицы на основе БД с применением фильтра
Здравствуйте!

Я разрабатываю электронный определитель растений основанный на фильтрации данных из базы на 223 вида. При выборе пользователем в интерактивной HTML форме того или иного состояния признака (имя поля checkbox будет соответствовать значению ячейки БД) должна происходить фильтрация подходящих видов с последующим заполнением таблицы (куда попадут названия вида и соответсвующее ему изображение)

Помогите с функциями: генерации таблицы, фильтрации данных выбираемых из БД и заполнении таблицы (если я вообще верно выбрал алгоритм действий).

БД буду хранить в txt, dbf или XML.

P.S. Заранее извиняюсь за формулировку задачи, я новичок в области программирования, подобные задачи ранее не выполнял.

Для большей ясности опишу проет:

Структура следующая:

1. имеется HTML страница, разделённая на 2 фрейма:

<

Код


html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Документ без названия</title>
</head>
<frameset cols="50%, 50%">
<frame name="left" SRC="searchform.htm">
<frame name="right" SRC="list.htm">
<frame src="UntitledFrame-1"></frameset><noframes></noframes>
<body>
</body>
</html>

2. HTML Файл с пользовательской формой, загружаемый в левый фрейм :

<

Код


html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Документ без названия</title></head>
 
<body>
<form name="" action="" method="" enctype="multipart/form-data">
 
<table width="500" border="2" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <th colspan="2" scope="col">ПОБЕГИ</th>
  </tr>
  <tr>
    <td colspan="2" bgcolor="#00FF66"><div align="center">Типы побегов</div></td>
  </tr>
  <tr>
    <td width="32">1</td>
    <td width="368"><label>
      <input type="checkbox" name="1" id="checkbox1" />
    Ауксибласты и брахибласты</label></td>
  </tr>
  <tr>
    <td>2</td>
    <td><label>
      <input type="checkbox" name="2" id="checkbox2" />
    Только ауксибласты</label></td>
  </tr>
  <tr>
    <td colspan="2" bgcolor="#00FF66"><div align="center">Наличие подушечек</div></td>
  </tr>
  <tr>
    <td>3</td>
    <td><label>
      <input type="checkbox" name="3" id="checkbox3" />
    Есть</label></td>
  </tr><tr>
    <td>4</td>
    <td><label>
      <input type="checkbox" name="4" id="checkbox4" />
    Нет</label></td>
  </tr>
  <tr>
    <td colspan="2"><div align="center"><strong>ЛИСТЬЯ</strong></div></td>
  </tr>
  <tr>
    <td colspan="2" bgcolor="#00FF66"><div align="center">Расположение</div></td>
  </tr>
  <tr>
    <td>5</td>
    <td><label>
      <input type="checkbox" name="5" id="checkbox5" />
    На брахибл. в пучках, на ауксибл. спирально по  одному</label></td>
  </tr>
</table>
</form>
</body>
</html>

3. HTML Файл с генерируемой таблицей которая должна выглядеть примерно так:

Код



<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Документ без названия</title>
<style>
tr { text-align:center; }
</style>
</head>
Результаты промежуточного поиска:
<body>
<table width="400" border="1" cellspacing="5" align="center">
  <tr>
    <td width="43">№</td>
    <td width="201">Название вида</td>
    <td width="122">изображение</td>
  </tr>
  <tr>
    <td>1</td>
    <td>Larix</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Pinus</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Picea</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>4</td>
    <td>Pseudotsuga</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>5</td>
    <td>Abies</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>6</td>
    <td>Tsuga</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

4. БД:

Код


[xml]<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<Root xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<Row>
<Column3>Побеги</Column3>
<Column5>Хвоя</Column5>
<Column10>Шишки</Column10>
</Row>
<Row>
<Column1>Название рода</Column1>
<Column2>Изображение</Column2>
<Column3>Типы побегов</Column3>
<Column4>Наличие подушечек</Column4>
<Column5>Расположение на побеге</Column5>
<Column6>Сезон. Изм.</Column6>
<Column7>Кол-во в пучках
</Column7>
<Column8>
Форма
хвоинок
</Column8>
<Column9>
Форма верхушки
</Column9>
<Column10>Располож. на побеге</Column10>
<Column11>При созревании</Column11>
<Column12>Соотн. кроющ. и семенных чешуй</Column12>
</Row>
<Row>
<Column1>Larix</Column1>
<Column2>img/1.gif</Column2>
<Column3>1</Column3>
<Column4>4</Column4>
<Column5>5</Column5>
<Column6>8</Column6>
<Column7>10</Column7>
<Column8>12</Column8>
<Column9>15</Column9>
<Column10>20</Column10>
<Column11>24</Column11>
<Column12>27</Column12>
</Row>
<Row>
<Column1>Pinus</Column1>
<Column2>img/2.gif</Column2>
<Column3>1</Column3>
<Column4>4</Column4>
<Column5>6</Column5>
<Column6>9</Column6>
<Column7>11</Column7>
<Column8>13</Column8>
<Column9>16</Column9>
<Column10>21</Column10>
<Column11>25</Column11>
<Column12>28</Column12>
</Row>
<Row>
<Column1>Picea</Column1>
<Column2>img/3.gif</Column2>
<Column3>2</Column3>
<Column4>3</Column4>
<Column5>7</Column5>
<Column6>9</Column6>
<Column7>-</Column7>
<Column8>14</Column8>
<Column9>16</Column9>
<Column10>22</Column10>
<Column11>24</Column11>
<Column12>29</Column12>
</Row>
<Row>
<Column1>Pseudotsuga</Column1>
<Column2>img/4.gif</Column2>
<Column3>2</Column3>
<Column4>3</Column4>
<Column5>7</Column5>
<Column6>9</Column6>
<Column7>-</Column7>
<Column8>12</Column8>
<Column9>17</Column9>
<Column10>22</Column10>
<Column11>24</Column11>
<Column12>30</Column12>
</Row>
<Row>
<Column1>Abies</Column1>
<Column2>img/5.gif</Column2>
<Column3>2</Column3>
<Column4>4</Column4>
<Column5>7</Column5>
<Column6>9</Column6>
<Column7>-</Column7>
<Column8>12</Column8>
<Column9>18</Column9>
<Column10>23</Column10>
<Column11>26</Column11>
<Column12>29</Column12>
</Row>
<Row>
<Column1>Tsuga</Column1>
<Column2>img/6.gif</Column2>
<Column3>2</Column3>
<Column4>3</Column4>
<Column5>7</Column5>
<Column6>9</Column6>
<Column7>-</Column7>
<Column8>12</Column8>
<Column9>19</Column9>
<Column10>22</Column10>
<Column11>24</Column11>
<Column12>31</Column12>
</Row>
</Root>[xml]

Спасибо всем кто откликнулся!

TryLight

Дата 26.11.2009, 08:57 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 83
Регистрация: 26.8.2007

Репутация: нет
Всего: 1

Например, так

Код


db.xml (сохранить нужно в utf-8)
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<Root xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  <Row>
    <Col> </Col>
    <Col> </Col>
    <Col>Побеги</Col>
    <Col> </Col>
    <Col>Хвоя</Col>
    <Col> </Col>
    <Col> </Col>
    <Col> </Col>
    <Col> </Col>
    <Col>Шишки</Col>
    <Col> </Col>
    <Col> </Col>
  </Row>
  <Row>
    <Col>Название рода</Col>
    <Col>Изображение</Col>
    <Col>Типы побегов</Col>
    <Col>Наличие подушечек</Col>
    <Col>Расположение на побеге</Col>
    <Col>Сезон. изм.</Col>
    <Col>Кол-во в пучках</Col>
    <Col>Форма хвоинок</Col>
    <Col>Форма верхушки</Col>
    <Col>Располож. на побеге</Col>
    <Col>При созревании</Col>
    <Col>Соотн. кроющ. и семенных чешуй</Col>
  </Row>
  <Row>
    <Col>Larix</Col>
    <Col>img/1.gif</Col>
    <Col>1</Col>
    <Col>4</Col>
    <Col>5</Col>
    <Col>8</Col>
    <Col>10</Col>
    <Col>12</Col>
    <Col>15</Col>
    <Col>0</Col>
    <Col>24</Col>
    <Col>27</Col>
  </Row>
  <Row>
    <Col>Pinus</Col>
    <Col>img/2.gif</Col>
    <Col>1</Col>
    <Col>4</Col>
    <Col>6</Col>
    <Col>9</Col>
    <Col>11</Col>
    <Col>13</Col>
    <Col>16</Col>
    <Col>1</Col>
    <Col>25</Col>
    <Col>28</Col>
  </Row>
  <Row>
    <Col>Picea</Col>
    <Col>img/3.gif</Col>
    <Col>2</Col>
    <Col>3</Col>
    <Col>7</Col>
    <Col>9</Col>
    <Col>-</Col>
    <Col>14</Col>
    <Col>16</Col>
    <Col>0</Col>
    <Col>24</Col>
    <Col>29</Col>
  </Row>
  <Row>
    <Col>Pseudotsuga</Col>
    <Col>img/4.gif</Col>
    <Col>2</Col>
    <Col>3</Col>
    <Col>7</Col>
    <Col>9</Col>
    <Col>-</Col>
    <Col>12</Col>
    <Col>17</Col>
    <Col>1</Col>
    <Col>24</Col>
    <Col>30</Col>
  </Row>
  <Row>
    <Col>Abies</Col>
    <Col>img/5.gif</Col>
    <Col>2</Col>
    <Col>4</Col>
    <Col>7</Col>
    <Col>9</Col>
    <Col>-</Col>
    <Col>12</Col>
    <Col>18</Col>
    <Col>0</Col>
    <Col>26</Col>
    <Col>29</Col>
  </Row>
  <Row>
    <Col>Tsuga</Col>
    <Col>img/6.gif</Col>
    <Col>2</Col>
    <Col>3</Col>
    <Col>7</Col>
    <Col>9</Col>
    <Col>-</Col>
    <Col>12</Col>
    <Col>19</Col>
    <Col>1</Col>
    <Col>24</Col>
    <Col>31</Col>
  </Row>
</Root>

Код


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>

<body>

<!-- form ----------------------------------------------------------------- -->
<form name="" action="" method="" onSubmit="return false" enctype="multipart/form-data">

<table width="500" border="2" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <th colspan="2" scope="col">ПОБЕГИ</th>
  </tr>
  <tr>
    <td colspan="2" bgcolor="#00FF66"><div align="center">Типы побегов</div></td>
  </tr>
  <tr>
    <td width="32">1</td>
    <td width="368"><label>
      <input type="checkbox" name="1" id="checkbox1" checked />
    Ауксибласты и брахибласты</label></td>
  </tr>
  <tr>
    <td>2</td>
    <td><label>
      <input type="checkbox" name="2" id="checkbox2" checked />
    Только ауксибласты</label></td>
  </tr>
  <tr>
    <td colspan="2" bgcolor="#00FF66"><div align="center">Наличие подушечек</div></td>
  </tr>
  <tr>
    <td>3</td>
    <td><label>
      <input type="checkbox" name="3" id="checkbox3" checked />
    Есть</label></td>
  </tr><tr>
    <td>4</td>
    <td><label>
      <input type="checkbox" name="4" id="checkbox4" checked />
    Нет</label></td>
  </tr>
  <tr>
    <td colspan="2"><div align="center"><strong>ЛИСТЬЯ</strong></div></td>
  </tr>
  <tr>
    <td colspan="2" bgcolor="#00FF66"><div align="center">Расположение</div></td>
  </tr>
  <tr>
    <td>5</td>
    <td><label>
      <input type="checkbox" name="5" id="checkbox5" checked />
    На брахибл. в пучках, на ауксибл. спирально по  одному</label></td>
  </tr>
  <tr>
    <td colspan="2" align="center"><input type="submit" value="Показать" onClick="main(false)"/></td>
  </tr>
</table>
</form>

<!-- form end ------------------------------------------------------------- -->

<div id="output_block" style="border:1px solid #ff0000">&nbsp;</div>
<script>var out_el = document.getElementById('output_block');</script>

<script>

// 1. делаем запрос к БД, т.е. загружаем xml
//  !!! работает в mozilla, в ie не будет !!!
var oXML = new XMLHttpRequest();
oXML.open('get', 'db.xml', false);
oXML.send(null);
var root = oXML.responseXML;
// проверка
out_el.innerHTML = root.getElementsByTagName('Row').length; // "8"

// 2. парсим тело полученного документа в массив
var Arr = new Array();
var xml_tr = root.getElementsByTagName('Row');
var xml_td;

for(i=0; i<xml_tr.length; i++){
    xml_td = xml_tr[i].getElementsByTagName('Col');
    Arr[i] = new Array();
    for(j=0; j<xml_td.length; j++){
        Arr[i][j] = xml_td[j].firstChild.data;
    }
}
// проверка
out_el.innerHTML = Arr[1][8]; // "Форма верхушки"

var el_table;
function main(fstStart){
    if(!fstStart) {document.body.removeChild(el_table); el_table = null;}

    // 3. отфильтровываем по параметрам
    // 3.1 набираем массив выбранных параметров
    var was_checked = new Array();
    var checkboxes = document.getElementsByTagName('input');
    for(i=0; i<checkboxes.length; i++)
        if(checkboxes[i].checked) was_checked[i] = checkboxes[i].name;
    // проверка
    var str = ""; for(i=0; i<was_checked.length; i++) str = str + was_checked[i] + ", ";
    out_el.innerHTML = str; // "1, 2, 3, 4, 5, "

    // 3.2 фильтруем по параметрам
    var result_rows = new Array();
    var totalCounter = 0; var chk = true;
    for(i=0; i<was_checked.length; i++){ // берем каждый выбранный параметр
        for(j=0; j<Arr.length; j++){     // и сравниваем с каждым из параметров массива БД
            for(k=2; k<Arr[j].length; k++){ // (которые располагаются в нескольких столбцах)
                if(was_checked[i]==Arr[j][k]){    // составляем массив, значения которого -
                                                  // ячейки, кот. необходимо отобразить
                    for(n=0; n<result_rows.length; n++){ // проверка на повторяемость
                        if(result_rows[n]==j) chk = false;
                    }
                    if(chk){
                        result_rows[totalCounter] = j;
                        totalCounter++; chk = true;
                    }
                }
            }
        }
    }
    // проверка
    out_el.innerHTML = result_rows.length; // "2"

    // 4. выводим таблицу
    var el_tr, el_td1, el_td2, el_td3;
    el_table = document.createElement('table');
    el_table.border = "1";

    // проход по всем строкам сформированного массива result_rows
    for (i=0; i<result_rows.length; i++){
        n = parseInt(result_rows[i]);
        add_row(Arr[n][0], Arr[n][1], "&nbsp;&nbsp;");
    }

    // добавляем таблицу в тело документа
    document.body.appendChild(el_table);
}

main(true);

// 4.1 функция, которая формирует строку таблицы результатов
function add_row(item1, item2, item3){

    el_tr = document.createElement('tr');
    el_td1 = document.createElement('td');
    el_td2 = document.createElement('td');
    el_td3 = document.createElement('td');

    el_tr.appendChild(el_td1);
    el_tr.appendChild(el_td2);
    el_tr.appendChild(el_td3);

    el_table.appendChild(el_tr);

    el_td1.innerHTML = item1;
    el_td2.innerHTML = item2;
    el_td3.innerHTML = item3;
}

</script>

</body>
</html>

Это сообщение отредактировал(а) TryLight - 26.11.2009, 09:10

hag1989

Дата 3.12.2009, 21:16 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 5
Регистрация: 19.11.2009

Репутация: нет
Всего: нет

Огромное спасибо! Буду тестировать Ваш код, постараюсь приспособить к IE.

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »