如何使CakePHP的HABTM複選框按字母從上到下按字母順序排列

我有餐廳美食列表（HABTM） - 當用戶添加餐廳時，他們從所有美食複選框中選擇。如何使CakePHP的HABTM複選框按字母從上到下按字母順序排列

複選框輸入設置爲float：left;與填充/邊距...等，所有看起來不錯 - 一個很好的網格複選框。

問題/問題： 的複選框顯示字母，而不是在方式用戶期望 - 他們左向右重複行（就像你通過使他們都期待浮動）。

我怎樣才能讓他們按字母順序排列，但在垂直列？所以按字母順序排列，你會讀到Top to Bottom，然後轉到下一列。

我能做到這一點只要找到瓦特/只是正常的PHP，但在CakePHP中，我的電話顯示的複選框只是：

<?php echo $this->Form->input('RestaurantCuisine', array('multiple'=>'checkbox')); ?>

此外：

JS FIDDLE HERE（HTML是大多數是不可編輯的，因爲它是由CakePHP生成的 - 可以編輯CakePHP回顯但如果需要的話 - 但不能在小提琴中）

來源

2011-05-24 Dave

假設沒有一個CakePHP的方法來處理它（爲什麼會有），這是一個CSS問題。如果是這樣的話，如果你製作了相關HTML/CSS的[jsFiddle測試用例]（http://jsfiddle.net/），它將非常有助於你獲得答案。 – thirtydot 2011-05-24 18:02:49

@thirtydot - 會做 - 在一秒鐘內傳入。（雖然HTML無法更改） – Dave 2011-05-24 18:12:09

@thirtydot - 添加jsfiddle – Dave 2011-05-24 18:23:39

基於評論，我創建了一個希望接受的jQuery解決方案。

參見：http://jsfiddle.net/svRmL/

var $element = $('#cuisines'); 
var $elementWidth = $element.find(' > .checkbox').outerWidth(true), 
    elementCount = $element.find(' > .checkbox').length, 
    $boxes = $element.find(' > .checkbox'); 

/* just for debug */ 
$boxes.each(function(i) { 
    $(this).find('label').html(i); 
}); 

//set resize function 
$(window).resize(function() { 
    var perRow = Math.floor($element.width()/$elementWidth), 
     i, j, $thisColumn, inc; 

    $boxes.appendTo($element); //move elements out of columns from previous resize 
    $('.tempColumn').remove(); //destroy old columns 
    for (i = 0; i < perRow; i++) { 
     $thisColumn = $('<div class="tempColumn" />').appendTo($element).css({ 
      width: $elementWidth, 
      float: 'left' 
     }); 
     inc = Math.ceil(elementCount/perRow); 
     for (j = inc * i; j < inc * (i + 1); j++) { 
      $boxes.eq(j).appendTo($thisColumn); 
     } 
    } 
}).resize(); //trigger resize function immediately

來源

2011-05-24 21:37:23 thirtydot

如何使CakePHP的HABTM複選框按字母從上到下按字母順序排列

回答

相關問題