剑道网格行单击更改颜色
Posted
技术标签:
【中文标题】剑道网格行单击更改颜色【英文标题】:Kendo Grid Row click change color 【发布时间】:2016-07-25 04:01:36 【问题描述】:我有一个带有以下代码的剑道网格:
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"
]
);
“设备”网格中的第二列是一个超链接,每个行项都指向一个特定的页面。我想添加这个功能,如果用户点击一个行项目,剑道网格会记住点击并相应地更改该行项目的颜色(从蓝色到可能是紫色,就像谷歌在其搜索页面中所做的那样) 我该怎么做?
【问题讨论】:
【参考方案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');
否则你可以分配一个类
$(this).closest('td').addClass('activeTd');
和css规则一样
td.activeTd
background-color: violet;
另外,我把这段代码放在哪里?
您必须将 jquery 放入您的网格 databound
事件中。
【讨论】:
我只想更改该行元素(超链接)的颜色,而不是整行。另外,我把这段代码放在哪里? 谢谢,成功了。如果我只能更改 href 链接的颜色,而不是整个单元格块的颜色,那就更好了。 好吧,也可以这样做...只需将 css 规则更改为td.activeTd a color: violet;
【参考方案2】:
我尝试了代码
.k-grid th.k-state-selected, .k-grid td.k-state-selected, .k-grid tr.k-state-selected > td color: #292b2c; background-color: #cecece !important;
它对我有用。
【讨论】:
以上是关于剑道网格行单击更改颜色的主要内容,如果未能解决你的问题,请参考以下文章