Использование clipboard.js с Yii2

Question

Я установил расширение \supplyhog\ClipboardJs\ClipboardJsWidget, которое вроде бы работает нормально.

, но я изо всех сил пытаюсь заставить его работать в gridview.

, так как код для расширения уже использует виджети сам gridview является виджетом, поэтому я думаю, что это создает конфликт.

Предлагаемый код вне gridview выглядит следующим образом:

//Button to copy text
<?= \supplyhog\ClipboardJs\ClipboardJsWidget::widget([
    'text' => "Hello World",
    // 'label' => 'Copy to clipboard',
    // 'htmlOptions' => ['class' => 'btn'],
    // 'tag' => 'button',
]) ?>

//Button to copy text from input id
<?= \supplyhog\ClipboardJs\ClipboardJsWidget::widget([
    'inputId' => "#input-url",
    // 'cut' => false, // Cut the text out of the input instead of copy?
    // 'label' => 'Copy to clipboard',
    // 'htmlOptions' => ['class' => 'btn'],
    // 'tag' => 'button',
]) ?>

Как я могу интегрировать это в Gridview?

пример -

это просто выглядит так - третья ячейка является результатом кода буфера обмена.

пример скрытия текста

с помощью @Omer, который я пытался изменитькод такой:

.mycopy{
 position:absolute;
right:-10px;
top:-10px;
}
.mycopy .btn{
padding:2px !important;
}




    [
             'attribute' => 'title',
             'format' => 'raw',
             'value' => function($model){
              $button=\supplyhog\ClipboardJs\ClipboardJsWidget::widget([
                  'text' => $model->title,
                  'label' =>'<i class="far fa-copy" aria-hidden="true"></i>',

            ]);
            return "<div style='position:relative'><div style='margin-right:10px;'>".$model->title."</div><div class='mycopy'>".$button."</div></div>";
        }
    ],

и результат выглядит так:

Answer 1

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

Если это правильнозатем вы можете сделать следующее, я создам пример кода, предполагая, что модель user используется в GridView, и при нажатии на кнопку Bio пользователя будет скопирован в буфер обмена.

<?=
GridView::widget([
    'dataProvider' => $dataProvider,
    'filterModel' => $searchModel,
    'columns' => [
        ['class' => 'yii\grid\SerialColumn'],
        'id',
        'username',
        'active',
        'password',
        'bio',
        [
            'class' => 'yii\grid\ActionColumn',
            'template' => '{view}{update}{delete}{copy}',
            'buttons' => [
                'copy' => function($url, $model, $key){
                    return \supplyhog\ClipboardJs\ClipboardJsWidget::widget([
                            'text' => $model->bio
                    ]);
                },
            ]
        ],
    ],
]);
?>

Примечание. Вы можете изменить $model->description на любое имя столбца, которое вы пытаетесь скопировать 'text' => $model->description.

И если вы планируете показывать его внутри DataColumn, а не ActionColumn Вы можете использовать следующий фрагмент кода, он покажет текст столбца и кнопку под ним, чтобы скопировать текст в буфер обмена.

[
    'attribute' => 'bio',
    'format' => 'raw',
    'value' => function($model){
        $button=\supplyhog\ClipboardJs\ClipboardJsWidget::widget([
                    'text' => $model->bio,
        ]);
        return $model->bio."<br/>".$button;
    }
],

Обновление

Для репликации того же самогоCSS, как указано на вашем изображении, вы должны сделать следующее

Добавить этот CSS поверх вашего представления

$css = <<< CSS
.clip-input-group{
    width:100%;
    float:left;
}
.input-group-button {
    width: 14%;
    vertical-align: middle;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 3px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    float: left;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    padding: 5px;
    text-align: center;
    cursor: pointer;
}
.input-group-button i{
    font-size:12px;
}
.clip-input{
   width: 85%;
    display: inline-block;
    float: left;
    border-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border: 1px solid #ccc;
    border-right-color: rgb(204, 204, 204);
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    padding: 5px;
    border-right-color: transparent;
}
CSS;
$this->registerCss($css);

Затем измените определение столбца на следующее, я использую шрифтотличный значок буфера обмена вместо изображения,

Примечание: я не эксперт по CSS, но мне удалось создать его, если кто-то может предложить лучшие классы, я открыт для предложений

[
    'attribute' => 'bio',
    'format' => 'raw',
    'value' => function ($model) {
            $button = \supplyhog\ClipboardJs\ClipboardJsWidget::widget([
                'text' => $model->bio,
                'label' => '<i class="fa fa-clipboard" aria-hidden="true"></i>',
                'htmlOptions' => ['class' => ''],
                'tag' => 'a',
            ]);
            $text = $model->bio;
            $html = <<< HTML
            <div class="clip-input-group">
                <input type="text" disabled value="{$text}" class="clip-input">
                <span class="input-group-button">
                    $button
                </span>
            </div>
HTML;

            return $html;
        },
],