禁用基于布尔值的行编辑，但是当不应该编辑时，所有行均被禁用

Question

我正在尝试根据布尔值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>

Answer 1

所以我想出了没有一堆代码的方法，而且一直都在我的面前，我在编辑功能中添加了它

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();
}