Как обрезать текст в определенном столбце Yii2 GridView и показывать его при наведении?

Я отображаю таблицу с помощью виджета GridView:

<?= GridView::widget([
    'dataProvider' => $dataProvider,
    'filterModel' => $searchModel,   
    'columns' => [
        'subject',
        // ...
    ],
]) ?>

Мне нужно обрезать текст, отображаемый в столбце «тема», и полностью отображать его при наведении курсора, сохраняя при этом возможность поиска строки фильтра.

Мне удалось обрезать текст с помощью StringHelper::TruncateWords(), но я не смог понять строку фильтра и часть наведения:

[
            'attribute' => 'subject',
            'value' => function($model) {
                $ret = \yii\helpers\StringHelper::truncateWords($model->subject, 5, '...', false);
                return $ret;
            }
],

Возможно, есть способ сделать это с помощью чистого Bootstrap без использования StringHelper, но я не смог заставить его работать...


gridview twitter-bootstrap-3 hover yii2 truncate
person Adam Vtípil    schedule 26.04.2017    source источник

Ответы (1)


arrow_upward
8
arrow_downward

На самом деле есть гораздо более простое решение. Для этого можно использовать чистый CSS.

.truncate {
   max-width: 150px !important;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
}

.truncate:hover{
   overflow: visible;
   white-space: normal;
   width: auto;
}

И просто добавьте класс:

[
  'attribute' => 'subject',
  'contentOptions' => ['class' => 'truncate'],
],

Отрегулируйте максимальную ширину по своему желанию, добавьте другие эффекты через css3, и все готово.

person Nimer    schedule 26.04.2017