zoukankan      html  css  js  c++  java
  • Yii2.0 Gridview为某列增加属性

    我们知道GridView组件非常方便,会自动生成数据表格。table tr td神马的全自动生成的。但是如果想定制化稍微有点难度。

    比如想在某列td上应用样式。

    老写法是这样的

     <?= GridView::widget([
            'dataProvider' => $dataProvider,
            'layout' => "{items}
    {pager}
    {summary}",
            'summary' => '<p class="summary">当前显示第{begin} - {end}条,共{totalCount}条。</p>',
            'columns' => [
                ['class' => 'yiigridSerialColumn'],
                'name',
                [
                    // 看这里
                    'attribute' => 'propertyValuesString',
                    'format' => 'html',
                    'value' =>  function ($model, $key, $index, $column){
                        return '<div class="limit-width">'. $model->propertyValuesString .'</div>';
                    }
                ],    
                ......

    这样返回的html,td标签里面会套一层<div class="limit-width"></div>。

    如果才能将class应用在td上呢

    查了源码之后,可以这样:

             <?= GridView::widget([
          .......
             'columns' => [
                ['class' => 'yiigridSerialColumn'],
                'name',
    
                // 新增的代码
                [
                    'class' => 'yiigridColumn',
                    'contentOptions' => [
                        'class' => 'limit-width',
                    ],
              // 或者
                    'contentOptions' => ['style' => 'white-space: pre;'],
                    'header' => '类目下的所有种类',
                    'content' => function ($model, $key, $index, $column){
                        return $model->propertyValuesString;
                    }
                ],

    也就是说。该列我需要用到 yii/grid/Column类。该类有个contentOptions属性。接收匿名函数或数组。数组就是属性名和属性值得键值对。渲染时该列包含一个th和多个td。th内容从header中取,td就是content。

  • 相关阅读:
    convirt2.5在虚拟机上安装笔记
    myeclipse 自动提示JS
    Hadoop学习之HBase基础知识、操作和原理
    Hadoop学习之HBase的集群环境搭建
    学习面向对象之异常之三
    java学习面向对象之异常之二
    java学习面向对象之异常之一
    java学习面向对象之匿名内部类
    java学习面向对象之内部类
    java学习面向对象之多态
  • 原文地址:https://www.cnblogs.com/mafeifan/p/4345087.html
Copyright © 2011-2022 走看看