yii2之GridView小部件

　　GridView小部件用于展示多条数据的列表。GridView小部件的使用需要数据提供器即yii\data\ActiveDataProvider的实例作为参数，所以

第一步就是要在控制器方法中创建这个实例然后传给视图，下面以我做的一个demo为例子进行讲解。

控制器LifeController代码：

//生活记录列表
public function actionIndex() {
	$searchModel = new Life(['scenario' => Life::SCENARIO_SEARCH]);
	$dataProvider = $searchModel->search(Yii::$app->request->queryParams);

	return $this->render('index', [
		'searchModel' => $searchModel,
		'dataProvider' => $dataProvider
	]);
}

AR模型Life代码：

//根据搜索条件搜索生活记录
public function search($params) {
    $query = self::find();
    $dataProvider = new ActiveDataProvider([
        'query' => $query,
        'pagination' => [
            'pagesize' => 5
        ],
    /*    'sort' => [
            'defaultOrder' => [//设置默认排序字段和排序方式
                'id' => SORT_DESC
            ],
            'attributes' => [//设置可以排序的字段
                'id',
                'title',
                'author_name' => [//将某个字段的排序映射到关联表字段排序
                    'asc' => ['Adminuser.nickname' => SORT_ASC],
                    'desc' => ['Adminuser.nickname' => SORT_DESC]
                ]
            ]
        ]*/
    ]);
    $this->load($params);
    if(!$this->validate()) return $dataProvider;

    $query->andFilterWhere(['uid' => $this->uid]);
    $query->andFilterWhere(['like', 'con_morning', $this->con_morning]);
    $query->andFilterWhere(['like', 'con_afternoon', $this->con_afternoon]);
    $query->andFilterWhere(['like', 'con_night', $this->con_night]);
    $query->andFilterWhere(['like', 'note', $this->note]);

    /*
     * 联表搜索
    $query->join('inner join', 'Adminuser', 'post.author_id = Adminuser.id');
    $query->andFilterWhere(['like', 'Adminuser.nickname', $this->author_name]);
     */

    return $dataProvider;
}

接下来就是在视图中使用GridView小部件进行数据的展示了。由于GridView小部件的配置属性比较多，使用起来也比较复杂，所以这里

先给出一个简单配置的GridView小部件展示，后面再给出一个比较详细的配置，还会分别附上效果图，大家可以对比学习，最后再整理总结

一下GridView的配置属性的使用。

首先看简单版本的GridView：

代码：

<?= GridView::widget([
	'dataProvider' => $dataProvider,//数据提供器
	'filterModel' => $searchModel,//搜索功能
	'columns' => [//列数据
		['class' => 'yii\grid\SerialColumn'],//显示行号

		/* 对应AR类属性名称 */
		'day',
		'con_morning',
		'con_afternoon',
		'con_night',
		'note',

		['class' => 'yii\grid\ActionColumn'],//显示查看、编辑、删除等按钮（默认）
	]
]); ?>

效果图：

说明：

简单版本的GridView只是配置很极少属性，很多属性使用了默认配置，容易理解。

然后看详细版本的GridView：

代码：

<?= GridView::widget([
	'dataProvider' => $dataProvider,//数据提供器
	'filterModel' => $searchModel,//搜索模型
	'columns' => [//数据列
		[
			'class' => 'yii\grid\CheckboxColumn',//显示复选框（每个复选框的值为当前记录的数据库主键值，名称为selection[]）
			'footerOptions' => ['colspan' => 8],//该列底部占8格
			'footer' => '<a class="btn btn-danger" onclick=delall("'.Yii::$app->urlManager->createUrl(['life/delall']).'")>删除所有选中数据</a>'//设置该列底部内容
		],
		[
			'attribute' => 'day',
			'filter' => true,//是否显示搜索框
			'label' => '日期',//设置属性标签
			//'format' => ['date', 'php:Y.m.d'],//设置日期格式
			//'options' => ['width' => '150'],//设置宽度

			//数据列有链接：
			'format' => 'raw',//注意：如果想在GridView小部件单元格中展示html，一定要设置format参数为raw，否则html代码会原样输出在页面上！
			'value' => function($model, $key, $index, $column) {//设置该列显示内容
				return Html::a(date('Y.m.d', $model->day),
					['life/view', 'id' => $key], ['title' => '查看详情']);
			},
			'footerOptions' => ['class' => 'hide'],//隐藏最后一列
			/* *
			 * 隐藏最后一列也可以这样写
			'footerOptions' => ['style' => 'display:none'],
			 */
		],
		[
			'attribute' => 'mood',
			'value' => function($model) {
				$moods = ['没什么好说的', '很糟糕', '略沉重', '有点郁闷', '还好吧', '小窃喜', '欢愉', '嗨森'];
				return $moods[$model->mood];
			},
			'filter' => ['没什么好说的', '很糟糕', '略沉重', '有点郁闷', '还好吧', '小窃喜', '欢愉', '嗨森'],//设置下拉框搜索
			/* *
			 * 下拉框搜索也可以这样写
			'filter' => Html::activeDropDownList($searchModel,
				'mood', ['没什么好说的', '很糟糕', '略沉重', '有点郁闷', '还好吧', '小窃喜', '欢愉', '嗨森'],
				['prompt' => '全部'])
			 */
			'footerOptions' => ['class' => 'hide']
		],
		[
			'attribute' => 'con_morning',
			'footerOptions' => ['class' => 'hide']
		],
		[
			'attribute' => 'con_afternoon',
			'footerOptions' => ['class' => 'hide']
		],
		[
			'attribute' => 'con_night',
			'footerOptions' => ['class' => 'hide']
		],
		[
			'attribute' => 'note',
			'enableSorting' => false,//设置是否开启排序功能
			'visible' => true,//设置该列内容是否可见
			'footerOptions' => ['class' => 'hide']
		],

		//['class' => 'yii\grid\ActionColumn'],//显示查看、编辑、删除等按钮（默认）
		[//自定义设置操作按钮
			'class' => 'yii\grid\ActionColumn',
			'header' => '操作',//设置当前列标题
			'template' => '{view} {update} {delete}',//展示按钮
			'headerOptions' => ['width' => 100],//该列宽度设置
			'buttons' => [
				'delete' => function($url, $model, $key) {//自定义删除按钮
					return Html::a('<i class="fa fa-ban"></i> 删除',
						['delete', 'id' => $key],//设置删除按钮请求方法和参数，这里设置请求方法为del，默认为delete，$key是当前记录的数据表主键值
						[
							'class' => 'btn btn-danger btn-xs',
							'title' => '删除',
							'data-method' => 'post',
							'data' => ['confirm' => '您确定要删除'.date('Y.m.d', $model->day).'的生活记录吗？']//设置删除确认信息
						]);
				}
			],
			'footerOptions' => ['class' => 'hide']
		]
	],
	'layout' => "{items}\n{summary}\n{pager}",//整体布局与样式设置
	'tableOptions' => ['class' => 'table table-striped table-bordered'],//设置表格样式
	'showHeader' => true,//是否显示表格头部
	'showFooter' => true,//是否显示表格尾部
	'rowOptions' => function($model) {//给每一行设置id
		return ['id' => 'tr_'.$model->id];
	},
	'emptyText' => '暂时没有任何生活记录！',//没有数据时显示的信息
	'emptyTextOptions' => ['style' => 'color:red;font-weight:bold'],//没有数据时显示信息的样式设置
	'showOnEmpty' => true,//没有数据时是否显示表格
	'pager' => [
		//'options' => ['class' => 'hidden']//关闭分页（默认开启）
		/* 默认不显示的按钮设置 */
		'firstPageLabel' => '首页',
		'prevPageLabel' => '上一页',
		'nextPageLabel' => '下一页',
		'lastPageLabel' => '尾页'
	]
]); ?>
<style>
.tr_selected{background-color:pink}
</style>
<script>
//点击复选框改变当前行背景色
$('input[name="selection[]"]').click(function() {
	var tr = $('#tr_'+this.value);
	this.checked ? tr.addClass('tr_selected') : tr.removeClass('tr_selected');
});
//删除选中的所有记录
function delall(url) {
	var ckbox = $('input[name="selection[]"]:checked'), ids = [];
	$.each(ckbox, function(i, o) {
		ids.push(o.value);
	});
	if(ids.length <= 0) return alert('请至少选择一条数据！');

	var okay = confirm('此操作将删除所有选中的数据，是否确认操作？');
	if(!okay) return;

	ids = ids.join(',');
	$.post(url, {'ids': ids}, function(ret) {
		if(ret.ok) {
			alert('恭喜你，操作成功！');
			window.location.reload();
		} else {
			alert(ret.msg ? ret.msg : '对不起，操作失败！');
		}
	}, 'json');
}
</script>

控制器LifeController中代码：

//删除多条生活记录
public function actionDelall() {
	try {
		$ids = Yii::$app->request->post('ids');
		$ret = Life::deleteAll('id in ('.$ids.')');
		echo Json::encode(['ok' => $ret ? 1 : 0]);
	} catch (Exception $ex) {
		echo Json::encode(['ok' => 0, 'msg' => $ex->getMessage()]);
	}
}

效果图如下：

说明：

详细版本GridView对很多属性进行了自定义设置，主要有：改变小部件布局、格式化显示数据、使用下拉框搜索、数据列设置链接、

展示复选框并实现点击时改变当前列背景颜色，以及批量删除记录功能等等。

GridView配置参数说明：

'dataProvider' => $dataProvider,//数据提供器，即yii\data\ActiveDataProvider类实例
'filterModel' => $searchModel,//搜索模型，即AR类实例（不配置则搜索行消失）
'columns' => [//数据列
         [
                  'class' => 'yii\grid\DataColumn’,
                                  /* *
                                   * DataColumn：显示数据，默认值。
                                   * ActionColumn：显示操作按钮等
                                   * CheckboxColumn：显示操复选框（复选框值为数据表主键值）
                                   * RadioButtonColumn：显示单选按钮（单选框值为数据表主键值）
                                   * SerialColumn：显示行号
                                   * */
                  'attribute' => 'day',//AR模型属性名称，即要显示的数据表字段名称
                  ‘label’=> ‘日期’,//设置属性标签
                   'header' => '日期',//设置该列标题（和label类似，区别是使用header设置之后该列无法使用排序功能）
                  'format' => ['date', 'php:Y.m.d'],//设置日期格式
                  'enableSorting' => false,//是否开启排序功能，默认为true
                  'visible' => true,//设置该列内容是否可见，默认为true
                  'filter' => true,//是否显示搜索框，默认为true

                  /* 设置下拉框搜索 */
                  'filter' => [],//键值对数组
                  //也可以这样写：
                  'filter' => Html::activeDropDownList($searchModel,
                                    'mood', [],//键值对数组
                                    ['prompt' => '全部']),

                  /* 在数据列设置链接 */
                  'format' => 'raw',
                  'value' => function($model, $key, $index, $column) {//设置当前列显示内容
                                    return Html::a(date('Y.m.d', $model->day),
                                                      ['life/view', 'id' => $key], ['title' => '查看详情']);
                  },

                  ‘headerOptions’ => [],//设置当前列头部样式
                  'footerOptions' => [],//设置当前列底部样式
                  'footer' => ''//设置当前列底部内容
                  'options' => ['width' => '150'],//设置当前列样式，如宽度等
　　　　　　　　　　 'contentOptions' => ['class' => 'bg-danger'],//设置当前列内容样式，如背景色等
　　　　　　　　　　　　
                   /* 自定义设置操作按钮 */
                  'class' => 'yii\grid\ActionColumn',
                  'template' => '{view} {update} {delete}',//展示按钮（默认{view} {update} {delete}）
                  'buttons' => [//没有在这里自定义设置的按钮使用默认设置
                                  'delete' => function($url, $model, $key) {//自定义删除按钮
                                                   return Html::a('<i class="fa fa-ban"></i> 删除',
                                                                    ['delete', 'id' => $key],//设置删除按钮请求方法和参数，这里设置请求方法为del，默认为delete，$key是当前记录的数据表主键值
                                                                    [
                                                                                     'class' => 'btn btn-danger btn-xs',
                                                                                     'title' => '删除',
                                                                                     'data-method' => 'post',
                                                                                     'data' => ['confirm' => '您确定要删除'.date('Y.m.d', $model->day).'的生活记录吗？']//设置删除确认信息
                                                                    ]);
                                                   }
                          ]
],
'layout' => "{items}\n{summary}\n{pager}",//整体布局与样式设置，由上而下分别为：表格、简介、分页（默认为：{summary}\n{items}\n{pager}）
'tableOptions' => ['class' => 'table table-striped table-bordered'],//设置表格样式（默认设置）
'showHeader' => true,//是否显示表格头部（默认为true，为false则表格标题行和搜索行都消失）
'showFooter' => true,//是否显示表格底部部（默认为false，为true时底部多一空行）
'rowOptions' => function($model) {//每一行自定义样式（这里设置每一行id）
          return ['id' => 'tr_'.$model->id];
},
'emptyText' => '暂时没有任何生活记录！',//设置没有数据时显示的信息
'emptyTextOptions' => ['style' => 'color:red;font-weight:bold'],//没有数据时显示信息的样式设置
'showOnEmpty' => true,//没有数据时是否显示表格（默认为true）
'pager' => [
                  //'options' => ['class' => 'hidden']//关闭分页（默认开启）
                  /* 分页按钮设置 */
                  'firstPageLabel' => '首页',
                  'prevPageLabel' => '上一页',
                  'nextPageLabel' => '下一页',
                  'lastPageLabel' => '尾页'
]

　     另外，只有searchModel拥有的属性而且在searchModel的rules()中申明了验证规则的属性才能支持搜索，若是新增属性需要支持搜索功能，

需要重写attributes()方法并在rules()中申明该属性的验证规则，重写attributes()方法示例如下：

public function attributes() {
        return array_merge(parent::attributes(), ['author_name']);
}

（这里新增属性名为author_name）