我有一个使用BackgridJS的应用程序用于类似电子表格的编辑器界面。当用户在一行中进行选项卡时,每个单元格(Backgrid.StringCell)都会自动变为可编辑状态。但是,光标位于单元格内容的末尾,要求用户在将新数据输入单元格之前退回到字符串的开头。
我希望当单元格获得焦点时,单元格内容会自动突出显示,以便用户可以立即开始将新数据输入该单元格,或者选项卡到下一个单元格以保留该数据。
我有一种感觉,我应该听StringCell的enterEditMode事件,但我无法弄清楚从哪里去。我目前有:
var stringCell = Backgrid.StringCell.extend({
enterEditMode: function() {
// highlight cell contents here
}
});
答案 0 :(得分: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;
}
})
});