YII 2 프레임 워크 : 도움말. Gridview의 첫 번째 페이지에서만 작동합니다.

Question

마우스를 올려 놓을 때 툴팁을 표시하도록 Jquery를 만들었습니다. 그것은 모든 페이지에서 잘 작동합니다.

또한 ImageView가 내 gridview에 있습니다. 나는 마우스가 그들 에 놓을 그러나 문제는 그것은 단지 내가 JS 스크립트에서 선택기를 사용하는 제안 몇 가지 기사를 읽어

첫 페이지에서 작동 될 때 그 이미지를 확대하기 위해 jQuery를했다하지만 난 어떤 생각을 가지고 있지 않습니다 그것을 구현하는 방법.

도와주세요.

정말 고마워요. 모두들 귀찮게해서 죄송합니다. 여기

내보기 코드

<?php 
 
\t \yii\web\JqueryAsset::register($this); 
 
\t \yii\bootstrap\BootstrapPluginAsset::register($this); 
 
\t $tooltipjs=<<< 'SCRIPT' 
 
\t $('body').tooltip({selector: '[data-toggle="tooltip"]'}); 
 
SCRIPT; 
 
\t $this->registerJs($tooltipjs); 
 

 
\t $jss = <<< 'SCRIPT' 
 
\t $(".enlargephoto").hover(function(){ 
 
\t \t $(".photobox").remove(); 
 
\t \t var srcval = $(this).attr("src"); 
 
\t \t var names = $(this).attr("namas"); 
 
\t \t $("<div class=\'photobox\' ></div>") 
 
\t \t .html("<p class=\'names\'>"+names+"</p><img src="+srcval+"></img>") 
 
\t \t .appendTo("#usergrids").hide().fadeIn("fast"); 
 
\t },function(){ 
 
\t \t $(".photobox").remove(); 
 
\t }); 
 
\t $(".enlargephoto").mousemove(function(e){ 
 
\t \t var xx = e.pageX - 20; 
 
\t \t var tt = e.pageY - 120; 
 
\t \t $(".photobox").css({top:tt, left:xx}); 
 
\t }); \t 
 
SCRIPT; 
 
$this->registerJs($jss); 
 

 
\t $css=<<< 'SCRIPT' 
 
\t \t .photobox 
 
\t \t { 
 
\t \t \t margin-left:200px; 
 
\t \t \t visibility:visible; 
 
\t \t \t opacity:1; 
 
\t \t \t -moz-opacity:1; 
 
\t \t \t position: absolute ; 
 
\t \t \t padding:10px; 
 
\t \t \t border:2px solid Silver; 
 
\t \t \t background:-moz-linear-gradient(30deg,LightPink,PapayaWhip,NavajoWhite,AliceBlue,AntiqueWhite,Wheat,Khaki,Linen,Ivory,BlanchedAlmond); 
 
\t \t \t background:-webkit-linear-gradient(30deg,LightPink,PapayaWhip,NavajoWhite,AliceBlue,AntiqueWhite,Wheat,Khaki,Linen,Ivory,BlanchedAlmond); 
 
\t \t \t background:-o-linear-gradient(30deg,LightPink,PapayaWhip,NavajoWhite,AliceBlue,AntiqueWhite,Wheat,Khaki,Linen,Ivory,BlanchedAlmond); 
 
\t \t \t box-shadow:2px 4px 75px DarkSlateGray; 
 
\t \t \t -webkit-box-shadow:2px 4px 75px DarkSlateGray; 
 
\t \t \t -moz-box-shadow:4px 2px 75px DarkSlateGray; 
 
\t \t } 
 
\t \t .photobox img 
 
\t \t { 
 
\t \t \t width:200px; 
 
\t \t \t height:200px; 
 
\t \t \t border:2px inset Snow; 
 
\t \t } 
 
\t \t .photobox .names p 
 
\t \t { 
 
\t \t \t line-height:15px; 
 
\t \t \t font-family: 3Dumb ; 
 
\t \t \t font-size:25px; 
 
\t \t \t font-weight:bold; 
 
\t \t \t text-shadow: 3px 3px 3px DarkSlateGray; 
 
\t \t \t color:MidnightBlue; 
 
\t \t \t text-align:center; 
 
\t \t \t text-transform:uppercase; 
 
\t \t } 
 
\t \t 
 
SCRIPT; 
 
$this->registerCss($css); 
 
?> 
 

 
<?php 
 

 
use yii\helpers\Html; 
 
use yii\grid\GridView; 
 
use yii\widgets\Pjax; 
 
use yii\helpers\ArrayHelper; 
 
use yii\helpers\Url; 
 
use yii\helpers\BaseUrl; 
 
$this->title = Yii::t('app', 'Users List'); 
 
?> 
 
<div class="user-record-index"> 
 
\t <?php Pjax::begin(['id' => 'userform']); ?> 
 
    <?= GridView::widget(['id'=>'usergrids','options' => ['data-pjax' => true ], 
 
     'dataProvider' => $dataProvider, 
 
     'filterModel' => $searchModel, 
 
     'columns' => [ 
 

 
\t \t \t [ 
 
\t \t \t \t 'label' => 'Foto', 
 
\t \t \t \t 'format' => 'html', 
 
\t \t \t \t 'filter'=> '', 
 
\t \t \t \t 'content' => function($data) 
 
\t \t \t \t { 
 
\t \t \t \t \t $dest = Yii::getAlias('@web/'); 
 
\t \t \t \t \t return Html::img($dest . $data->filepath,[ 
 
\t \t \t \t \t \t 'class'=>'enlargephoto','width' => '50px','height'=>'50px', 
 
\t \t \t \t \t \t "style"=>"border:1px ridge Silver; box-shadow:2px 3px 15px Black; 
 
\t \t \t \t \t \t \t \t -webkit-box-shadow:2px 3px 15px Black; 
 
\t \t \t \t \t \t \t \t cursor:pointer", 
 
\t \t \t \t \t \t 'namas'=>$data->nama, 
 
\t \t \t \t \t ]); 
 
\t \t \t \t }, 
 
\t \t \t \t 'contentOptions' => ['class' => 'content-grid-css'], 
 
\t \t \t \t 'headerOptions' => ['class' => 'header-grid-css'], 
 
\t \t \t \t 
 
\t \t \t ], 
 
\t \t \t [ 
 
\t \t \t \t 'attribute'=>'username', 
 
\t \t \t \t 'format'=>'html', 
 
\t \t \t \t 'content' => function($data) 
 
\t \t \t \t { 
 
\t \t \t \t \t return Html::tag('div', $data->username, 
 
\t \t \t \t \t [ 
 
\t \t \t \t \t \t 'data-toggle' => 'tooltip', 
 
\t \t \t \t \t \t 'data-placement'=>'right', 
 
\t \t \t \t \t \t 'title'=> $data->nama, 
 
\t \t \t \t \t \t 'style'=> 'cursor:pointer;' 
 
\t \t \t \t \t ]); 
 
\t \t \t \t }, 
 
\t \t \t \t 'options' => ['width' => '120'], 
 
\t \t \t \t 'contentOptions' => ['class' => 'content-grid-css'], 
 
\t \t \t \t 'headerOptions' => ['class' => 'header-grid-css'], 
 
\t \t \t ], 
 
\t \t \t 
 
\t \t \t [ 
 
\t \t \t \t 'attribute'=>'nama', 
 
\t \t \t \t 'format'=>'html', 
 
\t \t \t \t 'content' => function($data) 
 
\t \t \t \t { 
 
\t \t \t \t \t return Html::encode($data->nama); 
 
\t \t \t \t }, 
 
\t \t \t \t 'contentOptions' => ['class' => 'content-grid-css'], 
 
\t \t \t \t 'headerOptions' => ['class' => 'header-grid-css'], 
 
\t \t \t ], 
 
\t \t \t 
 
\t \t \t [ 
 
\t \t \t \t 'attribute'=>'email', 
 
\t \t \t \t 'format'=>[ 
 
\t \t \t \t \t 'Email', 
 
\t \t \t \t ], 
 
\t \t \t \t 'value' => function($data) 
 
\t \t \t \t { 
 
\t \t \t \t \t return Html::encode($data->email); 
 
\t \t \t \t }, 
 
\t \t \t \t 
 
\t \t \t \t 'contentOptions' => ['class' => 'content-grid-css1'], 
 
\t \t \t \t 'headerOptions' => ['class' => 'header-grid-css'], 
 
\t \t \t ], 
 
\t \t \t [ 
 
       'attribute'=>'create_at', 
 
\t \t \t \t 'format' => ['datetime', 'php:d-m-Y H:i:s'], 
 
\t \t \t \t 'options' => ['width' => '120'], 
 
\t \t \t \t 'content' => function($data) 
 
\t \t \t \t { 
 
\t \t \t \t \t return Html::encode($data->create_at); 
 
\t \t \t \t }, 
 
\t \t \t \t 
 
\t \t \t \t 'contentOptions' => ['class' => 'content-grid-css'], 
 
\t \t \t \t 'headerOptions' => ['class' => 'header-grid-css'], 
 
\t \t \t ], 
 
\t \t \t [ 
 
\t \t \t \t 'class' => \yii\grid\ActionColumn::className(), 
 
\t \t \t \t //'controller' => 'MarketingController', 
 
\t \t \t \t 'template' => '{update}{delete}{view}', 
 
\t \t \t \t 'header' => Html::a('<i class="glyphicon glyphicon-plus"></i>&nbsp;Add New',['create','id'=>'addb']), 
 
\t \t \t \t 'buttons' => 
 
\t \t \t \t [ 
 
\t \t \t \t \t 'update' => function($url, $model, $key) 
 
\t \t \t \t \t { 
 
\t \t \t \t \t \t return Html::a('<span class="glyphicon glyphicon-pencil"></span>', 
 
\t \t \t \t \t \t $url,['title'=> Yii::t('app','update'),]); 
 
\t \t \t \t \t }, 
 
\t \t \t \t \t 'delete' => function($url, $model, $key) 
 
\t \t \t \t \t { 
 
\t \t \t \t \t \t return Html::a('<span class="glyphicon glyphicon-trash"></span>', 
 
\t \t \t \t \t \t $url,['title'=> Yii::t('app','delete'),'data-pjax' => 'userform', 
 
\t \t \t \t \t \t 'data-confirm' => Yii::t('app','Are you sure to delete this item'), 
 
\t \t \t \t \t \t 'data-method' => 'post', 
 
\t \t \t \t \t \t ]); 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t } 
 
\t \t \t \t ], 
 
\t \t \t \t 'contentOptions' => ['class' => 'content-grid-css'], 
 
\t \t \t \t 'headerOptions' => ['class' => 'header-grid-css'], 
 
\t \t \t ], 
 
     ], 
 
    ]); ?> 
 
\t <?php Pjax::end() ?> 
 
</div>

Answer 1

JS이 방법을 등록하십시오 .. 그런 다음

use yii\web\View; 

당신의 자바 스크립트 코드는 다음과 같이 구현입니다 ...

<?php 

$this->registerJs(" 
$('body').tooltip({selector: '[data-toggle="tooltip"]'}); 

$('.enlargephoto').hover(function(){ 
     $('.photobox').remove(); 
     var srcval = $(this).attr('src'); 
     var names = $(this).attr('namas'); 
     $('<div class=\'photobox\' ></div>') 
     .html('<p class=\'names\'>'+names+'</p><img src='+srcval+'></img>') 
     .appendTo('#usergrids').hide().fadeIn('fast'); 
    },function(){ 
     $('.photobox').remove(); 
    }); 
    $('.enlargephoto').mousemove(function(e){ 
     var xx = e.pageX - 20; 
     var tt = e.pageY - 120; 
     $('.photobox').css({top:tt, left:xx}); 
    }); 
", View::POS_END); 

POS_LOAD 또는 POS_READY도 시도 할 수 있습니다.

Answer 2

아마 Ajax GridView를 사용하고있을 것입니다. 코드에서 "hover"이벤트에 대한 리스너는로드 될 때 이미 페이지에 존재하는 요소에만 추가됩니다. 당신은 내가 실제 사건에서 파산 있도록 event delegation

$('body').on('mouseenter', '.enlargephoto', function(){ 
    $('.photobox').remove(); 
    var srcval = $(this).attr('src'); 
    var names = $(this).attr('namas'); 
    $('<div class=\'photobox\' ></div>') 
    .html('<p class=\'names\'>'+names+'</p><img src='+srcval+'></img>') 
    .appendTo('#usergrids').hide().fadeIn('fast'); 
}); 
$('body').on('mouseleave', '.enlargephoto' ,function(){ 
    $('.photobox').remove(); 
}); 
$('body').on('mousemove', '.enlargephoto' function(e){ 
    var xx = e.pageX - 20; 
    var tt = e.pageY - 120; 
    $('.photobox').css({top:tt, left:xx}); 
}); 

이 호버 이벤트가 더 이상 존재하지 않습니다 필요합니다.