Документация /

Повторение виджетов

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

Для правильной работы модели повторений необходимо соблюдать несколько условий:

  • Необходимо определить один или несколько виджетов, участвующих в повторении, которые уже будут показаны на странице при инициализации. Корневые виджеты должны иметь в параметрах инициализации параметр oRepeatOptions, содержащий настройки повторения.
  • Должен быть определен шаблон повторения, представляющий собой копию структуры, которую необходимо повторять (часто шаблон — точная копия первого корневого виджета в группе повторения). Шаблон не показывается на странице.
  • У всех элементов виджетов, участвующих в повторении, особое значение имеют атрибуты «id» и «name». Если эти атрибуты указаны у элементов, то они должны быть сформированы по следующему принципу: значение атрибута = значение атрибута + постфикс. Постфикс представляет собой строку вида «_N», где N — порядковый номер (начиная с 1) виджета в модели повторения, в которой он участвует. У первого виджета (и у всех его потомков) в модели повторения постфикс отсутствует. У элементов шаблона постфикс должен быть вида «_N+1», где N — порядковый номер последнего виджета в модели повторения на момент инициализации формы (в большинстве случаев постфикс элементов шаблона имеет вид «_1»).

Постфикс у атрибутов name должен быть только при установленном в true параметре bNameHasPostfix.

Параметры повторения:

oRepeatOptions : {
	String  sGroup,
	Boolean bTemplate       : false,
	Boolean bNameHasPostfix : false, 
	Number  iMin            : 1,
	Number  iMax            : 10
}

Где:

  • sGroup — идентификатор группы повторения.
  • bTemplate — представляет ли виджет собой шаблон.
  • bNameHasPostfix — есть ли, и нужно ли добавлять постфикс к атрибуту name элементов виджетов.
  • iMin — минимальное количество корневых виджетов (может быть только у первого корневого виджета).
  • iMax — максимальное количество корневых виджетов (может быть только у первого корневого виджета).

При установленном в false (значение по умолчанию) параметре bNameHasPostfix все зависимости между виджетами внутри группы повторения должны быть указаны через параметр sId, а не sName.

Кроме того, должны быть определены виджеты кнопок для добавления и удаления виджетов в группе повторения, например:

...
	<dd class="zf-repeat-buttons">
		<input class="zf zf-buttonadd" type="button" value="+" />
		<input class="zf zf-buttonremove" type="button" value="-" />
	</dd>
...

Пример 1. Повторение одного виджета

Код примера 1

<form class="zf" action=".">
	<dl>
		<dt><label for="input-phone">Телефон</label></dt>
		<dd><input class="zf" type="text" name="phone" id="input-phone" onclick="return { oRepeatOptions : { sGroup : 'phone' }, oOptions : { sPlaceHolder : 'Номер телефона' } }" /></dd>
		<dd class="zf-repeatbuttons">
			<input class="zf zf-buttonadd" type="button" value="+" />
			<input class="zf zf-buttonremove" type="button" value="-" />
		</dd>
	</dl>
	<dl>
		<dt><label for="input-phone_1">Телефон</label></dt>
		<dd><input class="zf" type="text" name="phone" id="input-phone_1" onclick="return { oRepeatOptions : { sGroup : 'phone', bTemplate : true }, oOptions : { sPlaceHolder : 'Номер телефона' } }" /></dd>
		<dd class="zf-repeatbuttons">
			<input class="zf zf-buttonadd" type="button" value="+" />
			<input class="zf zf-buttonremove" type="button" value="-" />
		</dd>
	</dl>
</form>

Пример 2. Повторение группы виджетов, содержащей зависимости.

Образование
Добавить Удалить
Образование
Добавить Удалить

Код примера 2

<form class="zf" action=".">
	<fieldset class="zf" onclick="return { oRepeatOptions : { sGroup : 'education', iMax : 3 } }">
		<legend><span>Образование</span></legend>
		<dl id="row-education-type">
			<dt><label for="input-education-type">Вид образования</label></dt>
			<dd>
				<select class="zf" name="education-type" id="input-education-type">
					<option value="1">среднее</option>
					<option value="2">среднее специальное</option>
					<option value="3">высшее</option>
				</select>
			</dd>
		</dl>
		<dl>
			<dt><label for="input-education-degree">Научная степень</label></dt>
			<dd>
				<select class="zf" name="education-degree" id="input-education-degree" onclick="return { oEnabled : { sId : 'input-education-type', rPattern : '3' } }">
					<option value="1">бакалавр</option>
					<option value="2">магистр</option>
					<option value="3">кандидат наук</option>
					<option value="4">доктор наук</option>
				</select>
			</dd>
		</dl>
		<dl>
			<dt><label for="input-education-name">Учебное заведение</label></dt>
			<dd><input class="zf" type="text" name="education-name" id="input-education-name" /></dd>
		</dl>
		<dl class="zf-date-box">
			<dt><label for="input-date-from">Дата поступления</label></dt>
			<dd><input class="zf zf-date" type="text" name="date-from" id="input-date-from" /></dd>
		</dl>
		<dl class="zf-date-box">
			<dt><label for="input-date-to">Дата окончания</label></dt>
			<dd><input class="zf zf-date" type="text" name="date-to" id="input-date-to" onclick="return { oValid : { oCompare : { sId : 'input-date-from', sCondition : 'gt' } }, oEnabled : { sId : 'row-no-dateto', rPattern : '1', bInverse : true } }" /></dd>
		</dl>
		<dl class="zf zf-checkboxgroup zf-nolabel" id="row-no-dateto">
			<dd>
				<div class="zf-option">
					<input class="zf" type="checkbox" name="no-dateto" id="input-no-dateto-1" value="1" />
					<label for="input-no-dateto-1">продолжаю учиться</label>
				</div>
			</dd>
		</dl>
		<div class="zf-repeatbuttons">
			<span class="zf zf-buttonadd this">Добавить</span>
			<span class="zf zf-buttonremove this">Удалить</span>	
		</div>
	</fieldset>
	<fieldset class="zf" onclick="return { oRepeatOptions : { sGroup : 'education', bTemplate : true } }">
		<legend><span>Образование</span></legend>
		<dl>
			<dt><label for="input-education-type_1">Вид образования</label></dt>
			<dd>
				<select class="zf" name="education-type_1" id="input-education-type_1">
					<option value="1">среднее</option>
					<option value="2">среднее специальное</option>
					<option value="3">высшее</option>
				</select>
			</dd>
		</dl>
		<dl>
			<dt><label for="input-education-degree_1">Научная степень</label></dt>
			<dd>
				<select class="zf" name="education-degree_1" id="input-education-degree_1" onclick="return { oEnabled : { sId : 'input-education-type_1', rPattern : '3' } }">
					<option value="1">бакалавр</option>
					<option value="2">магистр</option>
					<option value="3">кандидат наук</option>
					<option value="4">доктор наук</option>
				</select>
			</dd>
		</dl>
		<dl>
			<dt><label for="input-education-name_1">Учебное заведение</label></dt>
			<dd><input class="zf" type="text" name="education-name_1" id="input-education-name_1" /></dd>
		</dl>
		<dl class="zf-date-box">
			<dt><label for="input-date-from_1">Дата поступления</label></dt>
			<dd><input class="zf zf-date" type="text" name="date-from" id="input-date-from_1" /></dd>
		</dl>
		<dl class="zf-date-box">
			<dt><label for="input-date-to_1">Дата окончания</label></dt>
			<dd><input class="zf zf-date" type="text" name="date-to" id="input-date-to_1" onclick="return { oValid : { oCompare : { sId : 'input-date-from_1', sCondition : 'gt' } }, oEnabled : { sId : 'row-no-dateto_1', rPattern : '1', bInverse : true } }" /></dd>
		</dl>
		<dl class="zf zf-checkboxgroup zf-nolabel" id="row-no-dateto_1">
			<dd>
				<div class="zf-option">
					<input class="zf" type="checkbox" name="no-dateto" id="input-no-dateto-1_1" value="1" />
					<label for="input-no-dateto-1_1">продолжаю учиться</label>
				</div>
			</dd>
		</dl>
		<div class="zf-repeatbuttons">
			<span class="zf zf-buttonadd this">Добавить</span>
			<span class="zf zf-buttonremove this">Удалить</span>	
		</div>
	</fieldset>
</form>