SpreadJS表格控件自定义AutoComplete单元格.pdf

SpreadJS 表格控件自定义AutoComplete 单元格 本文将介绍如何实现 AutoComplete 单元格。下面自定义单元格类型主要以 TypeScript 完成。 1. 添加 AutoCompleteCellType.ts 文件 /// reference path=../lib/SpreadJS/definition/gcspread.sheet s.d.ts/ // /autocomplete/ declare var $; class AutoCompleteCellType extends GcSpread.Sheets.CustomCellTy pe { availableTags = [ ]; constructor(availableTags: Arraystring) { super(); if (availableTags availableTags.length 0) { this.availableTags = availableTags; } } createEditorElement(context) { //Create input presenter. return document.createElement(input); } activateEditor(editorContext: any, cellStyle: GcSpread.Shee ts.Style, cellRect: GcSpread.Sheets.Rect, context?: any) { var $editor = $(editorContext); super.activateEditor(editorContext, cellStyle, cellRec t, context); $editor.css(position, absolute); $editor.attr(gcUIElement, gcEditingInput); $editor.autocomplete({ source: this.availableTags }); // initialize autocomplete widget $editor.autocomplete(widget).attr(gcUIElement, gcE ditingInput); // keep focus when mouse down on dropdown return $editor; } deactivateEditor(editorContext: any, context?: any) { if (editorContext) { var $editor = $(editorContext); // $editor.autocomplete(hide); $editor.autocomplete(destroy); } super.deactivateEditor(editorContext, context); } setEditorValue(editorContext: any, value: any, context?: an y) { $(editorContext).val(value); } getEditorValue(editorContext: any, context?: any) { return $(editorContext).val(); } updateEditor(editorContext: any, cellStyle: GcSpread.Sheet s.Style, cellRect: GcSpread.Sheets.Rect, context?: any) { if (editorContext) { var $editor =