Yii2 kartik switchinput在一个视图中，多个窗体不工作

Question

首先感谢您的关注。我正试图在一个视图中处理多个表单，但a对此并不幸运。

view.php

use kartik\form\ActiveForm;
use kartik\widgets\SwitchInput;

$this->title = Yii::t('app', 'Links');
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="link-index">
    <div class="row">
        <?php foreach ($links as $link):?>
            <div class="col-md-2">
                <?php
                $form = ActiveForm::begin([
                    'id' => $link->_id,
                    'type' => ActiveForm::TYPE_VERTICAL
                ]); ?>
                <?= $form->field($link, 'url') ?>
                <?= $form->field($link, 'active')->widget(SwitchInput::classname(), [
                    'pluginOptions' => [
                        'size' => 'medium',
                        'onColor' => 'success',
                        'offColor' => 'danger',
                    ],
                    'pluginEvents'=>[
                        "switchChange.bootstrapSwitch" => "function(item) { console.log(item); }"
                    ]]); ?>

                <?php ActiveForm::end(); ?>
            </div>
        <?php endforeach; ?>
    </div>
</div>

结果如下：

和控制台输出（无错误）

我想我已经选择了正确的方式来渲染我所有的模型对象的形式？哈？

Answer 1

实际上，您不能仅使用一个模型属性创建此小部件的多个实例。

示例：1）不起作用：

<?= $form->field($link, 'active')->widget(SwitchInput::classname()
<?= $form->field($link, 'active')->widget(SwitchInput::classname()

2） 如果要使其工作，则需要不同于模型的唯一属性：

<?= $form->field($link, 'active0')->widget(SwitchInput::classname()
<?= $form->field($link, 'active1')->widget(SwitchInput::classname()

但要为每个独特的字段生成独特的模型属性（这根本不是交易），最好通过kartik widget的无模型版本来解决这个问题：

echo '<label class="control-label">Status</label>';
echo SwitchInput::widget(['name'=>'status_1', 'value'=>true]);
echo '<label class="control-label">Status</label>';
echo SwitchInput::widget(['name'=>'status_2', 'value'=>true]);

答案来源取自kartik开关输入小部件页面，希望，它有助于如果不是作者的问题，但下一个人，谁会找到这个问题（发现我，当我正在搜索解决这个问题）

Answer 2

面临与主题作者相同的问题。解决办法是：

<?= $form->field($link, 'active')->widget(SwitchInput::classname(), [
    'pluginOptions' => [
        'size' => 'medium',
        'onColor' => 'success',
        'offColor' => 'danger',
     ],
     'options' => [
         'id' => $link->_id // !!!
     ],
 ]); ?>

SwitchInput小部件必须具有各种id，因为在呈现小部件时会使用该id。

Answer 3

编辑

根据我们的讨论，OP没有尝试在同一字段上初始化，而是有多个具有相同字段名的模型，您使用foreach显示它们，因此我建议您这样做：，

1. 在您的foreach中使用对不带模型的小部件的静态调用

这样，您就不必担心在提交表单、验证并将数据保存到数据库表时手动将值加载到模型字段，但在需要编辑时，您可能需要手动加载字段，只需使用开关输入的值选项即可加载相应的模型字段值。

如果现在不使用某个计数器，您可能已经在foreach循环中使用了该计数器。如果这对你有帮助，请参见下文。我将添加一个简单的$计数器，向您展示我所说的内容，您可以根据需要修改它。

这是示例代码，以便你得到我的建议

//the counter 
$counter = 1;

//the foreach loop
foreach(...){
//your form 
$form = ActiveForm::begin(['id' => 'form_' . $counter]);

//call the switchInput without activeform or model
echo SwitchInput::widget([
    'name' => 'fake_status_' . $counter,
    'pluginOptions' => [
        'onColor' => 'success',
        'offColor' => 'danger',
    ], 'pluginEvents' => [
        "switchChange.bootstrapSwitch" => "function(item) { 
             if($(item.currentTarget).is(':checked')){ 
                 $('#status_" . $counter . "').val(1)
             }else{ 
                 $('#status_" . $counter . "').val(0)} 
         }"
    ]
]);

//the original status field
$form->field($model, 'status', ['inputOptions' => ['id' => 'status_' . $counter]])->hiddenInput();

ActiveForm::end();
$counter++;
}

您不能对同一输入或模型字段使用多个开关，这就是出现此问题的原因，因为开关输入通过分配id来初始化脚本，并且您尝试在同一字段名3个不同的时间对其进行初始化，不能有多个元素具有相同的id，因此javascript/jquery自然会在匹配的第一个元素上初始化插件，尝试在不使用model的情况下使用不同的名称进行初始化。

echo SwitchInput::widget([
    'name' => 'status',
    'pluginOptions' => [

        'size' => 'medium' ,
        'onColor' => 'success' ,
        'offColor' => 'danger' ,
    ],'pluginEvents' => [
        "switchChange.bootstrapSwitch" => "function(item) { console.log(item); }"
]
]);


echo SwitchInput::widget([
    'name' => 'status2',
    'pluginOptions' => [

        'size' => 'medium' ,
        'onColor' => 'success' ,
        'offColor' => 'danger' ,
    ],'pluginEvents' => [
        "switchChange.bootstrapSwitch" => "function(item) { console.log(item); }"
]
]);    

或者用不同的名称声明模型中的自定义字段，比如$status2，$status2，然后用它们用Model初始化。

echo $form->field ( $model , 'status' )->widget ( SwitchInput::classname () , [
    'pluginOptions' => [
        'size' => 'medium' ,
        'onColor' => 'success' ,
        'offColor' => 'danger' ,
    ] ,
    'pluginEvents' => [
        "switchChange.bootstrapSwitch" => "function(item) { console.log(item); }"
] ] );
echo $form->field ( $model , 'status2' )->widget ( SwitchInput::classname () , [
    'pluginOptions' => [
        'size' => 'medium' ,
        'onColor' => 'success' ,
        'offColor' => 'danger' ,
    ] ,
    'pluginEvents' => [
        "switchChange.bootstrapSwitch" => "function(item) { console.log(item); }"
] ] );