yii2之GridView小部件
阿新 • • 發佈：2017-08-08
down find() addclass spl 簡單 ide like 多條 end
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//設置每頁顯示記錄數量
]
]);
$this->load($params);
if(!$this->validate()) return $dataProvider;
$query->andFilterWhere([‘uid‘ => $this->uid]);
$query->andFilterWhere([‘mood‘ => $this->mood]);
$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]);
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‘,
‘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‘],//設置當前列樣式，如寬度等
/* 自定義設置操作按鈕 */
‘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‘ => ‘尾頁‘
]
yii2之GridView小部件