如何使Yii框架的CGridView的linkHtmlOptions顯示爲圖像圖標，並在點擊時觸發javascript/jquery？

Question

這裏就是我需要幫助，我的Yii框架的Web應用程序的CGridView部分

array(
     'class'=>'CLinkColumn', 
     'linkHtmlOptions'=>array("onclick"=>"$('.fancybox').fancybox()"), 
     'header'=>'Image', 
), 

目前，當我認爲，在前端，它顯示「鏈接」爲超鏈接.. 我想要什麼發生的是，它會顯示類似如/images/click_icon.jpg，而不是一個普通的字超級鏈接可點擊圖片圖標，那麼一旦它被點擊，就應該把這個

$(".fancybox").fancybox(); 

那麼怎麼辦，在這我粘貼上面的數組？

Answer 1

當你寫

'linkHtmlOptions'=> array("onclick"=>"$('.fancybox').fancybox()"), 

你實際上是做由類選擇「.fancybox」觸發所有匹配的元素的初始化，關於‘點擊’事件。雖然您正在進行初始化，但您並不是想以適當的方式管理元素的onclick事件。

你應該有

'linkHtmlOptions'=> array("onclick"=>"$('.fancybox').click()"), 

，併爲在現場的fancybox顯示的指示，把初始化的fancybox中的document.ready事件。但是，如果你堅持要初始化在網格中的fancybox對象，你應該寫

'linkHtmlOptions'=> array("onclick"=>"$('.fancybox').fancybox(); $('.fancybox').click()"), 

但是你可能需要等待在這兩個電話之間，將不得不測試它...

順便說一句，您將一遍又一遍地重複網格列中每個單元格的相同鏈接。它有任何意義嗎？我會把鏈接放在網格之外。

Answer 2

您可以使用imageUrl property of CLinkColumn：

array(
    'class'=>'CLinkColumn', 
    'linkHtmlOptions'=>array("onclick"=>"$('.fancybox').fancybox()"), 
    'header'=>'Image', 
    'imageUrl'=>Yii::app()->baseUrl.'/images/click_icon.jpg' 
), 

無論你在哪裏存儲圖像，該網址將不得不提供，上面的例子中，圖像是在項目的根，所以我用Yii::app()->baseUrl。