MVC 3 Webgridは、行全体をクリック可能にします。

Question

私はMVC 3のカミソリビューでwebgridを使用しています。 以下は、私のwebGridの外観を示しています。

すべての列のテキストに対してjavascriptメソッドを呼び出すことができます。私は行全体のどこかをクリックすると同じことが起こるようにしたい。

私にこれを案内してください。おかげ

  @grid.GetHtml(

      columns: grid.Columns(

      grid.Column("CompanyName", format: @<text><a href="javascript:SubmitValues('@item.Col1','@item.Col2','@item.Col3');">@item.CompanyName</a></text>, header: "ABC"), 

      grid.Column("CompanyAddress", format: @<text><a href="javascript:SubmitValues('@item.Col1','@item.Col2','@item.Col3');">@item.CompanyName</a></text>, header: "DEF"), 

      ))  

     } 

Answer 1

あなたは、行のクリック機能に

追加htmlAttributesを追加するためのjQueryを使用する必要があります：あなたのWebGridの新しい{ID = "MainTable"}。

<script type="text/javascript"> 
    $(function() { 
     var tr = $('#MainTable').find('tr'); 
     tr.bind('click', function (event) { 
      var values = ''; 
      var tds = $(this).find('td'); 


      $.each(tds, function (index, item) { 
       values = values + 'td' + (index + 1) + ':' + item.innerHTML + '<br/>'; 
      }); 
      alert(values); 


     }); 
    }); 


</script> 

Answer 2

私のプロジェクトでは、このように特定の列にクラスstyle: "click_able"を追加しています。

grid.Column("CompanyName", style: "click_able", format: @<text><a href="javascript:SubmitValues('@item.Col1','@item.Col2','@item.Col3');">@item.CompanyName</a></text>, header: "ABC"), 

のようなクリック機能を追加します。

<script type="text/javascript"> 
$(".click_able").click(function() { 
    // Do something 
}); 

それは私の場合は正常に動作。