jquery - Kendo Grid Row 点击改变颜色

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

            ]
        });

网格“设备”中的第二列是一个超链接，每个行元素都指向一个特定的页面。我想添加功能，如果用户点击一个行元素，剑道网格会记住点击并相应地更改该行元素的颜色(从蓝色到紫色，就像谷歌在其搜索页面中所做的那样)我该怎么做？

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

所以我们所做的是将点击事件绑定(bind)到表格内的所有 anchor 标记，当它被点击时我们找到最接近的 tr 并应用类 activeRow。现在我们必须指定 CSS 规则来更改此类的颜色。

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

---

编辑 1:

I only want to change the color of that row element( the hyperlink ), not the entire row.

要仅更改 anchor 标记的 td，您可以这样做。

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

否则你可以分配一个类(class)

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

和css规则一样

 td.activeTd {
   background-color: violet; 
 }

Also, where do i put this code?

您必须将 jquery 放入您的网格 databound 事件中。