jQuery EasyUI でグリッド内でリンクボタンを使う方法

jQuery EasyUIのデータグリッドは便利で、表示するデータとして画像(<img>を利用)を指定すれば、そのまま表示されるが、「画像付きのリンクボタン」はうまく表示されない。これはおそらくレンダリングのタイミングの関係だと思われるが、以下の点に留意すればきちんと使える。

1. データグリッドにイベントハンドラを追加する
   画像ボタンを表示するために、データグリッド描画完了後にあらためてリンクボタンを初期化する。

   onLoadSuccess:function(){
   $(this).datagrid('getPanel').find('a.easyui-linkbutton').linkbutton();
   }

2. jQuery EasyUI のイベントハンドラを使う
   ライブラリが提供するイベントハンドラを使い、jQueryのイベントハンドラは使わない。通常のイベントは、jQuery EasyUIが中で握りつぶしているようなので、ライブラリが提供するイベントハンドラを使う。

   onClickCell: function(index, field, value){
   clickTrip(index, field, value); // fieldに列名がセットされている
   }
   // jQueryのイベントハンドラ
   // $('.hoge').on('click', function(){ ...}); // 動かない例