1

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

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

我有一种感觉，我应该听 StringCell 的 enterEditMode 事件，但我不知道从那里去哪里。我目前有：

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

1 回答 1

1

BackgridJS作者指出了正确的方向，我想出了这个解决方案：

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;
      }
    })
});
于 2013-09-20T21:38:35.870 回答