SpreadJS TreeNode Group

by eric peng

HTML

<link rel="stylesheet" href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/spreadjs/jquery.wijmo.wijspread.3.20143.15.css">
<script src="http://cdn.wijmo.com/spreadjs/jquery.wijmo.wijspread.all.3.20143.15.min.js"></script>
<div id="ss" style="width: 800px; height: 300px; border: 1px solid gray"></div>
<button id="btn">copy</button>
<div id="ss1" style="width: 800px; height: 300px; border: 1px solid gray"></div>

JavaScript

var ns = $.wijmo.wijspread;
ns.TreeNodeCellType = (function (_super) {
    __extends(TreeNodeCellType, _super);

    function TreeNodeCellType() {
        _super.call(this);
    }
    TreeNodeCellType.prototype.paint = function (ctx, value, x, y, w, h, style, options) {
        var level = options.sheet.rowRangeGroup.getLevel(options.row);
        var hoffset = (level + 2) * 12;
        x += hoffset;
        w -= hoffset;
        $.wijmo.wijspread.CustomCellType.prototype.paint.apply(this, arguments);

        if (options.row == options.sheet.getRowCount() - 1) return; //last row
        var nlevel = options.sheet.rowRangeGroup.getLevel(options.row + 1);

        if (nlevel > level) {
            var collapsed = options.sheet.rowRangeGroup.isCollapsed(options.row + 1);
            x--;
            y += h / 2 - 3;
            ctx.save();
            ctx.fillStyle = "black";
            ctx.beginPath();
            if (collapsed) {
                ctx.moveTo(x - 5, y);
                ctx.lineTo(x, y + 3);
                ctx.lineTo(x - 5, y + 6);
            } else {
                ctx.moveTo(x, y);
                ctx.lineTo(x, y + 5);
                ctx.lineTo(x - 5, y + 5);
            }
            ctx.fill();
            ctx.restore();
        }
    };
    // override getHitInfo to allow cell type get mouse messages
    TreeNodeCellType.prototype.getHitInfo = function (x, y, cellStyle, cellRect, context) {
        return {
            x: x,
            y: y,
            row: context.row,
            col: context.col,
            cellStyle: cellStyle,
            cellRect: cellRect,
            sheetArea: context.sheetArea
        };
    }
    TreeNodeCellType.prototype.processMouseDown = function (hitinfo) {
        var level = hitinfo.sheet.rowRangeGroup.getLevel(hitinfo.row);
        var hoffset = (level + 2) * 12 + hitinfo.cellRect.x;
        if (hitinfo.x < hoffset && hitinfo.x > hoffset - 10) {
            var collapsed =...