Yii2 使用 Select2 和 yii2-formwizard 的表格步骤 [英] Yii2 Using Select2 with tabular step of yii2-formwizard

问题描述

我正在使用

解决方案

所以我们需要把afterInsert事件中的代码改成下面这样

let selectElement = $(this).find('.field-todelete-'+params.rowIndex+'-sex > select');让 dataKrajee = eval(selectElement.data('krajee-select2'));//将数据集属性更新为if (typeof selectElement[0].dataset.select2Id !== 'undefined') {//获取具有select2绑定到的输入的旧ID的旧数据集让 oldDataSelect2Id = selectElement[0].dataset.select2Id;//删除旧数据集删除 selectElement[0].dataset.select2Id;//添加指向克隆元素的新id的新dataselect让 newDataSelect2Id = oldDataSelect2Id.replace(/\-([\d]+)\-/,'-' + parseInt(params.rowIndex) + '-');//添加具有新克隆输入ID的新数据集selectElement[0].dataset.select2Id= newDataSelect2Id;}selectElement.select2(dataKrajee);

我将在接下来的几天内更新 wiki 文档和代码示例以及演示中的代码.

希望能帮到你.

I am using yii2-formwizard which is a handy tool in my project with kartik\select2. Everything is work perfectly except when I press add to get next group select2 drop-down on previous groups are disappeared.

This has happen when I modify my controller to capture data from my model as explained in my previous post, I have missed something in scripting side I'm bit poor in jquery/JS etc, anyhow except that data is being saved and widget work perfectly

my controller

<?php

public function actionCreatemulti()
{
    $this->layout = 'layout2';
    $model = [new Todelete()];
    $sex = [['id' => 1, 'name' => 'male'], ['id' => 2, 'name' => 'female']];

    if (Yii::$app->request->isPost) {

        $count = count(Yii::$app->request->post('Todelete', []));
        //start the loop from 1 rather than 0 and use the $count for limit
        for ($i = 1; $i < $count; $i++) {
            $model[] = new Todelete();
        }

        if (Model::loadMultiple($model, Yii::$app->request->post()) && Model::validateMultiple($model)) {
            foreach ($model as $md) {
                $md->save(false);
            }
            return $this->render('index');
        }
    }

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

my view

echo FormWizard::widget(
    [
        'formOptions' => [
            'id' => 'my_form_tabular'
        ],
        'steps' => [
            [
                //should be a single model or array of Activerecord model objects but for a single model only see wiki on github
                'model' => $model,

                //set step type to tabular
                'type' => FormWizard::STEP_TYPE_TABULAR,

                'fieldConfig' => [
                    'sex' => [
                        'widget' => Select2::class,
                        'containerOptions' => [
                            'class' => 'form-group'
                        ],
                        'options' => [
                            'data' => $data,
                            'options' => [
                                'class' => 'form-control'
                            ],
                            'theme' => Select2::THEME_BOOTSTRAP,
                            'pluginOptions' => [
                                'allowClear' => true,
                                'placeholder' => 'Select sex'
                            ]
                        ],

                        //set tabular events for select2 fix which doesnot work correctly after cloning

                        'tabularEvents' => [

                            'beforeClone' => "function(event, params){
                                //fix for select2 destroy the plugin

                                let element = $(this);
                                element.select2('destroy');
                            }",
                            "afterClone" => "function(event, params){

                                //bind select2 again after clone

                                let element = $(this);
                                let elementId = $(this).attr('id');
                                let dataKrajee = eval(element.data('krajee-select2'));
                                let dataSelect2Options = element.data('s2-options');
                                $.when(element.select2(dataKrajee)).done(initS2Loading(elementId, dataSelect2Options));
                            }",
                            "afterInsert" => "function(event,params){
                                //initialize the options for the select2 after initializing
//changed according to my environment

                                let selectElement = $(this).find('.field-todelete-'+params.rowIndex+'-sex > select');
                                let dataKrajee = eval(selectElement.data('krajee-select2'));
                                selectElement.select2(dataKrajee);
                            }"
                        ]
                    ]
                ]
            ]

        ]
    ]
);

https://cdn1.imggmi.com/uploads/2019/8/31/158dc0f338e0d780747c5f72fa2ed6bb-full.png https://cdn1.imggmi.com/uploads/2019/8/31/4e394e87aa162d3f457c32af8d30373b-full.png

解决方案

Reason

The issue you have pointed out does exist, and you are right about it. But this issue is related with the recent change to the kartik\select2 @V2.1.4.The demo links are using an older version of the select2 V2.1.3 which dont have this dataset attribute defined, and hence works correctly.

The widget does not integrate all these changes and leaves on the user who is integrating the widget

The reason is that it won't be possible to control it correctly inside the plugin as there could be any widget a user wants to use and going to keep adding the code for every other widget isn't what I would vote for. So a better approach would be to provide the event triggers for the specific actions which require a pre or post-processing of an element, where according to the needs the user can adjust his code

Troubleshooting

Now about the issue, there is a new dataset attribute data-select2-id which holds the name of the input that the select2 is bind to and after cloning the new element that attribute is not updated to the newer element id which is causing your old select element to vanish.

See the image below it is from my own code so just ignore the address-0-city field name as it is not related to your code and is for understanding only

Solution

So we need to change the code in the afterInsert event to the below one

let selectElement = $(this).find('.field-todelete-'+params.rowIndex+'-sex > select');
let dataKrajee = eval(selectElement.data('krajee-select2'));

//update the dataset attribute to the
if (typeof selectElement[0].dataset.select2Id !== 'undefined') {

    //get the old dataset which has the old id of the input the select2 is bind to 
    let oldDataSelect2Id = selectElement[0].dataset.select2Id;

    //delete the old dataset
    delete selectElement[0].dataset.select2Id;

    //add the new dataselect pointing to the new id of the cloned element
    let newDataSelect2Id = oldDataSelect2Id.replace(
    /\-([\d]+)\-/,
    '-' + parseInt(params.rowIndex) + '-'
    );

    //add the new dataset with the new cloned input id 
    selectElement[0].dataset.select2Id= newDataSelect2Id;
}
selectElement.select2(dataKrajee);

I will update the code on the wiki docs and the code samples along with the demos too in next few days.

Hope it helps you out.

这篇关于Yii2 使用 Select2 和 yii2-formwizard 的表格步骤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！