kartik \ builder \ Form类型为Form :: INPUT_WIDGET的Form在yii \ bootstrap \ modal中不起作用

Question

我正在开发一个模块，该模块需要使用GridView在数据库中显示一个表，并且需要有一个ActionColumn，其中有一个图标。如果单击图标，它将显示一个模式，其形式为INPUT_WIDGET，类型为select2，touchspin，rangeInput，均来自Kartik-v。所以我的问题是INPUT_WIDGET表现为异常select2继续加载，touchspin没有旋转，并且rangeInput无法正常工作。

具有GridView代码的视图页面如下，

<?php
    use kartik\builder\Form;
    use kartik\form\ActiveForm;
    use kartik\grid\GridView;
    use yii\bootstrap\Modal;
    use yii\helpers\Html;
    use yii\helpers\Url;

    $this->title = 'Update Activity Summary';
    $this->params['breadcrumbs'][] = ['label' => 'Activity Summaries', 'url' => ['index']];
    $this->params['breadcrumbs'][] = $this->title;
    $this->registerJs(
        "$(function(){
            // changed id to class
            $('.modalButton').click(function (){
                $.get($(this).attr('href'), function(data) {
                    $('#modal').modal('show').find('#modalContent').html(data)
                });
                return false;
            });
        });"
    );
?>
    <div class="activity-summary-create">
        <h1><?=Html::encode($this->title)?></h1>
<?php
    echo GridView::widget(
        [
            'dataProvider' => $dataprovider,
            'columns' => [
                'activity_name',
                'project.createdBy.emp_name',
                'createdBy.emp_name',
                'progress',
                'taken_hours',
                'est_hours',
                [
                    'attribute' => 'details',
                    'class' => 'kartik\grid\ExpandRowColumn',
                    'header' => 'details',
                    'width' => '50px',
                    'value' => function ($model, $key, $index, $column) {
                        return GridView::ROW_COLLAPSED;
                    },
                    'detail' => function ($model, $key, $index, $column) {
                        return Yii::$app->controller->renderPartial('activity_details', ['model' => $model]);
                    },
                    'expandIcon' => '<span class="glyphicon glyphicon-chevron-right"></span>',
                    'collapseIcon' => '<span class="glyphicon glyphicon-chevron-down"></span>',
                    'allowBatchToggle' => false,
                    'expandOneOnly' => true
                ],
                [
                    'class' => 'yii\grid\ActionColumn',
                    'header' => 'Update Summary',
                    'buttons' => [
                        'update_summary' => function ($url, $model, $key) {
                            return "<a class=\"modalButton\" href=\"?r=activity-summary/summary-edit&id=$model->activity_id\"><span class=\"glyphicon glyphicon-upload\" aria-hidden=\"true\"></span></a>";
                        }
                    ],
                    'template' => '{update_summary}'
                ]
            ]
        ]
    );
    Modal::begin(
        [
            'header' => 'Update Summary',
            'id' => 'modal',
            'size' => 'modal-lg'
        ]
    );
    echo "<div id='modalContent'></div>";
    Modal::end();
?>

模态表单的查看页面如下，

<?php
use kartik\builder\Form;
use kartik\form\ActiveForm;
use yii\helpers\Html;

$form = ActiveForm::begin(['type' => ActiveForm::TYPE_VERTICAL]);
echo Form::widget(
    [
        'model' => $model,
        'form' => $form,
        'attributes' => [
            'summary' => ['type' => Form::INPUT_TEXTAREA, 'options' => ['placeholder' => 'say about the activity..']]
        ]
    ]
);
echo Form::widget(
    [
        'model' => $model,
        'form' => $form,
        'columns' => 4,
        #    'compactGrid' => true,
        'attributes' => [
            'taken_hours' => [
                'type' => Form::INPUT_WIDGET,
                'widgetClass' => '\kartik\touchspin\TouchSpin'
            ],
            'actual_date' => [
                'type' => Form::INPUT_WIDGET,
                'widgetClass' => '\kartik\select2\Select2'
            ],
            'progress_added' => [
                'type' => Form::INPUT_WIDGET,
                'label' => Html::label('Progress (%)'),
                'widgetClass' => '\kartik\range\RangeInput',
                'options' => ['width' => '100%',
                    'html5Container' => ['style' => 'width:100px'],
                    'html5Options' => ['min' => 0, 'max' => 100],
                    'addon' => ['append' => ['content' => '%']]
                ]
            ],
            'category_id' => [
                'type' => Form::INPUT_WIDGET,
                'widgetClass' => '\kartik\select2\Select2',
                'options' => [
                    'data' => $data['Category']
                ]
            ],
            'actions' => [
                'type' => Form::INPUT_RAW,
                'value' => Html::submitButton(
                    'Submit',
                    ['class' => 'btn btn-primary ml-2']
                )
            ]
        ]
    ]
);
ActiveForm::end();

带有图标以触发模式的GridView的图像

模态图像，其形式为INPUT_WIDGET

谢谢。