JQGridのセルプロパティを編集

Question

私はJQグリッドの初心者です。私のJQグリッドでは、列の画像がアンカータグとして追加されています。特定のセルのOnclick私はそのセルの画像だけを変更する必要があります。これは私の下の形式でアンカータグを与えるが、私は、実行時にそのイメージソースを変更することはできませんよ

$('.clickableTitle').live('click', function() { 
    $(this).parents('table:first').getCell($(this).parents('tr:first').attr('id'), 'comment')); 
}); 

：私はとの列にクラスのclickableTitle」を追加し、現在のセルにアクセスしようとしています。

<A href="Proj.aspx?PID=795&Store=#Comment"><IMG class=commentIcon src="/_Layouts/images/iconCommentOn.png"></A> 

これを達成するための最良の方法をお知らせください。ありがとう!!!

Answer 1

まず、使用しようとしているJavaScriptライブラリの名前：jqGrid。どこでもthe documentationまたはthe main sideにある場合、同じ名前が同じ形式で書かれています。

あなたの主な質問です。 onCellSelectコールバックを使用して、画像上のクリックイベントを捕捉することも、一部のセルをクリックすることもできます。 onCellSelectコールバックのeパラメータはevent objectであり、e.targetはクリックされた要素になります。

The demoどのように使用できるかを示します。

Iは、ロック用のjQuery UIの初期背景画像として使用されます。画像をクリックする

formatter: function() { 
    return "<a href='#'><span class='ui-icon ui-icon-locked'></span></a>" 
} 

が"ui-icon-locked"から"ui-icon-unlocked"に<span>要素にクラスを変更することにより、画像を変更：

onCellSelect: function (rowid, iCol, cellcontent, e) { 
    var $dest = $(e.target), $td = $dest.closest('td'); 
    if ($td.hasClass("clickableTitle")) { 
     if ($dest.hasClass("ui-icon-locked")) { 
      $dest.removeClass("ui-icon-locked").addClass("ui-icon-unlocked"); 
     } else { 
      $dest.removeClass("ui-icon-unlocked").addClass("ui-icon-locked"); 
     } 
    } 
} 

あなたが<img>の代わりに、背景画像を持っていることを好む場合は、簡単にコードを変更することができます<span>。

Answer 2

@Oleg：ありがとうございます。私はursが正しい方法だと確信していますが、既存の実装の限界のために、以下に述べる解決策を使用しなければなりませんでした。

$('.clickableTitle').live('click', function() { 
    $('body').css('cursor', 'wait'); 
    var commentIconStat = $(this).parents('table:first').getCell($(this).parents('tr:first').attr('id'), 'comment'); 
    //Turn read comment off 
    if (commentIconStat.search(/iconCommentOn/i) > -1) { 
     commentIconStat = commentIconStat.replace(/iconCommentOn/i, "iconCommentOff"); 
     $(this).parents('table:first').setCell($(this).parents('tr:first').attr('id'), 'comment', commentIconStat, '') 

    } 
    $('body').css('cursor', 'default'); 
});