如果用户单击网格中的编辑按钮，则如果我开始编辑文本框，则文本框的颜色应在左角上更改为红色，如图像中所示，请建议我我该怎么做？
默认情况下可以通过设置可编辑：True，但我使用"内联"，因此我必须手动添加红色
我认为我需要在更改中写一些条件：功能，我不确定要写什么
这是我的代码，目前它将其制成所有文本框的红色，但我只想显示红色的文本框。
请帮助
$('<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>
我建议使用网格编辑事件，以在下面的输入字段上绑定更改事件。
edit: function(e)
{
$('[name="SystemName"]').bind( "change",
function(){
$('[name="SystemName"]').parent().prepend("<span class='k-dirty'></span>");
});
}