Question

我有餐厅美食清单（HABTM） - 当用户添加餐厅时，他们会从菜肴的所有复选框中选择。

复选框输入设置为float：left;填充/边距...等等，所有看起来都很好 - 一个很好的复选框。

问题/问题： 复选框按字母顺序显示，但不是按照用户期望的方式显示 - 它们在重复行中保持不变（就像你期望它们全部浮动一样）。

如何让它们按字母顺序排列，但在垂直列中呢？按字母顺序排列，您可以阅读“从上到下”，然后转到下一列。

我能做到这一点只是发现只有普通的PHP，但在CakePHP中，我打电话来显示复选框只是：

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

此外：

JS FIDDLE HERE （html主要是不可编辑的，因为它是由CakePHP生成的 - 可以根据需要编辑CakePHP回声 - 但这不可能在小提琴中）

Answer 1

根据评论，我创建了一个有希望接受的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

如何使CakePHP HABTM复选框在列中从上到下按字母顺序排列

1 个答案: