SpreadJS自定义单元格系列-列头排序单元格

点击列头排序是表格中常用功能，但是在Excle中并没有这样的功能。如果想在SpreadJS中实现这个功能，我们只需要自定义ColumnHeaderCellType即可。

下面我们说明下完整步骤

1. 定义SortHearderCellType，继承ColumnHeaderCellType

function SortHearderCellType() {
}
SortHearderCellType.prototype = new spreadNS.ColumnHeaderCellType();

2. 获取用户点击

在用户点击Header右侧时相应，并将排序状态存储在HeaderCell的Tag中。然后使用sortRange方法对sheet中数据进行排序。如果需要设置只对一列排序，可以在这里更改。

SortHearderCellType.prototype.getHitInfo = function (x, y, cellStyle, cellRect, context) {
    var hitInfo = { x: x, y: y, row: context.row, col: context.col, cellRect: cellRect, sheetArea: context.sheetArea, sheet: context.sheet };
    if (x > cellRect.x + cellRect.width - cellRect.height) {
        hitInfo.isReservedLocation = true;
    }
    return hitInfo;
};
SortHearderCellType.prototype.processMouseUp = function (hitInfo) {
    if (hitInfo.isReservedLocation) {
    var sheet = hitInfo.sheet, sheetArea = hitInfo.sheetArea,
        row = hitInfo.row, col = hitInfo.col;
    var tag = sheet.getTag(row, col, sheetArea) || {};
    
    tag.ascending = !tag.ascending;
    sheet.setTag(row, col, tag, sheetArea);
    sheet.sortRange(0, 0, -1, -1, true, [{ index: col, ascending: tag.ascending }]);
    }
};

3. 绘制排序箭头

从tag中获取点击排序状态，根据状态绘制排序三角。

SortHearderCellType.prototype.paint = function (ctx, value, x, y, width, height, style, context) {
    spreadNS.ColumnHeaderCellType.prototype.paint.apply(this, arguments);
    var margin = 3;
    var gap = 1;
    var color = "red";
    var tag = context.sheet.getTag(context.row, context.col, context.sheetArea);
    ctx.save();
    if(!tag || tag && tag.ascending){
        ctx.beginPath();
        ctx.fillStyle = color;
        ctx.moveTo(x+width-height+margin,y+height/2-gap );
        ctx.lineTo(x+width-margin,y+height/2-gap);
        ctx.lineTo(x+width-height/2,y + margin);
        ctx.closePath();
        ctx.fill();
    }
    if(!tag || tag && !tag.ascending){   
        ctx.beginPath();
        ctx.fillStyle = color;
        ctx.moveTo(x+width-height+margin,y+height/2+gap);
        ctx.lineTo(x+width-margin,y+height/2+gap);
        ctx.lineTo(x+width-height/2,y+height - margin);
        ctx.closePath();
        ctx.fill();
    }
    ctx.restore();
    
};

4.设置Header

只需要使用setCellType方法设置新建SortHearderCellType到您想要的列即可。

sheet.setCellType(0, 2, new SortHearderCellType(), spreadNS.SheetArea.colHeader);

您可以在RunJS上直接查看演示效果，http://runjs.cn/detail/eykpb4ai

更多资源

SpreadJS中文学习指南：http://demo.grapecity.com.cn/SpreadJS/TutorialSample/#/samples

SpreadJS在线英文产品文档：http://sphelp.grapecity.com/webhelp/SpreadJSWeb/webframe.html#welcome.html

如果您对SpreadJS产品感兴趣，可以到官方网站下载试用：/developer/spreadjs

如果你有疑问，可以到GCDN论坛获得技术支持：http://gcdn.grapecity.com.cn