使用锁定和解锁列时，如何找出当前正在编辑的单元格在 table 的哪一部分？

Question

我在 kendo 网格中使用锁定和未锁定的列，当我单击一个单元格时会发生编辑事件。问题是因为网格被分成两部分（因为锁定和未锁定的列），我无法弄清楚当前编辑单元格正在编辑哪个 table...

IE：我点击姓名栏的单元格，它的索引是0，然后如果我点击性别栏的单元格，它的索引是0。

我正在处理的网格比这个网格有更多的锁定和解锁列。

$("#grid").kendoGrid({
  columns: [{
      field: "name",
      locked: true,
      width: 200
    },
    {
      field: "gender",
      width: 100
    },
    {
      field: "city",
      width: 100
    }
  ],
  dataSource: {
    data: [{
        id: 1,
        name: "Jane Doe",
        gender: "female",
        city: "Sofia"
      },
      {
        id: 2,
        name: "John Smith",
        gender: "male",
        city: "London"
      },
      {
        id: 3,
        name: "James Jones",
        gender: "male",
        city: "New York"
      },
      {
        id: 4,
        name: "Mary Johnson",
        gender: "female",
        city: "Paris"
      },
      {
        id: 5,
        name: "Robert Lee",
        gender: "male",
        city: "Berlin"
      }
    ],
    schema: {
      model: {
        id: "id",
        fields: {
          name: {
            type: "string",
            editable: true
          },
          gender: {
            type: "string",
            editable: true
          },
          city: {
            type: "string",
            editable: true
          }
        }
      }
    }
  },
  navigatable: true,
  selectable: "row",
  editable: {
    mode: "incell",
    confirmation: false
  },
  edit: function(e) {
    console.log(e.sender.current().index());
  },
  change: function(e) {

  }
});

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.mobile.all.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>

<div id="grid" style="width:400px"></div>

Answer 1

您可以尝试 jQuery .is() 方法并将当前单元格的 table 与网格的 lockedTable 元素进行比较。

见jQuery - how to check if two elements are the same?

edit: function(e) {
    console.log(e.sender.current().index());
    let isLocked = e.sender.current().closest("table").is(e.sender.lockedTable);
    console.log("Is Locked Portion: ", isLocked);    
}

Example

使用锁定和解锁列时，如何找出当前正在编辑的单元格在 table 的哪一部分？

How to find out which part of the table the current cell being edited is in when using locked and unlocked columns?

jquery

kendo-ui

kendo-grid