editable 的插件 点击下一个时 前一个自动的自动关闭 [ 2.0 版本 ]

editable 的插件 点击下一个时 前一个自动的自动关闭

[
    'label'=>'暂停发布',
    'format'=>'raw',
    'value' => function($model){
        return \kartik\editable\Editable::widget([
            'name'=>'status',
            //'model'=>$model,
            'value' =>$model->status == 0?'正常':($model->status==1?'删除':'暂停'),
            'attribute'=>'status',
            'header' => '暂停发布',
            'size'=>'md',
            'type' => \kartik\popover\PopoverX::TYPE_PRIMARY,
            'placement' => \kartik\popover\PopoverX::ALIGN_LEFT,//设置插件位置
            'formOptions'=>[
                //'method'=>'post',
                'action'=> Yii::$app->urlManager->createAbsoluteUrl(['/web-event-info/editable','id'=>$model->id])
            ],
            'format' => Editable::FORMAT_LINK,

            'inputType' => Editable::INPUT_DROPDOWN_LIST,
            'data'=>[
                0 =>'正常',
                1 =>'删除',
                2 =>'暂停'
            ],
            'options' => ['class'=>'form-control', 'placeholder'=>'请选择'],
            **'editableValueOptions'=>['class'=>'listSets'],**

        ]);
    }

],

main.php 布局文件中添加

<script type="text/javascript">
    $(function(){
        $(".listSets").each(function(){
            $(this).click(function(e){
                e.preventDefault();
                $(".popover").children(".popover-title").children(".close").click();
                $(this).next().addClass("in").attr("aria-hidden","false");
                $("body").css({"overflow":"auto"});
            })
        })

    })
</script>

前端代码详情

<button type="button" id="w18-targ" class="listSets kv-editable-value kv-editable-link" data-toggle="popover-x" data-placement="right" data-target="#w18-popover">X</button>
<div id="w18-popover" class="kv-editable-popover skip-export has-footer popover popover-default popover-md" role="dialog">
    <div class="arrow"></div>
    <div class="popover-title">
        <button type="button" class="close" data-dismiss="popover-x" aria-hidden="true">×</button>
        <i class="glyphicon glyphicon-edit"></i> Edit 客户端推荐
    </div>
</div>