显示多列收音机列表

Question

我有一个列出50个收音机框的php循环。 我想在每列放10个无线电盒。我想：

DIV风格= “溢出：隐藏;空白：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循环回显。

Answer 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 

同样的概念可以与智者进行{foreach}的循环只要你把它分配给模板引擎之前执行array_chunk。实际上，在智者{$ 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; 
} 

Answer 2

<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>