如何使 CakePHP 的 HABTM 复选框按字母顺序排列在列中

2021-12-21 00:00:00 checkbox php css cakephp cakephp-1.3

我有餐厅菜系列表 (HABTM) - 当用户添加餐厅时，他们会从所有菜系复选框中进行选择.

I have list of restaurant cuisines (HABTM) - when the user adds a restaurant, they choose from all the checkboxes of cuisines.

复选框输入设置为 float:left;带有填充/边距......等等，一切看起来都不错 - 一个漂亮的复选框网格.

The checkbox inputs are set to float:left; with padding/margins... etc and all looks good - a nice grid of checkboxes.

问题/问题:复选框按字母顺序显示，但与用户期望的方式不同 - 它们在重复行中从左到右排列(就像您希望将它们全部浮动一样).

Question/Problem: The checkboxes show up alphabetically, but not in the way a user would expect - they're left to right in repeating rows (like you'd expect by making them all float).

我怎样才能让它们按字母顺序排列，但在垂直列中?所以按字母顺序，你会阅读从上到下，然后转到下一列.

How can I get them to be alphabetical, but in vertical columns? So alphabetically, you'd read Top to Bottom, then go to the next column.

我可以只找到普通的 PHP 就可以做到这一点，但是在 CakePHP 中，我显示复选框的调用只是:

I could do this just find w/ just normal PHP, but in CakePHP, my call to show the checkboxes is just:

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

补充:

JS FIDDLE HERE(html 大多不可编辑因为它是由 CakePHP 生成的 - 如果需要，可以编辑 CakePHP 回声 - 但这不能在小提琴中)

JS FIDDLE HERE (html is mostly un-editable since it's being generated by CakePHP - can edit the CakePHP echo though if needed - but that can't be in the fiddle)

推荐答案

根据评论，我创建了一个有望被接受的 jQuery 解决方案.

Based on the comments, I've created a hopefully acceptable jQuery solution.

参见: 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

相关文章