一.使用方式:
GridView::widget([
'layout' => "{items}\n{summary}\n{pager}",//默认是 "{summary}\n{items}\n{pager}",可供填写的值有summary(总结), items(内容),pager(分页), sorter(排序)【备注6】
'dataProvider' => $provider,//是一个dataProvider对象,包含多个model对象
'tableOptions' => [
'class' => 'table table-striped table-bordered',//这个属性有默认配置,注意自定义时需要添加
'style' => '',
],//table标签的属性配置
'options' => [
'class' => 'grid-view',//固有的默认值
'id' => 'xxxx',//自己指定id,默认是'w0',【备注1】
],
'formatter' => null/array/Formatter object,//可以为空,则使用Yii的formatter;array则必须包括class字段;也可以直接传一个Formatter对象。【备注2】
'filterRowOptions' => [
'class' => 'filters'
],//【备注3】
'showOnEmpty' => true,//【备注5】
'showHeader' => true,
'showFooter' => true,//【备注7】
'columns' => [
[
'value' => string/Closure, //model对象的属性或匿名函数,匿名函数的参数是单独的一个model对象
'label' => string,//每一列的表头
'contentOptions' => [
'class' => '',
'style' => '',
],//td标签的属性配置
'options' => [
'width' => '10px',
],//配置了这个属性,会在table中 生成<colgroup><col width="10px"></col></colgroup>,如果其他数据列没有配置,则有一<col></col>占位【备注8】
'visible' => true,//【备注4】
//...
],//可以是一个数组,也可以是一个字符串,字符串必须是model的字段
],
//...
]);
注:必须配置的键是:’dataProvider’,不配置’columns’则默认显示model中的所有字段;columns中每一条建议必须配置的键是’value’
二.原理前析
1.widget方法先通过Yii::createObject()创建一个GridView对象,传入参数的第一维数组,键作为属性,值作为值赋给GridView对象;
2.因为GridView继承自Component类,所创建过程中的构造方法会调用GridView的init()方法。
a.GridView的init方法会先调用BaseListView的init方法,给$options['id']赋值,默认是'w0',有多个则按顺序递增'w1','w2'....,你也可以自己指定(在使用方式的备注1处)
b.根据formatter属性,设置formatter,备注2处
c.设置$filterRowOptions['id']的值,默认是$options['id']值后面连接一个'-filter',即w0-filter。这个也可以自己指定:备注3处
d.调用initColumns方法,如果没有设置columns,则默认显示model的所有字段;根据columns中的每一arrary/value,创建DataColumn对象,并保存到GridView属性$columns数组中。根据每一个column的visible属性判断是否显示:备注4处
3.调用GridView的run()方法
a.注册GridViewAsset,绑定yiiGridView方法
b.调用父类BaseListView的run()方法:
属性showOnEmpty为false(备注5处设置)或dataProvider为空,则渲染空模板
有数据则调用renderSection()方法按layout属性指定的顺序(顺序特别重要,备注6处)分别渲染,{summary}使用renderSummary()方法渲染,{items}使用renderItems()方法渲染,{pager}使用renderPager()方法渲染,{sorter}使用renderSorter方法渲染
4.在4类渲染中,一般我们主要针对表格的样式做一些改动,所以我们重点关注renderItems()方法
这个方法会渲染一个表格,表格的样式通过$tableOptions配置
表格分为Caption(b标题),ColumnGroup(列样式),Header(表头),Body(内容),Footer(表尾);分别调用renderCaption() caption指定显示内容,captionOptions指定样式;
renderColumnGroup() columns中的每一条中的options指定:备注8处;
renderTableHeader() headerRowOptions指定行样式,columns中的headerOptions指定列样式;
renderTableBody() rowOptions指定行样式,columns中的contentOptions指定列样式;
renderTableFooter() footerRowOptions指定行样式,columns中的footerOptions指定列样式。
5.Header和Footer可以分别通过showHeader,showFooter分别控制是否显示:备注7处