Yii2 GridView小部件的应用

最新推荐文章于 2024-08-28 09:24:42 发布

苏康申

最新推荐文章于 2024-08-28 09:24:42 发布

阅读量682

点赞数

分类专栏： YII 文章标签： GridView Yii2

本文链接：https://blog.csdn.net/sukangshen/article/details/81155410

版权

YII 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

显示图片案例

这里只需要指定format格式为image即可，format第二个参数可设定图片大小，可参考下面的代码

[
    "label" => "头像",
    "format" => [
        "image", 
        [
            "width"=>"84",
            "height"=>"84"
        ]
    ],
    "value" => function ($model) { 
        return $model->image; 
    }
],

处理时间

数据列的主要配置项是 yii\grid\DataColumn::format 属性。
它的值默认是使用 \yii\i18n\Formatter 应用组件。

[
 'label'=>'更新日期',
 'format' => ['date', 'php:Y-m-d'],
 'value' => 'updated_at'
],
//or
[
 //'attribute' => 'created_at',
 'label'=>'更新时间',
  'value'=>function($model){
        return  date('Y-m-d H:i:s',$model->created_at);   
  },
 'headerOptions' => ['width' => '170'],
],

数据列有链接

 [
   'attribute' => 'title',
   'value' => function ($model, $key, $index, $column) {
            return Html::a($model->title, 
                ['article/view', 'id' => $key]);
    },
   'format' => 'raw',
],

数据列显示枚举值(男/女）

[
   'attribute' => 'sex',  
   'value'=>function ($model,$key,$index,$column){
          return $model->sex==1?'男':'女';   
    }，
    
    //在搜索条件（过滤条件）中使用下拉框来搜索
    'filter' => ['1'=>'男','0'=>'女'],
    //or
    'filter' => Html::activeDropDownList($searchModel,
                'sex',['1'=>'男','0'=>'女'],
                ['prompt'=>'全部']
     )
],
[
    'label'=>'产品状态',  
    'attribute' => 'pro_name',  
    'value' => function ($model) {
        $state = [
            '0' => '未发货',
            '1' => '已发货',
            '9' => '退货，已处理',
        ];
     return $state[$model->pro_name];
    },
    'headerOptions' => ['width' => '120'] 
]

使用多选框

<?php
echo GridView::widget([
	// ......
    "options" => ["class" => "grid-view","style"=>"overflow:auto", "id" => "grid"],
	"columns" => [
		[
			"class" => "yii\grid\CheckboxColumn",
			"name" => "id",
		],
		'id',
        'name',
	],
]);

echo Html::a("批量删除", "javascript:void(0);", ["class" => "btn btn-success mybtn"]);

$this->registerJs('
    $(document).on('click', '.mybtn', function () {
    	//可以把选中的id通过ajax提交到后端，然后借助yii的deleteAll()语句进行删除或操作
		var keys = $("#grid").yiiGridView("getSelectedRows");
		console.log(keys);
    });
');
?>

自定义字段案例

啥时自定义？这里我们是指在表格里增加一列且数据库中不存在对应的列。假如我们新增一列订单消费金额money且该表不存在该字段

[
    "attribute" => "消费金额",
    "value" => function ($model) {
        // 这里可以根据该表的其他字段进行关联获取
    }
],

自定义行样式

有小伙伴说了，gii生成的这个gridview表格呀，行跟行的颜色不明显，看着难受，我滴乖乖，具体怎么难受咱们就不追究了。我们来看看怎么定义行样式

<?= GridView::widget([
    // ......
    "dataProvider" => $dataProvider,
    "rowOptions" => function($model, $key, $index, $grid) {
        return ["class" => $index % 2 ==0 ? "label-red" : "label-green"];
    },
    // ......
]); ?>

前面的操作我们都是依据列column的，这里因为是对行的控制，所以我们配置rowOptions要稍微注意一下。此外，自定义的label-red和label-green需要有对应的样式实现，这里我们看一下页面的实际效果