Как сделать так, чтобы флажки CakePHP HABTM были расположены в алфавитном порядке сверху вниз в столбцах - PullRequest
Новая
       8

Как сделать так, чтобы флажки CakePHP HABTM были расположены в алфавитном порядке сверху вниз в столбцах

0 голосов
/ 24 мая 2011

У меня есть список ресторанных кухонь (HABTM) - когда пользователь добавляет ресторан, он выбирает из всех флажков кухонь.

Входные данные для флажков установлены на float: left;с отступами / полями ... и т. д., и все выглядит хорошо - хорошая сетка флажков.

Вопрос / Проблема: Флажки отображаются в алфавитном порядке, но не так, как ожидал пользователь- они слева направо в повторяющихся строках (как и следовало ожидать, заставляя их плавать).

Как я могу получить их в алфавитном порядке, но в вертикальных столбцах?Итак, в алфавитном порядке, вы должны прочитать сверху вниз, а затем перейти к следующему столбцу.

Я мог бы сделать это, просто найдя w / просто обычный PHP, но в CakePHP мой вызов, чтобы показать флажки просто: 

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

ДОПОЛНЕНИЕ:

JS FIDDLE HERE (html в основном не редактируется, так как он генерируется CakePHP- может редактировать эхо CakePHP, если нужно - но этого не может быть в скрипке)

1 Ответ

1 голос
/ 25 мая 2011

На основе комментариев я создал, надеюсь, приемлемое решение 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
...