Yii2动态表单wbraganca将值复制到克隆字段 [英] Yii2 Dynamic form wbraganca copy value to cloned field
问题描述
我在Yii2项目中使用的是wbraganca动态表单，我想在其中将在第一组字段中输入的值复制到克隆的div中的一组字段中.
I am using wbraganca dynamic form in my Yii2 project, where I want to copy the values entered in the first set of fields to the set of fields in the cloned div.
据我了解，jQuery默认将值复制到克隆字段中. 在浏览扩展的dynamicform.js时， 我发现我认为代码覆盖了默认功能，该默认功能不允许将值复制到克隆字段中.
What I understand, that jQuery copies the values to the cloned field by default. When going through the dynamicform.js of the extension, I find code which I think overrides the default functionality that is not allowing the values to be copied over to the cloned field.
负责此操作的相关代码如下:
The relevant code responsible for the same is like this:
$template.find('input, textarea, select').each(function() {
if ($(this).is(':checkbox') || $(this).is(':radio')) {
...
$(this).prop('checked', false);
} else if($(this).is('select')) {
$(this).find('option:selected').removeAttr("selected");
} else {
$(this).val('');
}
});
....
现在我的问题是如何将第一组字段的值复制到克隆的字段. 例如我的领域是:
Now my question is how I can copy the value of first set of fields to the cloned fields. for example my field is like:
<?= $form->field($modelCustomBreakTime,
"[{$i}]days")->dropDownList(['select',$days]) ?> //where $days are days of week
所以基本上我想要的是当我选择星期一"时，复制的值应该是星期一".
so basically what I want is when I select Monday, the copied value should be Monday.
更新:_form.php内容
Update: _form.php contents
<?php
use app\models\User;
use yii\bootstrap\ActiveForm;
use yii\helpers\ArrayHelper;
use yii\helpers\Html;
use kartik\time\TimePicker;
use wbraganca\dynamicform\DynamicFormWidget;
$instructor_id=htmlspecialchars($_GET["id"]);
$instructor_array = ArrayHelper::map(User::find()->where(['user_role' => 'instructor'])->andwhere(['status' => 10])->all(), 'id', function ($model) {
return $model['first_name'] . ' ' . $model['last_name'];
})
/* @var $this yii\web\View */
/* @var $model app\modules\admin\models\CustomBreakTime */
/* @var $form yii\widgets\ActiveForm */
?>
<?php
//$instructor_id=htmlspecialchars($_GET["id"]);
// var_dump($id);
?>
<div class="customer-form">
<?php $form = ActiveForm::begin(['id' => 'dynamic-form']);
$days = ['Monday' => Yii::t('app', 'Monday'),
'Tuesday' => Yii::t('app', 'Tuesday'),
'Wednesday' => Yii::t('app', 'Wednesday'),
'Thursday' => Yii::t('app', 'Thursday'),
'Friday' => Yii::t('app', 'Friday'),
'Saturday' => Yii::t('app', 'Saturday'),
'Sunday' => Yii::t('app', 'Sunday'),
]; ?>
<div class="row">
<div class="panel panel-default">
<div class="panel-heading"><h4></i> Break Times</h4></div>
<div class="panel-body">
<?php DynamicFormWidget::begin([
'widgetContainer' => 'dynamicform_wrapper', // required: only alphanumeric characters plus "_" [A-Za-z0-9_]
'widgetBody' => '.container-items', // required: css class selector
'widgetItem' => '.item', // required: css class
'limit' => 10, // the maximum times, an element can be cloned (default 999)
'min' => 1, // 0 or 1 (default 1)
'insertButton' => '.add-item', // css class
'deleteButton' => '.remove-item', // css class
'model' => $modelsCustomBreakTime[0],
'formId' => 'dynamic-form',
'formFields' => [
'days',
'start_time',
'end_time',
],
]); ?>
<div class="container-items"><!-- widgetContainer -->
<?php foreach ($modelsCustomBreakTime as $i => $modelCustomBreakTime): ?>
<div class="item panel panel-default"><!-- widgetBody -->
<div class="panel-heading">
<h3 class="panel-title pull-left">CustomBreakTime</h3>
<div class="pull-right">
<button type="button" class="add-item btn btn-success btn-xs"><i class="glyphicon glyphicon-plus"></i></button>
<button type="button" class="remove-item btn btn-danger btn-xs"><i class="glyphicon glyphicon-minus"></i></button>
</div>
<div class="clearfix"></div>
</div>
<div class="panel-body">
<div class="col-sm-6">
<?=$form->field($modelInstructor, 'id')->dropDownList($instructor_array, ['options' => [$_GET['id'] => ['Selected'=>'selected'],'prompt' => 'Select Instructor']])?>
</div>
<?php
// necessary for update action.
if (! $modelCustomBreakTime->isNewRecord) {
echo Html::activeHiddenInput($modelCustomBreakTime, "[{$i}]id");
}
?>
<div class="row">
<div class="col-sm-4">
<?= $form->field($modelCustomBreakTime, "[{$i}]days")->dropDownList(['select',$days]) ?>
</div>
<div class="col-sm-4">
<?= $form->field($modelCustomBreakTime, "[{$i}]start_time",['enableLabel' => false])->widget(TimePicker::classname(), ['pluginOptions' => [
'minuteStep' => 15,
'showMeridian' => false,
'defaultTime' => date('H:i', strtotime('11.00')), ],
]) ?>
</div>
<div class="col-sm-4">
<?= $form->field($modelCustomBreakTime, "[{$i}]end_time",['enableLabel' => false])->widget(TimePicker::classname(), ['pluginOptions' => [
'minuteStep' => 15,
'showMeridian' => false,
'defaultTime' => date('H:i', strtotime('11.00')), ],
]) ?>
</div>
</div><!-- .row -->
</div>
</div>
<?php endforeach; ?>
</div>
<?php DynamicFormWidget::end(); ?>
</div>
</div>
<div class="form-group">
<?= Html::submitButton($modelCustomBreakTime->isNewRecord ? 'Create' : 'Update', ['class' => 'btn btn-primary']) ?>
</div>
<?php ActiveForm::end(); ?>
</div>
推荐答案
如果您正在查看js文件，则可能忽略了
If you are looking into the js file then you might have overlooked the events section for dynamicform.js line 26
var events = {
beforeInsert : 'beforeInsert',
afterInsert : 'afterInsert',
beforeDelete : 'beforeDelete',
afterDelete : 'afterDelete',
limitReached : 'limitReached'
};
但是，只有不使用嵌套表单时，您才可以使用这些事件.您可以像下面那样绑定afterInsert事件
But you can use these events only if you are not using nested forms. You can bind afterInsert event like below
$('.dynamicform_wrapper').on('afterInsert', function (e, item) {
//code to copy values from the desired row/field set
});
dynamicform_wrapper是widgetContainer小部件属性的值.
对于嵌套表单，虽然您可以为此编写自己的脚本，例如无论何时插入或删除元素时都可以使用Mutation Observers触发js函数，但尚未正式提供任何支持.
For the Nested forms, there isn't any support provided yet officially, although you can write your own script for that like using Mutation Observers to trigger a js function whenever an element is inserted or deleted.
这里是一篇不错的文章，上面有一个可行的例子.
Here is a good article with a working example.
这篇关于Yii2动态表单wbraganca将值复制到克隆字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
