Инструменты пользователя

Инструменты сайта


limb3:ru:packages:wact:select_tags

Использование select тегов.

<select> теги используются для выбора какого-либо значения из списка доступных.

Вам должно быть уже известно, что для некоторых тегов атрибут runat определяет, создается ли активный компонент для тега или нет. см. раздел "Теги форм с активными компонентами и без"

<select> тег без runtime-компонента (runat='client')

Если вы используете <select> тег без создания runtime-компонента, тогда можете заполнять список <option> тегов как угодно:

  • Указывать явно.
  • Использовать <list> теги.
  • Генерировать при помощи php-кода.

Явное указание опций

Например:

 <select name='rank' runat='client'>
  <option value='1'>Sergant</option>
  <option value='2' selected='selected'>Captain</option>
  <option value='3'>General</option>
 </select>

Однако в этом случае у вас не будет возможности динамически указать, какая опция является выбранной.

Использование <list> тегов

При использовании <list> тегов вы можете сформировать предварительно массив с данными, на основе которого будет сформирован список опций. Этом случае можно будет использовать теги <core:optional> и <core:default> для проверки и выставления атрибута selected:

 <select name='rank' runat='client'>
  <list:list from='select_options'>
    <list:item> 
     <core:optinal for='selected'>
     <option value='{$value}' selected='selected'>{$title}</option>
     </core:optinal>
     <core:default for='selected'>
     <option value='{$value}'>{$title}</option>
     </core:default>
    </list:item>
  </list:list>
 </select>

Или же, если мы сразу будет формировать правильным образом поле selected в наборе данных для <list> тега, можно будет записать короче:

 <select name='rank' runat='client'>
  <list:list from='some_options'>
    <list:item> 
     <option value='{$value}' selected='{$selected}'>{$title}</option>
    </list:item>
  </list:list>
 </select>

Где-то вне шаблона у вас будет следующий код (в него можно будет легко включить код, который будет помечать нужные элементы как selected):

  $data = array(array('value' => 1, 'title' => 'Sergant', 'selected' => ''), 
                array('value' => 2, 'title' => 'Captain', 'selected' => 'checked'), 
                array('value' => 3, 'title' => 'General', 'selected' => ''));
  $dataset = new lmbCollection($data);
  lmbToolkit :: instance()->getView()->set('select_options', $dataset);

Основное неудобство - необходимость формирования атрибута selected, хотя безусловно для этой функциональности можно легко создать средства, упрощающие работу.

Использование php-вставок

Ничего не мешает так использовать php-код для формирования html-кода:

 <select name='rank' runat='client'>
  <?php 
   foreach($items as $item) 
   {
     echo '<option value="'. $item['value'] . '" ';
      if(some_condition())
       echo 'selected=\'selected\'';
     echo '>'. $item['title'] .'</option>';
   }
  ?>
 </select>

<select> тег c runtime-компонентом (runat='server')

Явное указание опций

Как и в случае с runat='client' вы можете задать опции самостоятельно (доступно с версии пакета WACT 0.2): Например:

 <select name='rank' runat='server'>
  <option value='1'>Sergant</option>
  <option value='2' selected='selected'>Captain</option>
  <option value='3'>General</option>
 </select>

Явная передача опций в runtime-компонент

При использовании runtime-компонента содержимое <select> тега формируется компонентом. Поэтому в активный компонент можно передавать данные для <option> тегов явно, например, так:

  $template = new Template('my_template.html')
  $select = $template->findChild('rank_selector');
  $options = array(1 => 'Sergant',
                   2 => 'Captain',
                   3 => 'General');
  $select->setChoices($options);

В этом случае <option> теги будут отрендерены автоматически. То, какие <option> теги будут иметь атрибут selected, зависит от значения, которое будет передано в соответствующее поле набора данных, который пойдет в компонент для <form> тега. Поясним… Компонент формы в шаблоне содержит контейнер с данными со значениями всех полей, которые есть на форме. Если <select> допускает выделение только 1 опции, и в контейнере с данными есть соответствующее поле, тогда опция с совпадающим value будет помечена как selected, например:

  $template = new Template('my_template.html')
  $select = $template->findChild('rank_selector');
  $options = array(1 => 'Sergant',
                   2 => 'Captain', // будет отображен как checked
                   3 => 'General');
  $select->setChoices($options);
 
  $form = $template->findChild('my_form');
  $datasource = new lmbSet('rank_selector' => 2);
  $form->registerDataSource($datasource);

В результате в шаблоне получим что-то вроде:

<form id='my_form' runat='server'>
 <select id='rank_selector'>
  <option value='1'>Sergant</option>
  <option value='2' selected='selected'>Captain</option>
  <option value='3'>General</option>  
 </select>
</form>

Использование тега <select:options_source>

Для передачи данных, на основе которых строится список опций, можно также использовать тег <select:options_source>.

Обратите внимание на возможность использования атрибутов default_id и default_name, которые можно использовать для добавления так называемой опции по-умолчанию.

<select:options_source> также позволяет использовать атрибут from, то есть забирать набор данных из другого контейнера данных шаблона, например:

<form id='my_form' runat='server'>
 
 <select:options_source target='rank_selector' use_as_id='value' use_as_name='title' from='some_options'/>
 
 <select id='rank_selector'></select>
</form>

Группировка опций. Использование тега <select_with_grouped_options>

Иногда появляется необходимость группировка опций, доступных для выбора в рамках <select> тега. В этом случае можно использовать возможности тега <select_with_grouped_options>.

<select_with_grouped_options> - это аналог <select> тега:

 <form id="my_form" runat="server">
 <select_with_grouped_options id="my_selector">
 </select_with_grouped_options>
 </form>

Для заполнения списка опций можно использовать метод registerDataset():

   $options = array(array('label' => 'Names',
                          'options' => array(5 => 'Ivan', 10 => 'Mike')),
                     array('label' => 'Last Names',
                           'other_option' => 'any_value',
                           'options' => array(1 => 'Voronov', 2 => 'Kirov')));
 
    $select = $template->getChild('my_selector');
    $select->registerDataset(new lmbCollection($options));

Обратите внимание на форму, в которой должны формироваться данные для <select_with_grouped_options> тега. Это итератор, где каждый элемент содержит атрибут label и options, а последний - это обычный массив, где ключ - это атрибут value тега <option>, а значение - текст внутри тега <option>.

То есть, в результате получим:

<form id="my_form">
  <select id="my_selector" name="my_selector">
  <optgroup label="Names" >
  <option value="5">Ivan</option><option value="10" selected='selected'>Mike</option>
  </optgroup>
  <optgroup label="Last Names" other_option="any_value" >
  <option value="1">Voronov</option><option value="2">Kirov</option>
  </optgroup>
  </select>
</form>

Для заполнения <select_with_grouped_options> можно использовать <fetch> и <iterator> теги:

 <form id="my_form" runat="server">
  <fetch using='MyFetcher' pass_to='my_selector'/>
  <select_with_grouped_options id="my_selector"></select_with_grouped_options>
 </form>

Обсуждение

Ваш комментарий. Вики-синтаксис разрешён:
 ______  __  __   ____   _  __  ____ 
/_  __/ / / / /  /  _/  | |/_/ / __ \
 / /   / /_/ /  _/ /   _>  <  / /_/ /
/_/    \____/  /___/  /_/|_|  \___\_\
 
limb3/ru/packages/wact/select_tags.txt · Последние изменения: 2010/11/10 10:02 (внешнее изменение)