javascript - 避免单击两次以开始编辑背景网格中的 bool (复选框)单元格

Question

我们正在使用 Backgrid 并发现要开始在 Backgrid 中编辑“ bool ”(复选框)单元格，您必须单击两次:第一次单击将被忽略并且不会切换复选框的状态。理想情况下，我们会找出导致此行为的根源(例如是否调用了 preventDefault)并在那里解决它，但起初我尝试了一种不同的方法，使用 BooleanCell 的 enterEditMode 方法的以下扩展，这似乎是一个合乎逻辑的地方，因为它在进入编辑模式时，复选框点击被忽略。

问题是我的尝试还切换了先前编辑的复选框的状态。这是代码。

var BooleanCell = Backgrid.BooleanCell.extend({
    /*
    * see https://github.com/wyuenho/backgrid/issues/557
    */
    enterEditMode: function () {
        Backgrid.BooleanCell.prototype.enterEditMode.apply(this, arguments);
        var checkbox = this.$('input');
        checkbox.prop('checked', !checkbox.prop('checked'));
    }
});

Answer 1

以下似乎有效:

var BooleanCell = Backgrid.BooleanCell.extend({
    editor: Backgrid.BooleanCellEditor.extend({
        render: function () {
            var model = this.model;
            var columnName = this.column.get("name");
            var val = this.formatter.fromRaw(model.get(columnName), model);

            /*
             * Toggle checked property since a click is what triggered enterEditMode
            */
            this.$el.prop("checked", !val);
            model.set(columnName, !val);

            return this;
        }
    })
});

这是因为 render 方法在单击时被 Backgrid.BooleanCell 的 enterEditMode 方法调用，并且所述方法如下销毁并重新创建复选框但这样做会丢失原始“非”的选中状态(单击后) -编辑模式”复选框

  this.$el.empty();
  this.$el.append(this.currentEditor.$el);
  this.currentEditor.render();