Показать сообщение отдельно
  #23 (permalink)  
Старый 04.02.2016, 11:09
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

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

Допустим, в базе хранятся некие панели, которые пользователь выбрал. Сервер вернул все что имеется, какие есть материалы текстур и какие текстуры.

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<style>
ul {
    padding: 0;
}

label {
    display: block;
} 

li {
    list-style: none;
    padding: 2px;
    margin-bottom: 1px;
    border: 1px solid #eee;
}

li, li * {
    cursor: pointer;
}

li:hover {
    border-color: #ccc;
    background-color: #eee;
}
</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script> 
$(function() {
    //объект из возвращенным сервером данных 
    var data = {
        'wood' : [['pine', 'Сосна', 250, '1.img'], ['oak', 'Дуб', 300, '2.img'], ['birch', 'Береза', 350, '3.img']],
        'rock' : [['granite', 'Гранит', 400, '4.img'], ['marble', 'Мрамор', 450, '5.img']]
    };
    
    $('#map input').change(function() {
        $('#result').empty();
        $('#texture').html(
            '<ul><li>' + $.map(data[this.value], function(e) {
                return '<label><img src="'+e[3]+'"> <input type="radio" name="texture" data-price="'+e[2]+'" value="'+e[0]+'" /> '+e[1]+'</label>';
            }).join('</li><li>') + '</li></ul>'
        ).on('change', 'input', function() {
            $('#result').text(this.getAttribute('data-price')+' руб.')
        })
    });
});
</script>     
</head> 

<body>
<form autocomplete="off">
<p>Материал</p>
<div id="map">
<label><input type="radio" name="map" value="wood" /> Дерево</label>
<label><input type="radio" name="map" value="rock" /> Камень</label>
</div>
<p>Текстура</p>
<div id="texture"></div>
</form>
<p>Выбор</p>
<div id="result"></div>
</body> 
</html>


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

Сам объект представляет простой набор данных, но если данные не только для калькулятора и не пассивного, но и определяют выбор пользователя, который и просчитывается, и будет в конечном итоге отправлен серверу, то элементы выбора: списки, кнопки, флажки и т.п. обязательно должны иметь имена, значения которых также должны быть переданы сервером (ключ => значение), так как они должны быть связаны с SQL таблицами.

Последний раз редактировалось laimas, 04.02.2016 в 11:58.
Ответить с цитированием