SpareadJS强大的拓展性让我们可以轻而易举的开发出满足项目需求的内容,在这个系列中我们将为大家展示各式各样的自定义单元格。文中自定义单元格类型都以TypeScript完成,有关TypeScript的使用可参考用Visual Studio Code + TypeScript 完成自定义颜色选择器单元格

本文将介绍如何实现AutoComplete单元格。关于jQuery UI Autocomplete的详细使用请参考http://jqueryui.com/autocomplete/

 

1. 添加AutoCompleteCellType.ts文件

/// <reference path="../lib/SpreadJS/definition/gcspread.sheets.d.ts"/>
// http://jqueryui.com/autocomplete/
declare var $;
class AutoCompleteCellType extends GcSpread.Sheets.CustomCellType {
    availableTags = [
    ];
    constructor(availableTags: Array<string>) {
        super();
        if (availableTags && availableTags.length > 0) {
            this.availableTags = availableTags;
        }
    }
    createEditorElement(context) {
        //Create input presenter.
        return document.createElement("input");
    }
    activateEditor(editorContext: any, cellStyle: GcSpread.Sheets.Style, cellRect: GcSpread.Sheets.Rect, context?: any) {
        var $editor = $(editorContext);
        super.activateEditor(editorContext, cellStyle, cellRect, context);
        $editor.css("position", "absolute");
        $editor.attr("gcUIElement", "gcEditingInput");
        $editor.autocomplete({
            source: this.availableTags
        }); // initialize autocomplete widget
        $editor.autocomplete("widget").attr("gcUIElement", "gcEditingInput"); // 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?: any) {
        $(editorContext).val(value);
    }
    getEditorValue(editorContext: any, context?: any) {
        return $(editorContext).val();
    }
    updateEditor(editorContext: any, cellStyle: GcSpread.Sheets.Style, cellRect: GcSpread.Sheets.Rect, context?: any) {
        if (editorContext) {
            var $editor = $(editorContext);
            $editor.css("width", cellRect.width);
            $editor.css("height", cellRect.height);
        }
    }
    isReservedKey(event: KeyboardEvent, context?: any): boolean {
        if (context.isEditing && (event.keyCode == 40 || event.keyCode == 38)) { // reserve up/down key to select items
            return true;
        }
        return false;
    }
    setAutocompleteSource(source: Array<string>) {
        this.availableTags = source;
    }
    getAutocompleteSource(): Array<string> {
        return this.availableTags;
    }
}

 

2. 使用AutoCompleteCellType

var ns = GcSpread.Sheets;
$(function() {
    var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
    ];
    var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"), { sheetCount: 1 });
    var sheet = spread.getActiveSheet();
    sheet.isPaintSuspended(true);
    sheet.setValue(0, 1, "AutoComplete1", ns.SheetArea.colHeader);
    sheet.getColumn(1).cellType(new AutoCompleteCellType(availableTags)).width(200);
    
    sheet.setValue(0, 2, "AutoComplete2", ns.SheetArea.colHeader);
    var autoCompleteCellType = new AutoCompleteCellType();
    autoCompleteCellType.setAutocompleteSource(availableTags);
    sheet.getColumn(2).cellType(autoCompleteCellType).width(200);
    
    sheet.isPaintSuspended(false);
});

 

3. HTML代码

<html>
<head>
    <meta charset="UTF-8">
    <link href="./lib/bootstrap-3.3.5/css/bootstrap.min.css" rel="stylesheet" />
    <link href="http://demo.grapecity.com.cn/SpreadJS/TutorialSample/external/spreadjs/css/gcspread.sheets.excel2013white.9.40.20153.0.css" rel="stylesheet" />
    <link href="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" rel="stylesheet" />
</head>
<body>
    <div id="ss" style="width:800px;height:500px"></div>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="./lib/bootstrap-3.3.5/js/bootstrap.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
    <script src="http://demo.grapecity.com.cn/SpreadJS/TutorialSample/external/spreadjs/gcspread.sheets.all.9.40.20153.0.min.js"></script>
    <script src="./src/AutoCompleteCellType.js"></script>
    <script src="./index.js"></script>
</body>
</html>

 

在第二三列单元格中输入内容即可查看效果。

preview

 

示例下载: