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

Question

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

Я установил расширение
\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>";
}
],

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

1

clipboard.js javascript php yii2

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

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

Если это правильно, то вы можете сделать следующее, я создам пример кода, предполагая 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;
},
],

2