Как динамически добавить GridView на страницу?

Question

[MikMik]

Суть примерно такая - надо по нажатию на кнопку добавлять пустую таблицу на страницу, при этом делать это неограниченное количество раз, то есть нажал 3 раза появилось 3 таблицы.
Подскажите в какую сторону копать?

Answer 1

[MikMik]

Делаю так...

Контролер:

public function actionUpdate($id)
    {
        $model = $this->findModel($id);
        $sectionsList = EstimateSection::listOfSection($model->id);

        foreach ($sectionsList as $section) {
            $resources = new ActiveDataProvider([
                'query' => EstimateResource::find()->where(['estimate_section_id' => $section->id])
            ]);

            $sections[] = [
                'section' => $section,
                'resources' => $resources,
            ];
        }


        if ($this->request->isPost && $model->load($this->request->post()) && $model->save()) {
            return $this->render('update', [
                'model' => $model,
                'sections' => $sections
            ]);
        }

        return $this->render('update', [
            'model' => $model,
            'sections' => $sections
        ]);
    }

public function actionAjaxCreateSection($estimate_id) {
        
        $section = new EstimateSection();
        $section->estimate_id = $estimate_id;
        $section->save();

        $resources = new ActiveDataProvider([
            'query' => EstimateResource::find()->where(['estimate_section_id' => $section->id])
        ]);

        return $this->renderAjax('_new_section', [
            'resources' => $resources,
            'section_id' => $section->id,
        ]);
    }

Comments

[MikMik]

вью:
update.php

<div class="estimate-update">

    <h1><?= Html::encode($this->title) ?></h1>

    <?= $this->render('_form', [
        'model' => $model,
    ]) ?>

    <?php

    // echo "<pre>";
    // print_r ($sections);
    // echo "</pre>";
    // die;
    if (!$model->isNewRecord) {
        foreach ($sections as $data) {
            echo $this->render('_section', [
                'resources' => $data['resources'],
                'section' => $data['section'],
                'model' => $model,
            ]);
        }

        Pjax::begin(['id' => 'new_estimate_section']);
        
        echo (Html::a('Добавить секцию', [
            'ajax-create-section', 
            'estimate_id' => $model->id], 
            ['class' => 'add-new-section btn btn-primary']));
        
        Pjax::end();

        
    }
    ?>


</div>

_section.php

<?php

    Pjax::begin(['id' => 'estimate_section-' . $section->id]);
    ?>

    <?= GridView::widget([
        'dataProvider' => $resources,
        'summary' => false,
        'options' => [ 'style' => 'table-layout:fixed;' ],
        'showFooter' => true,
        'placeFooterAfterBody' => true,
        'emptyText' => '',
        'columns' => [
            [
                'class' => 'yii\grid\CheckboxColumn',
                'footer' => Icon::show('trash'),
                'contentOptions' => ['style' => 'width:25px;'],
            ],
            [
                'attribute' => 'resourceType.short_name',
                'label' => 'Тип',
                'contentOptions' => ['style' => 'width:30px;'],
            ],

            [
                'attribute' => 'name',
                // 'contentOptions' => ['style' => 'width:400px;'],
                'footer' => Typeahead::widget([
                    'name' => 'twitter_oss',
                    'options' => [
                        'placeholder' => 'Введите название ресурса ...',
                        'autocomplete' => 'off',
                    ],
                    'pluginOptions' => [
                        'hint' => false,

                    ],
                    'dataset' => [
                        [
                            'prefetch' => Url::to(['resource-list']),
                            // 'local' => $datas,
                            'datumTokenizer' => "Bloodhound.tokenizers.obj.whitespace('value')",
                            'queryTokenizer' => "Bloodhound.tokenizers.whitespace",
                            'display' => 'value',
                            // 'templates' => [
                            //     'notFound' => '<div class="text-danger" style="padding:0 8px">Unable to find repositories for selected query.</div>',
                            //     'suggestion' => new JsExpression("Handlebars.compile('{$template}')")
                            // ]
                        ]
                    ],
                    'pluginEvents' => [
                        "typeahead:select" => 'function(e, suggestion) {
                            $.ajax({
                                url: "ajax-add-resource",
                                data: {
                                    id: suggestion.id, 
                                    section_id:' . $section->id . '}
                            }).done(function(d) {
                                $("#new_resource_id").select2("close");
                                $.pjax.reload({container:"#estimate_section-' . $section->id . '"});
                            });
                            console.log(suggestion); }',
                        "typeahead:close" => "function(e, suggestion) { console.log(e.target.value); }",
                    ]
                ])
            ],
            [
                'class' => 'app\components\grid\InputColumn',
                'attribute' => 'quantity',
                'header' => 'Кол-во',
                'contentOptions' => ['style' => 'width:60px'],
            ],
            [
                'attribute' => 'unit.name',
                'header' => 'Ед.изм',
                'contentOptions' => ['style' => 'width:60px;'],
            ],
            [
                'class' => 'app\components\grid\InputColumn',
                'attribute' => 'price',
                'header' => 'Цена',
                'contentOptions' => ['style' => 'width:80px;'],
            ],
            [
                'attribute' => 'summ',
                'contentOptions' => ['style' => 'width:80px;'],
            ],
            [
                'attribute' => 'margin',
                'contentOptions' => ['style' => 'width:40px;'],
            ],
            [
                'attribute' => 'price_with_margin',
                'contentOptions' => ['style' => 'width:80px;'],
            ],
            [
                'attribute' => 'summ_with_margin',
                'contentOptions' => ['style' => 'width:80px;'],
            ],

        ],
    ]); ?>

    <?php Pjax::end() ?>

_new_section.php

<?php
    Pjax::begin(['id' => 'estimate_section-' . $section_id]);
    ?>

    <?= GridView::widget([
        'dataProvider' => $resources,
        'summary' => false,
        'options' => ['style' => 'table-layout:fixed;'],
        'showFooter' => true,
        'placeFooterAfterBody' => true,
        'emptyText' => '',
        'columns' => [
            [
                'class' => 'yii\grid\CheckboxColumn',
                'footer' => Icon::show('trash'),
                'contentOptions' => ['style' => 'width:25px;'],
            ],
            [
                'attribute' => 'resourceType.short_name',
                'label' => 'Тип',
                'contentOptions' => ['style' => 'width:30px;'],
            ],

            [
                'attribute' => 'name',
                // 'contentOptions' => ['style' => 'width:400px;'],
                'footer' => Typeahead::widget([
                    'name' => 'twitter_oss',
                    'options' => [
                        'placeholder' => 'Введите название ресурса ...',
                        'autocomplete' => 'off',
                    ],
                    'pluginOptions' => [
                        'hint' => false,

                    ],
                    'dataset' => [
                        [
                            'prefetch' => Url::to(['resource-list']),
                            // 'local' => $datas,
                            'datumTokenizer' => "Bloodhound.tokenizers.obj.whitespace('value')",
                            'queryTokenizer' => "Bloodhound.tokenizers.whitespace",
                            'display' => 'value',
                            // 'templates' => [
                            //     'notFound' => '<div class="text-danger" style="padding:0 8px">Unable to find repositories for selected query.</div>',
                            //     'suggestion' => new JsExpression("Handlebars.compile('{$template}')")
                            // ]
                        ]
                    ],
                    'pluginEvents' => [
                        "typeahead:select" => 'function(e, suggestion) {
                            $.ajax({
                                url: "ajax-add-resource",
                                data: {
                                    id: suggestion.id, 
                                    section_id:' . $section_id . '}
                            }).done(function(d) {
                                $("#new_resource_id").select2("close");
                                $.pjax.reload({container:"#estimate_section-' . $section_id . '"});
                            });
                            console.log(suggestion); }',
                        "typeahead:close" => "function(e, suggestion) { console.log(e.target.value); }",
                    ]
                ])
            ],
            [
                'class' => 'app\components\grid\InputColumn',
                'attribute' => 'quantity',
                'header' => 'Кол-во',
                'contentOptions' => ['style' => 'width:60px'],
            ],
            [
                'attribute' => 'unit.name',
                'header' => 'Ед.изм',
                'contentOptions' => ['style' => 'width:60px;'],
            ],
            [
                'class' => 'app\components\grid\InputColumn',
                'attribute' => 'price',
                'header' => 'Цена',
                'contentOptions' => ['style' => 'width:80px;'],
            ],
            [
                'attribute' => 'summ',
                'contentOptions' => ['style' => 'width:80px;'],
            ],
            [
                'attribute' => 'margin',
                'contentOptions' => ['style' => 'width:40px;'],
            ],
            [
                'attribute' => 'price_with_margin',
                'contentOptions' => ['style' => 'width:80px;'],
            ],
            [
                'attribute' => 'summ_with_margin',
                'contentOptions' => ['style' => 'width:80px;'],
            ],

        ],
    ]); ?>

    <?php Pjax::end() ?>

Новая таблица вставляется но взамен кнопки "Добавить секцию". Но это понятно так как она завернута в тот же pjax. Но почему то не работает typeahead.

Вопросов - как все таки вставить эту таблицу правильно, и чтоб typeahead работал и чтоб кнопка осталась

Пробовал через JS ее вставлять, но чет мозгов не хватает это сделать.