点击列头排序是表格中常用功能,但是在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