gridview区

<?= GridView::widget([
            'options' => [
                'class' => 'grid-view',
                'style'=>'overflow:auto',
                'id' => 'grid',
            ],
        'dataProvider' => $dataProvider,
        'showFooter' => true,//显示footer行

        //'filterModel' => $searchModel,
        'layout'=> '{items}<div class="text-right tooltip-demo">{pager}</div>',
        'pager'=>[
                //'options'=>['class'=>'hidden']//关闭分页
                'firstPageLabel'=>"首页",
                'prevPageLabel'=>'上一页',
                'nextPageLabel'=>'下一页',
                'lastPageLabel'=>'尾页',
             ],
        'columns' => [
            //['class' => 'yii\grid\SerialColumn'],
            //[ 'class' => 'yii\grid\CheckboxColumn'],
        [
            'class' => 'yii\grid\SerialColumn',
            'visible' => false,
        ],
                 [
                       'class'=>'yii\grid\CheckboxColumn',
                       'name'=>'id',  //设置每行数据的复选框属性
                       'headerOptions' => ['width'=>'30'],
                       'footer' =>  Html::a('批量删除', "javascript:void(0);", ['class' => 'btn btn-danger gridview','style' => 'float:right']) ,
                       'footerOptions' => ['colspan' => 6],  //设置删除按钮垮列显示;
                ],
            //'id',
            //'time',
            //'shouji',
            //'gupiao',
            //'is_check',

            [
                'attribute' => 'time',
                'label' => '时间',
                'value' => function($model) {
                    return date("Y-m-d H:i:s",$model->time);
                },
                'options' => [  
                    'width' => 180 , //调整列宽
                ],
                'footerOptions' => ['class'=>'hide'],
                //'headerOptions' => ['style' => 'text-align:center;'] 
            ],

            [
                'attribute' => 'shouji',
                'label' => '手机号码',
                'footerOptions' => ['class'=>'hide'],
                //'headerOptions' => ['style' => 'text-align:center;'] 
            ],

            [
                'attribute' => 'gupiao',
                'label' => '股票代码',
                'footerOptions' => ['class'=>'hide'],
                //'headerOptions' => ['style' => 'text-align:center;'] 
            ],

            [
                'attribute' => 'is_check',
                'label' => '查看状态',
                'value' => function($model) {
                    return $model->is_check == 0 ? '未查看' : '已查看';
                },
                'footerOptions' => ['class'=>'hide'],
                //'headerOptions' => ['style' => 'text-align:center;'],

            ],

           // ['class' => 'yii\grid\ActionColumn'],
             [
                'footerOptions' => ['class'=>'hide'],
                'class' => 'yii\grid\ActionColumn',
                'template' => '{flag_check}  &nbsp;  {delete}',
                'header' => '操作',
                'buttons' => [
                    //此处的test与'template'中'test'想同
                    'flag_check' => function ($url, $model, $key) { 
                                return Html::a('标记', $url,['data-method' => 'post','data-pjax'=>'0','class' => 'btn btn-primary btn-xs',]); 
                    },


                    //删除
                    'delete' => function ($url, $model, $key) { 
                                return Html::a(
                                    '删除', 
                                    ['delete', 'id' => $key],
                                    [
                                        'data-method' => 'post',
                                        'class' => 'btn btn-danger btn-xs',
                                        'data' => ['confirm' => '你确定要删除该条数据吗?',]
                                    ]
                                ); 
                    },


                ],
                //'headerOptions' => ['style' => 'text-align:center;'] ,
                
            ],
        ],
    ]); 

 

 

1、gridview设置options时增加一个id 这里我们命名grid

 

2、columns增加选项复选框,批量删除必然不可少了复选框操作,这里我们的name值设定为id,方便对数据操作

 

3、页面上我们增加一个批量删除按钮,注意这里我们增加了一个class gridview,方便后面js实现点击效果

 

4、最后一步,写js实现按钮操作,打开你的console看看,我们很轻松的就拿到了选中的行的id,然后这里就可以异步操作数据了。

<script type="text/javascript">

            $(".gridview").on("click", function () {
            var keys = $("#grid").yiiGridView("getSelectedRows");
    
            //post提交
            $.post('<?=Url::to(['message/deleteall']);?>',
            {
              arr_id:keys,
            },

            //返回数据
            function(data,status){
                if (status == "success") {
                    alert("成功删除数据"+data+"");
                    window.location.reload();//刷新当前页面.
                }else{
                    alert("error");
                    window.location.reload();//刷新当前页面.
                }
            });
});
</script>

 

 MessageController.php中

public function actionDeleteall()
    {    
       return Message::deleteAll(['in','id',Yii::$app->request->post('arr_id')]);
    }

将前端js传来的数组arr_id用系统自带deleteall方法删除,并返回删除的数目

 

 

posted on 2017-06-18 23:53  longzhankunlun  阅读(631)  评论(0编辑  收藏  举报