Yii2.0的GridView使用和原理浅析

一.使用方式:

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中 生成,如果其他数据列没有配置,则有一占位【备注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

你可能感兴趣的:(PHP,Yii,web前端)