剑道网格视图行高亮
Posted
技术标签:
【中文标题】剑道网格视图行高亮【英文标题】：Kendo grid view row high lighting 【发布时间】：2021-12-27 05:35:18 【问题描述】：我正在使用带有一个下拉列表列的剑道网格视图。一旦用户在下拉列表中选择任何值，需要突出显示该行。
【问题讨论】：
到目前为止你做了什么？有示例代码吗？ 【参考方案1】：尝试在tr 中添加一个 css 类：
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/grid/local-data-binding">
<style>html font-size: 14px; font-family: Arial, Helvetica, sans-serif; </style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1109/styles/kendo.default-main.min.css" />
<script src="https://kendo.cdn.telerik.com/2021.3.1109/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.3.1109/js/kendo.all.min.js"></script>
<style type="text/css">
tr.highlight
background-color: #f55;
</style>
</head>
<body>
<script src="../content/shared/js/products.js"></script>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function()
$("#grid").kendoGrid(
dataSource:
data: products,
schema:
model:
fields:
ProductName: type: "string", editable: false ,
UnitPrice: type: "number", editable: false ,
UnitsInStock: type: "number", editable: false ,
Discontinued: type: "boolean", editable: true
,
pageSize: 20
,
height: 550,
scrollable: true,
sortable: true,
filterable: true,
editable: true,
pageable:
input: true,
numeric: false
,
columns: [
"ProductName",
field: "UnitPrice", title: "Unit Price", format: "0:c", width: "130px" ,
field: "UnitsInStock", title: "Units In Stock", width: "130px" ,
field: "Discontinued", width: "130px", editor: ($cell, e) =>
$('<select>' +
'<option' + (e.model.Discontinued ? ' selected="selected"' : '') + '>True</option>' +
'<option' + (!e.model.Discontinued ? ' selected="selected"' : '') + '>False</option></select>')
.appendTo($cell)
.on('change', function (dataItem, $cell, e)
dataItem.Discontinued = ($(e.target).val() === 'True');
// Highlight code
$cell.closest('tr').addClass('highlight');
.bind(null, e.model, $cell));
]
);
);
</script>
</div>
</body>
</html>Dojo
【讨论】：
以上是关于剑道网格视图行高亮的主要内容，如果未能解决你的问题，请参考以下文章