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

发布时间:2016/06/27 00:06 发布者:dexteryao

返回博客中心

 

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

92F8.tmp

下面我们说明下完整步骤

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


关于葡萄城

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

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