劍道網格行點擊變色

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"}} 

      ] 
     }); 

網格中的「設備」第二列是每一行項指向特定頁面的超鏈接。我想添加功能，如果用戶點擊一個行項目，kendo網格會記住點擊並相應地更改該行項目的顏色（從藍色到可能是紫羅蘭色，就像谷歌在搜索頁面中那樣） 我那樣做？

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 
}); 

所以我們所做的是我們click事件綁定到表內的所有錨標籤，並在單擊時，我們發現最近tr和應用類activeRow。現在我們必須指定CSS規則來改變這個類的顏色。

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

---

編輯1：

我只是想改變該行元素（超鏈接），而不是整個行的顏色。

只更改錨標記的td您可以執行此操作。

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

否則，您可以指定一個類

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

和CSS規則一樣

td.activeTd { 
    background-color: violet; 
} 

而且，我在哪裏可以把這個代碼？

你必須把jquery放到你的grid databound事件中。