如何使CakePHP的HABTM复选框按字母顺序从上到下排列 [英] How to make CakePHP's HABTM checkboxes alphabetical top to bottom in columns

问题描述

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

复选框输入设置为float：left;

问题/问题：
复选框按字母顺序显示，但不是以用户期望的方式显示 - 它们在重复的行中向左移动（就像您希望将它们全部悬浮一样）。

我如何让他们按字母顺序，但在垂直列？

我可以做到这一点，只是找到正常的PHP，但在CakePHP，我的调用以显示复选框只是：

 <？php echo $ this-> Form-> input '，array（'multiple'=>'checkbox'））; ？> 
  

ADDITION：

JS FIDDLE HERE （html is most un-editable因为它是由CakePHP生成的 - 如果需要，可以编辑CakePHP回声，但不能在小提琴中）

解决方案

请参阅： http://jsfiddle.net/svRmL/

  var $ element = $（'＃cuisines'）; 
 var $ elementWidth = $ element.find（'> .checkbox'）。outerWidth（true），
 elementCount = $ element.find（'> .checkbox'）length，
 $ boxes = $ element.find（'> .checkbox'）; 
 
 / *仅用于调试* / 
 $ 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）; //将元素从前一个调整大小的列中移动
 $（'。tempColumn'） .remove（）; //销毁旧列
 for（i = 0; i  $ thisColumn = $（'< div class =tempColumn/& ）.appendTo（$ element）.css（{
 width：$ elementWidth，
 float：'left'
}）; 
 inc = Math.ceil（elementCount / perRow） ; 
 for（j = inc * i; j  $ boxes.eq（j）.appendTo（$ thisColumn）; 
} 
} 
}）。resize（）; //触发调整大小函数
  

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

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.

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

ADDITION:

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)

解决方案

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

See: 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复选框按字母顺序从上到下排列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！