SpreadJS has some built-in CellTypes that allow end-user input data easily, and those are also helpful for data entry validation. There are a couple of built-in CellTypes which can only perform an action but not for data entry, for example ButtonCellType and HyperLinkCellType. When end-user click on it, only fire an event or navigate to the hyperlink address. So these CellTypes don't provide editing ability in default, that means end-user can't change its value. However sometime we maybe need to allow end-user change the hyperlink in the cell and also it can be navigated by click on the link at the same time, so how to do it? It is something like a combination of the HyperLinkCellType and TextCellType. Yes, it is, we can do just like that, make one super CellType by using two kinds of CellTypes combination. SpreadJS CellType structure is flexible and extensible, we may use implementation of one CellType into another CellType, so that combine ability of these two CellTypes together. Here is a sample how to provide editing ability to the HyperLinkCellType. Firstly, we create a new CellType name is EditableHyperLinkCellType, which is inherited from HyperLinkCellType. So it has same features from its parent class.
function EditableHyperLinkCellType() {} EditableHyperLinkCellType.prototype = new ns.HyperLinkCellType();
And we want it be able to show a TextBox when end-user double click on a blank area in cell, so we need to change the editor of the CellType, there are some functions in HyperLinkCellType prototype related to the editor: createEditorElement, activateEditor, updateEditor, deactivateEditor, getEditorValue, setEditorValue. I don't explain those one by one, you may get more information from BaseCellType type in the SpreadJS documentation. Then you maybe have a question: do I need to rewrite code in these functions? No, there are already code in TextCellType you may re-use directly, but not copy code from SpreadJS js file, just call "apply" function of those functions of TextCellType prototype. Code will like this:
EditableHyperLinkCellType.prototype.createEditorElement = function(context) { return ns.TextCellType.prototype.createEditorElement.apply(this, context); } EditableHyperLinkCellType.prototype.activateEditor = function(editorContext, cellStyle, cellRect, context) { ns.TextCellType.prototype.activateEditor.apply(this, arguments); } EditableHyperLinkCellType.prototype.updateEditor = function(editorContext, cellStyle, cellRect, context) { ns.TextCellType.prototype.updateEditor.apply(this, arguments); } EditableHyperLinkCellType.prototype.deactivateEditor = function(editorContext, context) { ns.TextCellType.prototype.deactivateEditor.apply(this, arguments); } EditableHyperLinkCellType.prototype.getEditorValue = function(editorContext, context) { return ns.TextCellType.prototype.getEditorValue.apply(this, arguments); } EditableHyperLinkCellType.prototype.setEditorValue = function(editorContext, value, context) { ns.TextCellType.prototype.setEditorValue.apply(this, arguments); }
Here "ns" is namespace of SpreadJS: "$.wijmo.wijspread" Last step is we need to set focus to the TextBox when the cell enter editing mode, simply override the focus function of EditableHyperLinkCellType:
EditableHyperLinkCellType.prototype.focus = function(editorContext, context) { return ns.TextCellType.prototype.focus.apply(this, arguments); }
Then you can use this new CellType to any cell in SpreadJS, something like this:
var h = new EditableHyperLinkCellType(); sheet.getCell(2, 2).text("http://www.google.com").cellType(h); sheet.getColumn(2).width(200);
OK, open the html file in a browser, and try to double click the blank area of the cell C3, you will see the cell enter the editing mode, and you may change the hyperlink for the cell now. Try the sample in action.
MESCIUS inc.