Question

我正在使用yii-bootstrap扩展，并希望使用复选框按钮组。渲染它运行没有问题，但我不知道如何阅读哪个按钮被检查，哪个没有。是否有可能将每个复选框绑定到模型的属性？

这是我到目前为止使用的内容（它实际上是yii-bootstrap网站的精确副本）：

<?php $this->widget('bootstrap.widgets.TbButtonGroup', array(
  'type' => 'primary',
  'toggle' => 'radio', // 'checkbox' or 'radio'
  'buttons' => array(
    array('label'=>'Left'),
    array('label'=>'Middle'),
    array('label'=>'Right'),
  ),
)); ?>

Answer 1

我需要此按钮组来选择应该在搜索中使用哪些细节进行过滤。这就是为什么我的模型中有一些辅助属性叫做（坚持这些例子中的命名约定）$ leftSearch，$ middleSearch和$ rightSearch。

我希望按钮可以根据用户的选择保持推入或推出（否则会让人感到困惑，因为每次刷新后按钮都会被按下，但搜索属性会存储在用户的隐藏字段中没看到）。我用

实现了这个目标

'active' => ($model->leftSearch)?true:false,

另一件事是数据值会根据用户在提交页面之前选择的内容而有所不同。这是通过以下方式完成的：

'data-value' => ($model->leftSearch)?0:1,

视图中的完整代码如下所示：

$this->widget('bootstrap.widgets.TbButtonGroup', array(
        'type' => 'primary',
        'toggle' => 'checkbox',
        'buttons' => array(
            array('label'=>'Left', 
                'active' => ($model->leftSearch)?true:false,
                'htmlOptions'=>array(
                    'data-field' => 'Model_leftSearch',
                    'data-value' => ($model->leftSearch)?0:1,
            ),),
            array('label'=>'Middle', 
                'active' => ($model->middleSearch)?true:false,
                'htmlOptions'=>array(
                    'data-field' => 'Model_middleSearch',
                    'data-value' => ($model->middleSearch)?0:1,
            ),),
            array('label'=>'Right', 
                'active' => ($model->rightSearch)?true:false,
                'htmlOptions'=>array(
                    'data-field' => 'Model_rightSearch',
                    'data-value' => ($model->rightSearch)?0:1,
            ),),
        ),
    ));
echo CHtml::activeHiddenField($model, 'leftSearch');
echo CHtml::activeHiddenField($model, 'middleSearch');
echo CHtml::activeHiddenField($model, 'rightSearch');

javascript与frostyterrier发布的内容完全相同

Yii::app()->clientScript->registerScript('buttonGroup', "
  $(function(){
   $('.btn-group a').click(function(){
    var fieldId = $(this).data('field');
    var value = $(this).data('value');
    $('#' + fieldId).val(value); 
   });
  });
", CClientScript::POS_END);

我对javascript部分唯一不理解的是它在插入到视图中时如上所述，但如果包含在某些外部.js文件中则不起作用。我认为它与POS_END有关，但我不是javascript专家。

Answer 2

我查看了TbButtonGroup的源代码，似乎没有办法将每个复选框绑定到属性。但是，您可以使用数据属性将每个按钮链接到表示模型属性的隐藏字段。这可能是下一个最接近的事情，可能也需要最少量的代码。这是你如何做到的：

PHP：要求您将模型存储在名为$ model的变量中。放置在表单标签中。确保加载了jQuery。

$this->widget('bootstrap.widgets.TbButtonGroup', array(
  'type' => 'primary',
  'toggle' => 'radio', // 'checkbox' or 'radio'
  'buttons' => array(
    array('label'=>'Left', 'htmlOptions' => array(
        'data-field' => 'Model_left',
        'data-value' => 1,
    )),
    array('label'=>'Middle', 'htmlOptions' => array(
        'data-field' => 'Model_middle',
        'data-value' => 2,
    )),
    array('label'=>'Right', 'htmlOptions' => array(
        'data-field' => 'Model_right',
        'data-value' => 3,
    )),
  ),
));
echo CHtml::activeHiddenField($model, 'left');
echo CHtml::activeHiddenField($model, 'middle');
echo CHtml::activeHiddenField($model, 'right');

在上面的代码中，单词Model需要替换为您的模型名称，单词left，middle，right需要替换为您的模型属性。需要将数据值设置为您希望每个按钮表示的值。

使用Javascript：

Yii::app()->clientScript->registerScript('buttonGroup', "
$(function(){
    $('.btn-group a').click(function(){
        var fieldId = $(this).data('field');
        var value = $(this).data('value');
        $('#' + fieldId).val(value);
    });
});
", CClientScript::POS_END);

然后你可以正常提交表格。

Answer 3

您只需为每个按钮设置ID：

<?php $this->widget('bootstrap.widgets.TbButtonGroup', array(
  'type' => 'primary',
  'toggle' => 'radio', // 'checkbox' or 'radio'
  'buttons' => array(
    array('label'=>'Left', 'url' => '#', 'linkOptions'=>array('id' => 'btn_1')),
    array('label'=>'Middle', 'url' => '#', 'linkOptions'=>array('id' => 'btn_2')),
    array('label'=>'Right', 'url' => '#', 'linkOptions'=>array('id' => 'btn_3')),
  ),
)); ?>

如何从yii中的bootstrap复选框按钮获取价值？

3 个答案: