У меня есть петля php, в которой перечислены 50 радиобоксов. Я хочу поставить 10 радиобоксов на каждый столбец. Я пытался:
div style = "overflow: hidden, white-space: nowrap; float: left; width: 160px;">
генерирующий код:
{php} $j=0; {/php} {foreach from=$genreLists item=genreList key = genre_key} {if $genre_key <= 250} div id="genrecheck_{$genreList}"> input name="genre[]" type="checkbox" id="genre[]" value="{$genreList}" {section name = rows loop = $smarty.request.genre} {if $genreList == $smarty.request.genre[rows]} checked {/if}{/section} onClick="getval(this,'genrecheck_{$genreList}');"> div id="genre_{$genre_key}" style="display:none;">{$genreList}/div>div id="genre1_{$genre_key}" style="display:inline;">{$genreList} /div> /div> {php} $j++; if($j%5==0) { echo " "; $j=0; } {/php} {/if}{/foreach} похоже, что он не работает. Какие-либо предложения? обратите внимание: радиокниги отражены с помощью петли php.
Я нашел, что лучший способ справиться с блоками разделения в столбцах – с помощью функции array_chunk (), чтобы разделить ваш массив на равные вспомогательные массивы, а затем использовать двойной цикл foreach для визуализации столбцов.
http://php.net/manual/en/function.array-chunk.php
echo '<div class="container">'; foreach(array_chunk($genreLists,5) as $row_value) { echo '<div class="row">'; foreach($row_value as $cell_key => $cell_value) { echo '<div class="cell">'; //echo your checkbox html here echo '</div>'; // close cell } echo '</div>'; // close row } echo '</div>'; // close container
Та же концепция может быть выполнена с помощью цикла smarty {foreach}, если вы выполняете array_chunk, прежде чем назначать его движку шаблона. Фактически в smarty {$ var | array_chunk: 5} должен работать как модификатор
Если вы хотите, чтобы флажки были представлены вертикально, используйте эту функцию:
/* ----------[ func ARRAY CHUNK VERTICAL ]---------- A sister to array_chunk, but instead of horizontal, split the data vertical */ function array_chunk_vertical($array = null,$cols = 3, $pad = array(null)) { if (is_array($array) == true and !empty($array)) { // total items in the array $count = count($array); // if count is empty if(empty($count)) { return false; } // if cols is some how still empty if(empty($cols)) { $cols = 3; } // count the number of vertical rows $rows = ceil($count/$cols); // group the array into colums $array = array_chunk($array,$rows); // if the array is less that the number of cols required // pad it to ensure length remains constant if (count($array) < $cols) { $array = array_pad($array,$cols,$pad); } // pad the array with a null character as required foreach($array as $key => $value) { $array[$key] = array_pad($value,$rows,null); } // now inverse the rows with the cols foreach($array as $key => $value) { foreach($value as $sub_key => $sub_value) { $output[$sub_key][$key] = $sub_value; } } // spit it out return $output; } // oops return $array; }
<div class="Row"> <input type="radio" name="Row1" /> <input type="radio" name="Row1" /> <input type="radio" name="Row1" /> <input type="radio" name="Row1" /> <input type="radio" name="Row1" /> <input type="radio" name="Row1" /> <input type="radio" name="Row1" /> <input type="radio" name="Row1" /> <input type="radio" name="Row1" /> <input type="radio" name="Row1" /> </div> <div class="Row"> <input type="radio" name="Row2" /> <input type="radio" name="Row2" /> <input type="radio" name="Row2" /> <input type="radio" name="Row2" /> <input type="radio" name="Row2" /> <input type="radio" name="Row2" /> <input type="radio" name="Row2" /> <input type="radio" name="Row2" /> <input type="radio" name="Row2" /> <input type="radio" name="Row2" /> </div> <div class="Row"> <input type="radio" name="Row3" /> <input type="radio" name="Row3" /> <input type="radio" name="Row3" /> <input type="radio" name="Row3" /> <input type="radio" name="Row3" /> <input type="radio" name="Row3" /> <input type="radio" name="Row3" /> <input type="radio" name="Row3" /> <input type="radio" name="Row3" /> <input type="radio" name="Row3" /> </div> <div class="Row"> <input type="radio" name="Row4" /> <input type="radio" name="Row4" /> <input type="radio" name="Row4" /> <input type="radio" name="Row4" /> <input type="radio" name="Row4" /> <input type="radio" name="Row4" /> <input type="radio" name="Row4" /> <input type="radio" name="Row4" /> <input type="radio" name="Row4" /> <input type="radio" name="Row4" /> </div> <div class="Row"> <input type="radio" name="Row5" /> <input type="radio" name="Row5" /> <input type="radio" name="Row5" /> <input type="radio" name="Row5" /> <input type="radio" name="Row5" /> <input type="radio" name="Row5" /> <input type="radio" name="Row5" /> <input type="radio" name="Row5" /> <input type="radio" name="Row5" /> <input type="radio" name="Row5" /> </div>