我有一个php循环列出了50个无线电盒子。 我想在每列上放10个无线电盒。我试过了:
div style =“overflow:hidden; white-space:nowrap; 浮动:左;宽度:160像素;“>
生成代码:
{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循环回显。
答案 0 :(得分:1)
我发现处理将复选框拆分成列的最佳方法是使用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
如果在将array_chunk分配给模板引擎之前执行array_chunk,则可以使用smarty {foreach}循环完成相同的概念。实际上,聪明的{$ 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;
}
答案 1 :(得分:1)
<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>