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）