Yii2、DynaGrid、GridView：设置列宽

Question

我尝试在 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;">
    ...

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

Answer 1

我尝试了以下方法（参见 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,
],

Answer 2

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

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

很简单:-)

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

Yii2、DynaGrid、GridView：设置列宽

Yii2, DynaGrid, GridView: Setting the column width

gridview

yii2

yii2-extension