用Visual Studio Code + TypeScript 完成自定义颜色选择器单元格

发布时间:2016/03/09 00:03 发布者:dexteryao

返回博客中心

 

某一天微软推出了跨平台代码编辑器 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

下载源代码:


关于葡萄城

赋能开发者!葡萄城是专业的集开发工具、商业智能解决方案、低代码开发平台于一身的软件和服务提供商,为超过 75% 的全球财富 500 强企业提供服务。葡萄城专注控件软件领域30年,希望通过模块化的开发控件、灵活的低代码应用开发平台等一系列开发工具、解决方案和服务,帮助开发者快速响应复杂多变的业务需求,最大程度地发挥开发者的才智和潜能,让开发者的 IT 人生更从容更美好。

了解详情,请访问葡萄城官网