如何更改 YII 中的 GridView 列大小？

Posted 2023-03-06

【中文标题】如何更改 YII 中的 GridView 列大小？

【英文标题】：How to change GridView column size in YII?

【发布时间】：2014-01-14 23:55:40

【问题描述】：

我正在尝试更改我的 GridView 列宽。这是我的代码：

<?php $this->widget('zii.widgets.grid.CGridView', array(
    'id' => 'prefixs-grid',
    'dataProvider' => $model->search(),
    'filter' => $model,
    'columns' => array(
        array(
            'name' => 'id',
            'header' => 'No.',
            'htmlOptions' => array('class' => 'center'),
        ),
        array(
            'name' => 'pfx',
            'htmlOptions' => array('width' => 30),
        ),
        array(
            'class' => 'CButtonColumn',
        ),
    ),
)); ?>

当我运行“pfx”时，列宽必须更改为 30，但宽度相同。我怎样才能改变列的宽度？有什么想法吗？

【问题讨论】：

php 'htmlOptions' => array('class' => 'width30'), css .width30 width: 30px;

***.com/questions/2902723/…的可能重复

我使用了类但没有帮助...

我认为过滤输入不会改变大小。当我删除过滤器时它可以工作......但我必须使用过滤器

【参考方案1】：

如果您不想使用单独的 CSS 定义，您应该这样做：

'htmlOptions' => array('style' => 'width: 30px;'),
'filterHtmlOptions' => array('style' => 'width: 30px;'),

【讨论】：

我也用过这个。但过滤器输入没有改变。

htmlOptions 不会应用于 GridView 的标题和过滤行，因此如果您试图使列比其中任何一个的内容更窄，这将不起作用。

CDataColumn 也有一个 filterHtmlOptions 属性。我将其添加到答案中。

【参考方案2】：

我注意到标签中的 cgridview 有一个 id 属性 id="table-name_c0" id="table-name_c1" 等。你可以挂钩到这个和 .filters 类的过滤器宽度。例如

#table-name table-name_c0 
    width: 30px;


#table-name .filters:nth(0) 
    width:30px;
 

其中 c0 和 :nth(0) 是相同的数字。 它有点老套，但你想要实现的也有点老套，恕我直言

【参考方案3】：

有多种方法可以解决此问题。

您可以扩大单元格的内容（单个行的单元格）：

$columns[] = array(
    'header'=>'Name',
    'value'=>'$data["name"]',
    'htmlOptions'=>array('style'=>'width: 150px')
);

有时您可能想要加宽列标题而不是单个行的单元格：

$columns[] = array(
    'header'=>'Name',
    'value'=>'$data["name"]',
    'headerHtmlOptions'=>array('style'=>'width: 150px')
);

加宽标题是首选选项，但即使您这样做，有时也无法按预期工作。

如果是这种情况，您可以按照我个人喜欢的方式，扩大标题单元格的内容。扩大范围也将被其下方的行继承。

$columns[] = array(
    'header'=>'<div style="width:150px;">Name</div>',
    'value'=>'$data["name"]',
);

【参考方案4】：

简单添加

'contentOptions' =>['style' => 'width:30px'],

--例如：

'columns' => [
        [
            'attribute' => 'product.name',
            'contentOptions' =>['style' => 'width:30px'],
        ],

这应该可以解决问题！

【参考方案5】：

'columns' => [      
    [
         'headerOptions' => ['width' => '150'],
         'attribute' => 'name',
         'format' => 'raw',
          'value' => 'name'
    ],
]

【讨论】：

请避免仅使用代码回答！最好还简要解释一下代码的作用或工作原理。