問題描述

我有餐廳菜系列表 (HABTM) - 當(dāng)用戶添加餐廳時(shí)，他們會從所有菜系復(fù)選框中進(jìn)行選擇.

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

復(fù)選框輸入設(shè)置為 float:left;帶有填充/邊距......等等，一切看起來都不錯(cuò) - 一個(gè)漂亮的復(fù)選框網(wǎng)格.

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

問題/問題:復(fù)選框按字母順序顯示，但與用戶期望的方式不同 - 它們在重復(fù)行中從左到右排列(就像您希望將它們?nèi)扛右粯?.

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

我怎樣才能讓它們按字母順序排列，但在垂直列中?所以按字母順序，你會閱讀從上到下，然后轉(zhuǎn)到下一列.

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 就可以做到這一點(diǎn)，但是在 CakePHP 中，我顯示復(fù)選框的調(diào)用只是:

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')); ?>

補(bǔ)充:

JS FIDDLE HERE(html 大多不可編輯因?yàn)樗怯?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)

推薦答案

根據(jù)評論，我創(chuàng)建了一個(gè)有望被接受的 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

這篇關(guān)于如何使 CakePHP 的 HABTM 復(fù)選框按字母順序排列在列中的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！