gridview - Yii2、DynaGrid、GridView：设置列宽

Question

我尝试在 DynaGrid 中设置列​​宽：

echo DynaGrid::widget([
    'columns' => [
         [
            'attribute' => 'shortcut',
            'width' => '75px',
        ],
        ...
    ],
    ...
]);

看： http ://demos.krajee.com/dynagrid

这没用。在结果表中是正确设置的第 th 个元素：

<th style="width:75px;" data-col-seq="0">...</th>

但是在 colgroup 中是同一列的另一个值：

<colgroup>
    <col style="width: 32px;">
    ...

如何更改 colgroup 中的宽度值？

Answer 1

我尝试了以下方法（请参阅Ulises Trujillos Aguirre 的建议）：

!重要修饰符

'columns' => [
    [
        'attribute' => 'shortcut',
        'width' => '75px !important',
    ],   

CSS

'columns' => [
    [
        'attribute' => 'shortcut',
        'width' => '75px !important',
        'options' => [
            'class' => 'col-width-75',
        ],
    ],   

在 assets/dynagrid/index.css 中：

.col-width-75 {
    width: 75px !important;
}

jQuery

在 assets/dynagrid/index.js 中：

$(document).ready(function () {
    $('.col-width-75').css('width:75px !important');
    ...
});

我收到以下输出：

<th style="width:75px !important;" data-col-seq="0">...</th>
...
<col class="col-width-75" style="width: 32px;">

在开发者工具中：

对于th：

element.style { 宽度: 150px !important; }

对于col：

element.style { 宽度：43px; }

.col-width-150 { 宽度：150px ！重要；}

它看起来不错，但在浏览器中有 32px 的列宽。所以看起来，唯一可行的解​​决方案是不正确的解决方案，我想避免：

[
    'attribute' => 'shortcut',
    'label' => 'S       ',
    'encodeLabel' => false,
],

Answer 2

最后我找到了一个优雅的解决方案，它有效。DynaGrid 表头部的搜索字段的最小宽度在 assets/dynagrid/index.css 中设置：

.form-control {
    min-width: 55px;
}

很简单:-)

它解决了用户报告的问题。如果列太窄，他们看不到搜索字段中的输入。