← 返回所有博客文章

 

某一天微软推出了跨平台代码编辑器 Visual Studio Code,在Mac上试用了之后我就爱上了他,如果你既使用Sublime又使用Visual Studio,那么他绝对是你写Javascript的最佳选择。

再加上Visual Studio Code 对TypeScript完美支持,绝对可以让你飞一样的玩SpreadJS。

Visual Studio Code 中使用TypeScript可参考https://code.visualstudio.com/docs/languages/typescript

屏幕快照 2016-03-08 下午9.39.07

下面已自定义Color Picker 单元格为例,演示在Visual Studio Code 中用TypeScript写SpreadJS。

3

 

1. 安装Visual Studio Code

    官网下载最新安装包一键安装。https://code.visualstudio.com/

2. 使用npm安装TypeScript

    参考http://www.typescriptlang.org/,在终端输入npm install -g typescript安装,安装完成后输入tsc 测试。

屏幕快照 2016-03-08 下午9.42.30

3. 创建工程

    添加ColorPicker文件夹,添加tsconfig.json文件。输入;

    {
        "compilerOptions": {
            "target": "es5",
            "module": "amd",
            "sourceMap": true
        }
    }

4. 新建src文件夹,添加ColorPickerCellType.ts文件

/// <reference path="../lib/SpreadJS/definition/gcspread.sheets.d.ts"/>
declare var $;
class ColorPickerCellType extends GcSpread.Sheets.CustomCellType {
    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.colorpicker();
        $editor.attr("gcUIElement", "gcEditingInput");
        $(".colorpicker").attr("gcUIElement", "gcEditingInput");
    }
    deactivateEditor(editorContext: any, context?: any) {
        if (editorContext) {
            var $editor = $(editorContext);
            $editor.colorpicker("hide");
            $editor.colorpicker("destroy");
        }
        super.deactivateEditor(editorContext, context);
    }
    setEditorValue(editorContext: any, value: any, context?: any) {
        $(editorContext).colorpicker("setValue", value);
    }
    getEditorValue(editorContext: any, context?: any) {
        return $(editorContext).colorpicker("getValue");
    }
    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);
        }
    }
    paint(ctx: CanvasRenderingContext2D, value: any, x: number, y: number, width: number, height: number, style: GcSpread.Sheets.Style, context?: any) {
        if (value) {
            ctx.fillStyle = value;
            ctx.fillRect(x, y, width, height);
            ctx.fillStyle = "#FFFFFF";
            super.paint(ctx, value, x, y, width, height, style, context);
        }
        else {
            super.paint(ctx, value, x, y, width, height, style, context);
        }
    }
}

 

/// <reference path="../lib/SpreadJS/definition/gcspread.sheets.d.ts"/>

引用spread 接口定义,代码智能感知全靠它

declare var $;

解决$报错,也可以自行Google jquery.d.ts文件,实现Jquery 代码提示

5. 创建tasks.json

    使用F1或者cmd+shift+p 打开Command Palette,输入Configure Task Runner 点击回车。

    设置文件中 "args": ["-p", "."]。

6. 生成Js文件

    使用cmd+shift+b命令,你会发现src文件夹下多了ColorPickerCellType.js 和 ColorPickerCellType.js.map两个文件。

7. 新建index.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="./lib/bootstrap-colorpicker/css/bootstrap-colorpicker.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="./lib/bootstrap-colorpicker/js/bootstrap-colorpicker.min.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/ColorPickerCellType.js"></script>
    <script>
        var ns = GcSpread.Sheets;
        $(function(){            
            var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"), { sheetCount: 1 });
            var sheet = spread.getActiveSheet();
            sheet.isPaintSuspended(true);
            sheet.setValue(0, 1, "ColorPicker", ns.SheetArea.colHeader);
            sheet.getColumn(1).cellType(new ColorPickerCellType()).width(200);
            sheet.isPaintSuspended(false);
        });
    </script>
</body>
</html>

 

大功告成,让我们运行index.html看看效果吧。

12

下载源代码: