Yii2利器GridView秘籍 / GridView之DataColumn列

阿北哥ya 181次阅读

我们又见面啦,前天更新了SerialColumn列的使用方法,本篇给大货说说DataColumn,GridView中最重要的一列,为你呈现各式各样的数据。

上两篇链接

从源码来说DataColumn同样继承于Column类,因此比如Column的header等属性都可以使用,此外它由自己的使用场景。

因为DataColumn为默认类烈性,因此我们定义一个列的时候可以不指定其class属性。

label & encodeLabel

label属性作用于每一列的头部,并且当我们指定某列可以排序的时候,label将作为排序的a链接使用,当然你可以不设置label,那么它会根据attribute指定的属性值从AR对象中的getAttributeLabel方法中获取,画个图你就明白了。

要注意:DataColumn在某个场景下会使用yii\helpers\Inflector::camel2words方法,就是当我们不指定label时,但是程序发现$dataProvider并非结果集或Array集合,此刻label值将是

yii\helpers\Inflector::camel2words($attribute)

在label这里最后我们还要了解下encodeLabel属性,该属性默认为true,代表对label内容进行html编码,也就是说你如果在label内写了html代码也不会生效,当然你课可以通过设置false使其html生效。

<?= GridView::widget([
    'dataProvider' => $dataProvider,
    'columns' => [
        [
            'label' => '<b style="color:red">hello</b>',
            'encodeLabel' => true // or false
        ]
    ]
]);?>

效果图如下

attribute & value

前面我们说了attribute在label取值的时候起到一定作用,它在内容显示时同样也参与了作用,当然我们看到一列的每个内容单元格并非attribute决定,这是value属性的活。

value决定着单元格的内容,形态很多,不写&写、字符串、匿名函数等等,我们来画了流程图。

是的,上图分析了单元格内容显示的逻辑,下面我用文字再做一次阐述。

  1. 判断DataColumn是否设置了value值。
  2. 如果未设置则判断是否设置了attribute,如果设置了则以attribute为key从model中拿数据并返回,否则返回null。
  3. 如果设置了null,则分析value的类型
  4. 如果value的类型为字符串,则以value为key从model中拿数据并返回。
  5. 如果value未匿名函数,则为其传递参数并且将函数返回作为单元格内容。

因此我们通常看到以下代码

<?= GridView::widget([
    'dataProvider' => $dataProvider,
    'columns' => [
        [
            'label' => 'hello',
            'value' => 'username'
        ]
    ]
]);?>

<?= GridView::widget([
    'dataProvider' => $dataProvider,
    'columns' => [
        [
            'label' => 'hello',
            'attribute' => 'username'
        ]
    ]
]);?>  

<?= GridView::widget([
    'dataProvider' => $dataProvider,
    'columns' => [
        [
            'label' => 'hello',
            'value' => function($model){
                return $model->age;
            }
        ]
    ]
]);?>     

format

定义单元格内容的格式,当然如果你为value传递的是匿名函数,那么你想输出什么格式均可以,format更多作用于attribute或value为字符串的情形。

而在内部程序使用 \yii\i18n\Formatter 类库来支持format功能,比如下面的代码


<?= GridView::widget([
    'dataProvider' => $dataProvider,
    'columns' => [
        [
            'format' => 'datetime',
            'attribute' => 'created_at'
        ]
    ]
]);?>

其运行原理也十分简单,首先通过函数getDataCellValue获取单元格内容,然后使用format属性设置的值来调用具体的Formatter方法来格式化单元格内容。

对于format,我们最常用的格式有

当然Formatter支持很多,具体可以查看Formatter所有asXXX方法。

enableSorting & sortLinkOptions

上面我们说了当设置attribute时,会触发label的排序功能,在html上的结果如下图

也就是说label外多了一个a标签作为排序的触发,而sort代表着需要排序的字段,根据正负号来决定是降序还是升序。

通过设置 enableSorting = false可以取消排序,当然取消后a标签也就没了。

接下来还有一个问题,通过headerOptions可以控制列头部(th)的属性,那么我们如何控制排序标签a的属性那,比如换个颜色啥的,这就要用到 sortLinkOptions,用法仍然是配置数据,比如下面的代码

<?= GridView::widget([
    'dataProvider' => $dataProvider,
    'columns' => [
        [
            'label' => 'abc',
            'sortLinkOptions'=>['style'=>'color:green;'],
            'attribute' => 'created_at'
        ]
    ]
]);?>

此刻label=abc可以排序,且颜色是绿色。

filter & filterInputOptions

和词义一样,过滤!不过本篇我们不打算讲解,从大方面说filter属于整个GridView的功能,后续单独讲讲filter的事情。

此文编号为419 上次更新于2个月前 / Yii 频道
相关文章
留言
小提醒 欢迎大家留言并且我会拿出时间去看,当然我会删除那些被视为垃圾或广告的留言。
暂时没有回复
首页 登录 / 注册