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 に答える