Editable 的inputType 为INPUT_SELECT2的使用

需求：
在开发项目时,遇到这样的需求,在gridView列表中,需要编辑指定列的信息,这个编辑功能使用可搜索的下拉框。
分析：
1.在Yii中，待搜索的下拉框组件使用kartik\select2\Select2
2…在Yii中，可编辑窗口小部件使用 kartik-v/yii2-editable（也有别的editable插件，这里使用的是kartik的）

很明显我的需求需要用到两者的结合体。
通过kartik-v/yii2-editable文档查阅，Editable的属性inputType有Editable::INPUT_SELECT2属性值设置，但是文档中没有涉及到这个类型小部件的完整使用demo。

于是我就结合yii-select2小部件的使用方法，写出来这个功能。
废话不多说，直接上代码：
第一种场景,要在select2里异步获取数据:

// view 层
// 引入Editable；
use kartik\editable\Editable;
// 引入JsExpression,处理回调数据
use yii\web\JsExpression;

// gridView中加入可编辑
$gridColumns[] = [
    'label'     => '所属总店',
    'encodeLabel' => false,
    'attribute' => 'mainStore',
    'format' => 'raw',
    'value' => function($row){
        $info = Editable::widget([
            'name'=>'name',
            //点击的文本内容
            'value' => $row['name'],
            'header' => '所属总店',
            'submitOnEnter' => false,
           //提交的参数
            'additionalData' => ['code' => $row['code'], 'key' => 'name'],
            'buttonsTemplate' => '{reset}{submit}',
            'submitButton' => ['class'=>'btn btn-sm btn-danger', 'icon'=>'保存'],
            'resetButton' => ['class' => 'btn btn-sm btn-default', 'icon'=>'重置'],
            'inputType'    => Editable::INPUT_SELECT2,
            'options' => [
                'pluginOptions' => [
                    'width'       => '200px',
                    'placeholder' => '请选择',
                    'ajax' => [
                        'delay' => 500,
                         // ajax查询数据接口
                        'url' => '/share-shop/shop-select2',
                        'dataType' => 'json',
                        //数据处理
                        'data' => new JsExpression('function(params) { return {q:params.term}; }')
                    ],
                ],

            ],
            // 提交保存接口
            'formOptions'  => ['method'=>'post', 'action'=>'/share-shop/save-group'],
        ]);

       return $info;
    },
];

效果展示：

第二种场景,select2下拉框数据同步获取:

 $shopOptions = [18=>'Test007',222=>'test2',33=>'test3'];
$gridColumns[] = [
    'label'     => '所属总店',
    'encodeLabel' => false,
    'attribute' => 'groupId',
    'format' => 'raw',
    'value' => function($row) use ($shopOptions){
        $info = Editable::widget([
            'name'=>'groupId',
            'value' => $row['group']['groupName'],
            'header' => '所属总店',
            'submitOnEnter' => false,
            'additionalData' => ['code' => $row['code'], 'key' => 'groupId'],
            'buttonsTemplate' => '{reset}{submit}',
            'submitButton' => ['class'=>'btn btn-sm btn-danger', 'icon'=>'保存'],
            'resetButton' => ['class' => 'btn btn-sm btn-default', 'icon'=>'重置'],
            'inputType'    => Editable::INPUT_SELECT2,
            'options' => [
                'pluginOptions' => [
                    'width'       => '200px',
                    'placeholder' => '请选择',
                ],
                //下拉列表数据
                'data' => $shopOptions,
            ],
             // 提交保存接口
            'formOptions'  => ['method'=>'post', 'action'=>'/share-shop/save-group'],
        ]);
        return $info;
    },
];

效果图:

场景一和场景二保存:
formData数据:
接口处理:

public function actionSaveGroup()
    {
    	//获取post参数
        $data = Yii::$app->request->post();
        $code = $data['code'];
        $key = $data['key'];
        $groupId = $data[$key];
        if (empty($code) || empty($groupId)) {
            return $this->asJson(['error'=>1, 'message'=>'参数错误']);
        }
        //数据修改
        $service = $this->service(TestService::className());
        $apiResponse = $service->saveMap($code, $groupId);
        
        // 所属店铺名称
        $shopList = [11=>'test',222==>'test2',33=>'test3'];
        $newShop = ArrayHelper::index($shopList, 'groupId');
        $groupName = $shopList [$groupId];

        if ($apiResponse->isSuccess()) {
            // output是将修改的值更新当前文本的值,赋空值则默认是value值
            return $this->asJson(['output'=> $groupName, 'message'=>'']);
        } else {
            return $this->asJson(['output'=>'', 'message'=>$apiResponse->getMessage()]);
        }
    }

kartik-v/yii2-editable 具体使用文档可参考: https://demos.krajee.com/editable