Yii2、DynaGrid、GridView:设置列宽

Yii2, DynaGrid, GridView: Setting the column width

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

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

参见:http://demos.krajee.com/dynagrid

它不起作用。结果 table 是正确设置的第一个元素:

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

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

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

如何更改列组中的宽度值?

我尝试了以下方法(参见 suggestions of 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');
    ...
});

我收到以下[​​=45=]输出:

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

在开发者工具中:

:

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

for col:

element.style{ 宽度:43px; }

.col-width-150 { 宽度:150px !重要; }

看起来不错,但在浏览器中栏宽为32px。所以看起来,唯一可行的解​​决方案是不正确的解决方案,我想避免这种情况:

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

最后,我找到了一个有效的解决方案。 DynaGrid table 头部的 搜索字段的最小宽度 在 assets/dynagrid/index 中设置。css:

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

很简单:-)

解决了用户反馈的问题。如果列太窄,他们将看不到搜索字段中的输入。