如何将css应用于yii2中gridview列的特定列答案

【问题标题】：how to apply css to particular column of gridview columns in yii2如何将css应用于yii2中gridview列的特定列
【发布时间】：2017-10-28 09:47:55
【问题描述】：

我是yii2的新手..如何将css应用到yii2 gridview的列、列标题？？

<?php 

    $gridColumns = [
                     ['class' => 'yii\grid\SerialColumn'],
                     ['class' => 'yii\grid\CheckboxColumn'],  

                    'name',
                    'company_mail', //change the color of heading
                    'no_employees',
                    'email:email', 
                    .
                    .
                    .];
            echo GridView::widget([
            'dataProvider' => $dataProvider,
            'filterModel' => $searchModel,
            'columns' => $gridColumns,
    ]); 
    ?>

【问题讨论】：

标签： gridview yii2

【解决方案1】：

您可以使用这种方式设置特定的列样式/css。

$columns = [
   'onenormalcolumn',
   'anothercolumn',
   [
       'format'=>"ntext", // or other formatter
       'attribute' => 'theattributeofmodel',
       'contentOptions' => ['style' => 'width:50px'], // For TD
       'headerOptions' => ['class' => 'ur-class'] // For TH

   ]
]

【讨论】：

【解决方案2】：

您必须将列设置为详细模式：

<?php 
$columns = [
   'onenormalcolumn',
   'anothercolumn',
   [
       'format'=>"ntext", // or other formatter
       'attribute' => 'theattributeofmodel',
       'options'=>[ 'style'=>'your rules here' ]
   ]
]
?>

见Yii2 Gridview column options

【讨论】：

我不想直接使用..想给id或class...然后从css应用样式..你能帮忙吗？？.....我也试过这样...... stackoverflow.com/questions/39241292/….... 但它适用于表格的内容而不是标题
将示例中的 'style' 替换为 'class' 并将您的类名设置为值。
'options' => [ 'class' => 'YourCustomTableClass', ], 2) 添加新的样式规则（在 css 文件中）： .YourCustomTableClass { color: #FF0000; }................它不会改变 HEADING 列的颜色 .. 只会改变表格内容/ROWS 的颜色

【解决方案3】：

如果您想更改列标题 css 属性，您应该使用 headerOptions 列属性，例如：

'columns' => [
    ['class' => 'yii\grid\SerialColumn'],

    .......
    'anothercolumn',
       [
        'format'=>"ntext", // or other formatter
        'attribute' => 'theattributeofmodel',
        'headerOptions'=>[ 'style'=>'background-color:#ccf8fe' ]
       ], 

],

【讨论】：