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

Question

我正在使用 yii-bootstrap 扩展并想使用复选框按钮组。渲染它没有问题，但我不知道如何读取哪个按钮被选中，哪个按钮没有被选中。是否有可能将每个复选框绑定(bind)到模型的属性？

这是我目前使用的(它实际上是来自 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,

View 中的完整代码如下所示:

$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 部分，我唯一不明白的是，当它像上面那样插入到 View 中时它可以工作，但如果包含在某些外部 .js 文件中则不起作用。我认为它与 POS_END 有关，但我不是 JavaScript 专家。