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



 



示例下载: