如何处理slickgrid自定义编辑器中的点击事件？

Question

我在slickgrid中有一个自定义编辑器，如下所示：

自定义编辑器代码如下所示：

function GroupsSelectEditor(args) {
    var $groups;
    var defaultValue;

    this.init = function () {
      $groups = $("<div class=\"editor-groups\">" +
              "<ul>"+
                  "<li><input type='checkbox'> group1</li>" +
                  "<li><input type='checkbox'> group2</li>" +
                  "<li><input type='checkbox'> group3</li>" +
                  "<li><input type='checkbox'> group4</li>" +
                  "<li><input type='checkbox'> group5</li>" +
              "</ul>" +
              "<button class=\"btn btn-mini\" >done</button>" +
            "</div");
      $groups.appendTo(args.container);
    };

    this.destroy = function () {
      $groups.remove();
    };

    // ...
  }

有问题的列使用此自定义编辑器：

columns = [
    {id: "groups", name: "Groups", field: "groups", editor: GroupsSelectEditor},
];

我希望“完成”按钮解除“$ groups”div元素，可能是通过调用destroy（）函数。

最好的方法是什么？我知道slickgrid使用自己的事件，但我不知道如何让我的按钮参与，或者这是否合适。

Answer 1

事实证明，您不必使用slickgrid事件参与。处理当前活动编辑器的正确方法是调用此网格函数：

grid.getEditController().commitCurrentEdit();

下面是修改后的代码，其中DOM以分段方式构造，并且单击处理程序绑定到按钮，该按钮调用此commitCurrentEdit()函数。

function (args) {
    var $groups;
    var defaultValue;

    this.init = function () {
      $groups = $("<div class=\"editor-groups\"></div>");
      var ul = $("<ul></ul>");
      $groups.append(ul);
      for (var i=0;i<5;i++) {
          var li = $("<li><input type='checkbox'> group"+i+"</li>");
          ul.append(li);
      }
      var btn = $("<button class=\"btn btn-mini\" >done</button>");
      btn.click(function() {
          args.grid.getEditController().commitCurrentEdit();
      });
      $groups.append(btn);
      $groups.appendTo(args.container);
      $groups.focus();
    };

    this.destroy = function () {
      $groups.remove();
    };

    ...
    ...

   }

请注意，您还可以拨打cancelCurrentEdit()。