Question

我的问题如下：

我已经添加了作为模板的网格行编辑按钮。现在，我要执行的操作是单击单元格中的“编辑按钮”时，允许编辑单元格文本。

有人知道我该如何接受吗？如何启用按钮所在单元格的编辑？

添加模板：

template:
     "#if(" + columnWeekField + "!=null && IsEditable){#\<strong >#: " + columnWeekField + "# </strong> <span>(#:" + columnWeekFieldSum + "#) </span>  <button class='btn waves - effect waves-light' type='submit' name='EditCell'>Edit</button > \
                                             #}\

这是我尝试过的

$(grid.tbody).on("click", "[name='EditCell']", function (e) {

                                    var cellElement = this;
                                    var cell = $(cellElement);
                                    var grid = $("#grid").getKendoGrid();

      grid.editCell(cell);

                                    console.log("button clicked");
                                });

如果有人有什么好主意。很抱歉，如果该职位已经存在，但我找不到任何答案。如果有的话，请指向我。

Answer 1

您几乎明白了。要使用editCell()，您需要向其传递td元素。您正在传递button。

只需更改此...

var cell = $(cellElement);

对此...

var cell = $(cellElement).closest("td");

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>

  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.default.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.mobile.all.min.css">

  <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/angular.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jszip.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
  <script>
    $(function() {
      let grid = $("#grid").kendoGrid({
        dataSource: {
          data: [{ A: 1, B: 2, C: 2}]
        },
        columns: [{
          field: "A",
          template: "#= data.A #<button class='btn waves - effect waves-light' type='submit' name='EditCell'>Edit</button >"
        },{
          field: "B",
          template: "#= data.B #<button class='btn waves - effect waves-light' type='submit' name='EditCell'>Edit</button >"
        },{
          field: "C",
          template: "#= data.C #<button class='btn waves - effect waves-light' type='submit' name='EditCell'>Edit</button >"
        }],
        editable: true
      }).data("kendoGrid");
      
      $(grid.tbody).on("click", "[name='EditCell']", function (e) {
        var cellElement = this;
        var cell = $(cellElement).closest("td");
        var grid = $("#grid").getKendoGrid();

        grid.editCell(cell);
      });
    });
  </script>
</head>
<body>
  <div id="grid"></div>
</body>
</html>

Demo

Kendo Grid通过单元格内的按钮编辑单元格

1 个答案: