剣道グリッド行私は次のコードで剣道グリッドを有する変色

Question

をクリック：

var data = <?php echo $model->over_view; ?>; 
     var grid = $("#grid").kendoGrid({ 
      dataSource: { 
       data: data, 
       pageSize: 10, 
       sort: { field: "metric", dir: "asc" } 
      }, 
      dataBound: function() { 
       $('td').each(function() { 
        if($(this).text() == 0){ 
         $(this).text('.'); 
        } 
        if ($(this).text() == 'Bad') { 
         $(this).addClass('critical') 
        } else if ($(this).text() == 'Good') { 
         $(this).addClass('ok') 
        } else if ($(this).text() == 'Suspect') { 
         $(this).addClass('warning') 
        } else if ($(this).text() == 'Idle') { 
         $(this).addClass('idle') 
        } 
       }) 
      }, 
      //rowTemplate: '<tr class="#: classification ==\"Good\" ? "discontinued" : "" #" data-uid="#: uid #"><td>#: classification #</td><td>#: MAC#</td> <td>#: f_Auth #</td><td>#: f_AssoC#</td><td>#: f_EAP #</td><td>#: f_EAPOL #</td><td>#: f_Data #</td><td>#: f_DHCP #</td> <td>#: f_Unk #</td><td>#: metriC#</td></tr>', 
      sortable: true, 
      resizable : true, 
      pageable: true, 
      toolbar: kendo.template($("#filterDeviceType").html()), 
      columns: [ 
       { field: "classification", title: "Device Health",headerAttributes:{ style:"text-align:center"}}, 
       { field: "display_mac", title: "Devices", width: 150,headerAttributes:{ style:"text-align:center "}, template:"<a target=\"_blank\" href='"+$("#visualize-url").val()+ "?trace_id=" + $("#trace-id").val()+"&mac="+"${MAC}&perspective=${type}'>${display_mac}</a>" }, 
       { field: "f_Auth", title: "Authentication Failure",headerAttributes:{ style:"text-align:center"} }, 
       { field: "f_Assoc", title: "Association Failure",headerAttributes:{ style:"text-align:center"}}, 
       { field: "f_ReAssoc", title: "Re-Association Failure",headerAttributes:{ style:"text-align:center"}}, 
       { field: "f_EAP", title: "EAP Failure" ,headerAttributes:{ style:"text-align:center"}}, 
       { field: "f_EAPOL", title: "EAPOL Failure",headerAttributes:{ style:"text-align:center"}}, 
       { field: "f_Data", title: "Data Failure",headerAttributes:{ style:"text-align:center"}}, 
       { field: "f_DHCP", title: "DHCP Failure",headerAttributes:{ style:"text-align:center"}}, 
       { field: "Data", title: "Data Packets",headerAttributes:{ style:"text-align:center"}}, 
       { field: "Total", title: "Total Packets",headerAttributes:{ style:"text-align:center"}} 

      ] 
     }); 

グリッド「デバイス」の2番目の列は、各列項目が特定のページを指すとハイパーリンクです。ユーザーが行項目をクリックすると、剣道グリッドがクリックを記憶し、その行項目の色をそれに応じて変更する機能を追加します。 どうすればよいですか（青から多分紫色に変わります）私がする？

Answer 1

これは、剣道のフレームワークを気にすることなく実行できます。あなたが持っているのはテーブルだけです。リンクをクリックすると、その行が強調表示されます。ここにあなたができることがあります。

$("#grid tr a").on('click',function(){ 
    $("#grid tr.activeRow").removeClass('activeRow'); //remove previous active row 
    $(this).closest('tr').addClass('.activeRow');//set current row as active 
}); 

それでは、私たちが行っていることは、我々は、テーブル内のすべてのアンカータグにクリックイベントをバインドし、そして、それがクリックされたときに、我々は最も近いtrを見つけて、クラスactiveRowを適用しています。次に、このクラスの色を変更するCSSルールを指定する必要があります。

tr.activeRow td{ 
    background-color: violet; 
} 

---

編集1：

私はその行の要素（ハイパーリンク）ではなく、行全体の色を変更したいです。

アンカータグのtdのみを変更することができます。エルス

$(this).closest('td').css('background-color','violet'); 

私はこのコードを入れてください。また

td.activeTd { 
    background-color: violet; 
} 

、のようなクラス

$(this).closest('td').addClass('activeTd'); 

とCSSルールを割り当てることができますか？

グリッドにjqueryを配置する必要があります。databoundイベント。