jquery - 根据布尔值禁用对行的编辑,但在所有行中都禁用了不应该的编辑
问题描述
我正在尝试根据布尔值 true 将行列设置为禁用,但不是 Age 列。当我运行它时,它应该只设置 3 行列被禁用,但它会禁用所有列,它不应该是。
缺陷是我的逻辑,但不确定到底在哪里。
$(document).ready(function() {
LoadBasicGrid();
});
$('#btn').on('click', () => {
SetGridIntoReadOnly()
});
function LoadBasicGrid() {
CreateGrid();
}
function CreateGrid() {
let ds = [{
"PersonID": 1,
"First": "Albert",
"Last": "Crane",
"Age": 30,
"City": "Toronto"
},
{
"PersonID": 2,
"First": "Betty",
"Last": "Page",
"Age": 23,
"City": "Toronto"
},
{
"PersonID": 3,
"First": "Carol",
"Last": "Michaels",
"Age": 20,
"City": "Brampton"
},
{
"PersonID": 4,
"First": "Dale",
"Last": "Burns",
"Age": 40,
"City": "Etobicoke"
},
{
"PersonID": 5,
"First": "Edward",
"Last": "Jones",
"Age": 35,
"City": "Bramalea"
}
];
$("#BasicGrid").empty();
$("#BasicGrid").kendoGrid({
dataSource: {
data: ds,
schema: {
model: {
id: "PersonID",
fields: {
PersonID: {
type: "number",
editable: false,
hidden: true
},
First: {
type: "string",
editable: true
},
Last: {
type: "string",
editable: true
},
Age: {
type: "number",
editable: true
},
City: {
type: "string",
editable: true
}
}
}
}
},
selectable: "row",
navigatable: true,
scrollable: true,
editable: {
mode: "incell",
confirmation: false
},
beforeEdit: function(e) {
},
edit: function(e) {
},
change: function(e) {
},
columns: [{
field: "PersonID",
title: "PersonID",
editable: false,
hidden: true
},
{
field: "First",
title: "First"
},
{
field: "Last",
title: "Last"
},
{
field: "Age",
title: "Age"
},
{
field: "City",
title: "City"
}
],
height: 300
});
}
var EditableColumns = ['First', 'Last', 'Age', 'City'];
var PersonID = {
"Person": [{
"Orientation": [{
"PersonID": 1,
"Male": true
},
{
"PersonID": 2,
"Male": false
},
{
"PersonID": 3,
"Male": false
},
{
"PersonID": 4,
"Male": true
},
{
"PersonID": 5,
"Male": true
}
]
}]
};
function SetGridIntoReadOnly() {
let grid = $('#BasicGrid').getKendoGrid();
let person = PersonID.Person[0].Orientation;
person.forEach((e, i) => {
for (let i = 0; i < grid.dataSource.view().length; i++) {
if (grid.dataSource.at(i).PersonID === e.PersonID) {
if (e.Male === true) {
//console.log(e.PersonID + ": " + i);
for (let j = 0; j < EditableColumns.length - 1; j++) {
if (EditableColumns[j] != "Age") {
grid.dataSource.at(i).fields[EditableColumns[j]].editable = false;
}
}
}
}
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.513/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2020.2.513/js/kendo.all.min.js"></script>
<div id="BasicGrid"></div>
<button id="btn"> Disable Edit </button>
解决方案
所以我想出了如何在没有一堆代码的情况下做到这一点,而且它一直就在我面前,我在编辑功能中添加了这个
let foundPerson = PersonID.Person[0].Orientation.find(f => f.PersonID === e.model.PersonID).Male;
if (foundPerson === true && e.sender.editable.options.fields.field != "Age") {
this.closeCell();
}
推荐阅读
- java - 为什么编译器对 getter 方法说“找不到符号”?
- python - 使用while循环对给定范围内的列表值求和
- c# - 使用 TVP 的批量更新适用于 SSMS,但不适用于 C#
- c++ - 在多个 cpp 文件中包含带有定义的 h 文件
- java - getBundle() 时出现 java.util.MissingResourceException
- swift - 为什么 DatePicker 在 Date 变为 nil 时会崩溃?
- c++ - C++ 未初始化的结构成员 - 字段不存在
- c# - 是否可以使用标记将任何对象作为参数传递给 LinkButton.CommandArgument?
- java - 是否可以使用 Java 8 API 更改所有 Guava API?
- php - Magento 2 选择特定的集合字段不起作用