Question

我有一个使用BackgridJS的应用程序用于类似电子表格的编辑器界面。当用户在一行中进行选项卡时，每个单元格（Backgrid.StringCell）都会自动变为可编辑状态。但是，光标位于单元格内容的末尾，要求用户在将新数据输入单元格之前退回到字符串的开头。

我希望当单元格获得焦点时，单元格内容会自动突出显示，以便用户可以立即开始将新数据输入该单元格，或者选项卡到下一个单元格以保留该数据。

我有一种感觉，我应该听StringCell的enterEditMode事件，但我无法弄清楚从哪里去。我目前有：

var stringCell = Backgrid.StringCell.extend({
    enterEditMode: function() {
        // highlight cell contents here
    }
});

Answer 1

在BackgridJS作者的正确方向上使用 point ，我能够提出这个解决方案：

var decimalFormatter = {
  fromRaw: function (rawData) {
    if(rawData == 0)
    {
      return '';
    }

    return rawData;
  },

  toRaw: function(data) {
    return data;
  }
};

/*
  Create a new custom cell type and set a custom formatter.
  Override the postRender() method in order to automatically select the 
  cell's contents for easier data entry when tabbing across rows.
*/

Backgrid.MyCell = Backgrid.StringCell.extend({
    className: "my-cell",
    formatter: decimalFormatter,
    editor: Backgrid.InputCellEditor.extend({
      postRender: function (model, column) {
        if (column == null || column.get("name") == this.column.get("name")) {
          // move the cursor to the end on firefox if text is right aligned
          if (this.$el.css("text-align") === "right") {
            var val = this.$el.val();
            this.$el.focus().val(null).val(val).select();
          }
          else {
            this.$el.focus().select();
          }
        }

        return this;
      }
    })
});

如何在获得焦点时自动选择Backgrid单元格中的文本？

1 个答案: