如果用户点击网格中的EDIT按钮然后如果我开始编辑文本框，则文本框的颜色应该在左角变为红色，如图所示，请建议我如何做到这一点？
通过设置editable：true可以默认使用Kendo属性，但我使用“inline”，因此我必须手动添加红色
我想我需要在Change：function中写一些条件，我不知道该怎么写
这是我的代码，目前它为所有文本框制作红色，但我想只显示编辑文本框的红色。
$('<span class="k-dirty"></span>').insertAfter('input:text');
这是我的完整代码：
<!DOCTYPE html>
<html>
<head>
<base
href="https://demos.telerik.com/kendo-ui/grid/editing-custom-validation"
/>
<style>
html {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title></title>
<link
rel="stylesheet"
href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.default-v2.min.css"
/>
<script src="https://kendo.cdn.telerik.com/2019.1.220/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.1.220/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid")
.kendoGrid({
dataSource: new kendo.data.DataSource({
data: [
{ SystemName: "SysTest", SystemID: "789", System: "Hello" }
],
serverPaging: false,
serverSorting: false,
serverFiltering: false,
change: function(e) {
if (e.action === "itemchange") {
$('<span class="k-dirty"></span>').insertAfter(
"input:text"
);
}
},
batch: true,
schema: {
//data: "Items",
model: {
id: "SystemID",
fields: {
SystemName: { editable: true },
SystemID: { editable: true },
System: { editable: true }
}
}
}
}),
columns: [
{
field: "SystemName",
title: "Some Name",
width: "45%",
encoded: false,
name: "SystemName"
},
{
field: "SystemID",
title: "System ID",
width: "25%",
encoded: false,
name: "SystemID"
},
{
field: "System",
title: "System",
width: "25%",
encoded: false,
name: "System"
},
{
command: [
{
name: "edit",
text: {
edit: "Edit", // This is the localization for Edit button
update: "Save", // This is the localization for Update button
cancel: "Cancel" // This is the localization for Cancel button
}
}
],
title: " ",
width: "50%"
}
],
editable: "inline",
// edit: gridEdit,
sortable: false,
resizable: true,
autoBind: true,
navigateHierarchyCell: true,
persistSelections: true,
pageable: false,
autoResizeHeight: false
})
.data("kendoGrid");
});
</script>
</div>
</body>
</html>
以下是我的问题的答案：
if (e.action === "itemchange") {
$('<span class="k-dirty"></span>').insertAfter('input[name=' + e.field + ']');
}