如何使Yii框架的CGridView的linkHtmlOptions显示为图像图标，并在单击时触发javascript / jquery？

Question

here's the part where i need help in my CGridView of Yii framework web app

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

currently, when i view that at the front-end, it shows "Link" as a hyperlink.. what i want to happen is, it will show a clickable image icon like eg /images/click_icon.jpg instead of an ordinary word hyperlink, then once it is clicked, it should call this

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

so how to do that in that array i pasted above ?

Answer 1

You can use imageUrl property of CLinkColumn :

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

Wherever you store the images, that url will have to be provided, for the above example, images are in the project root, hence i used Yii::app()->baseUrl .

Answer 2

When you write

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

what you are actually doing is triggering the initialization of all the matched elements by the class selector '.fancybox', on the 'click' event. Although you are doing the initialization, you are not leting fancybox manage the elements' onclick event in the proper way.

You should have

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

and, as the instructions at the fancybox site show, put the fancybox initialization in the document.ready event. But if you insist to initialize the fancybox object in the grid, you should write

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

But you may need to wait in between these two calls, would have to test it...

By the way, you are repeating the same link over and over again for every cell in the grid column. Does it make any sense? I would put the link outside the grid.