SpreadJS变！变！变！

SpreadJS给用户的印象一直都是像Excel一样的电子表格控件。

直观感受就是类似下面的特征：

1. 中规中矩的单行列头
2. 每行元素都是平级显示
3. 一个单元格只使用一种颜色
4. 最下端可以选择不同的工作表
5. 垂直和水平滚动条
6. Excel传统外观风格

今天，小编就要来颠覆大家的印象。

先来看下下图：

咦？这张图哪里有电子表格的影子，完全是个TreeGrid嘛！

木有滚动条，木有多工作表，列头有两行还带合并。不仅有层次分明的树形结构，而且一个单元格里面既有节点三角形、文件夹或文件形状的图片，还有描述文字。更神奇的是，“任务编码“一列，居然还有黑红两色文字同时显示。哪家TreeGrid有如此强大？！

嘿嘿，让小编来告诉你，这个拥有双色文字单元格的TreeGrid就是咱们的SpreadJS变身而来，您是否会惊呼：“变身能力哪家强，西安葡萄城Spread!”。咳咳……

下面我们就来揭秘SpreadJS究竟是如何变身的：

1. 外观

SpreadJS不仅支持JQueryUI默认的25种外观，而且还支持随意定制各部分的颜色哦。

这么多酷炫的外观，需要写多少代码实现呢？什么？！一句代码足矣：

  1: <link href="Reference/jquery-ui-1.10.0/themes/smoothness/jquery-ui.css" rel="stylesheet" />

2. 隐藏滚动条和单工作表显示风格

需要隐藏的滚动条和多工作表区域如下图：

实现代码如下：

  1: spread.tabStripVisible(false);
  2: spread.showHorizontalScrollbar(false);
  3: spread.showVerticalScrollbar(false);

3. 设置两行列头，并实现列头单元格的合并

希望实现的效果如下图：

实现代码如下：

  1: var h = GcSpread.Sheets.SheetArea.colHeader;
  2: sheet.setRowCount(2, h);
  3: sheet.addSpan(0, 3, 1, 3, h);
  4: sheet.setValue(0, 3, "施工图清单", h);
  5: sheet.setValue(1, 3, "数量", h);
  6: sheet.setValue(1, 4, "单价", h);
  7: sheet.setValue(1, 5, "合价", h);

4. 双色文字自定义单元格

希望实现的效果如下图：

实现核心代码如下：

  1: ColorCellType.prototype.paintText = function (ctx, value, x, y, w, h, style, options, text, conditionalForeColor, opacity) {
  2: 
  3: …
  4: 
  5: //textAlign
  6: adjX += indent;
  7: if (hAlign === ns.HorizontalAlign.center) {
  8: adjX = w / 2;
  9: textAlign = "center";
 10: } else if (hAlign === ns.HorizontalAlign.right) {
 11: adjX = w - 1 - 2; // - 2 is for the left and the right border line, - 1 is for begining from the left side of the right double line.
 12: adjX -= indent;
 13: textAlign = "right";
 14: }
 15: 
 16: if (ctx.textAlign !== textAlign) {
 17: ctx.textAlign = textAlign;
 18: }
 19: 
 20: var redString, blackString;
 21: if (text.length > 3) {
 22: redString = text.substring(text.length - 3, text.length);
 23: blackString = text.substring(0, text.length - 3);
 24: } else {
 25: redString = text;
 26: }
 27: 
 28: var redStart = x;
 29: if (blackString) {
 30: var blackWidth = ctx.measureText(blackString).width;
 31: redStart += blackWidth;
 32: if (hAlign === ns.HorizontalAlign.center) {
 33: adjX -= blackWidth / 2;
 34: } else if (hAlign === ns.HorizontalAlign.right) {
 35: adjX -= (ctx.measureText(redString).width);
 36: }
 37: 
 38: ctx.fillStyle = "black";
 39: ctx.fillText(blackString, x + adjX, y + options.lineHeight + adjY);
 40: }
 41: 
 42: ctx.fillStyle = "red";
 43: ctx.fillText(redString, redStart + adjX, y + options.lineHeight + adjY);
 44: ctx.restore();
 45: };

5. 树节点自定义单元格

希望实现的效果如下图，有展开/折叠三角标志，文件夹和文件图片，并带有描述文字。

实现核心代码如下：

  1: TreeNodeCellType.prototype.paint = function (ctx, value, x, y, w, h, style, options) {
  2: 
  3: …
  4: 
  5: if (nlevel > level) {
  6: var collapsed = options.sheet.rowRangeGroup.isCollapsed(options.row + 1);
  7: x -= imageLayoutWidth;
  8: w += imageLayoutWidth;
  9: var imageX = x + imageMagin, imageY = y + h / 2 - image.height / 2;
 10: x--;
 11: y += h / 2 - 3;
 12: ctx.save();
 13: ctx.fillStyle = "black";
 14: ctx.beginPath();
 15: 
 16: //画展开/折叠三角标志
 17: if (collapsed) {
 18: ctx.moveTo(x - 5, y);
 19: ctx.lineTo(x, y + 3);
 20: ctx.lineTo(x - 5, y + 6);
 21: } else {
 22: ctx.moveTo(x, y);
 23: ctx.lineTo(x, y + 5);
 24: ctx.lineTo(x - 5, y + 5);
 25: }
 26: 
 27: ctx.fill();
 28: ctx.restore();
 29: 
 30: //画文件夹或文件图片
 31: ctx.drawImage(image, imageX, imageY);
 32: }
 33: else {
 34: x -= imageLayoutWidth;
 35: w += imageLayoutWidth;
 36: var imageX = x + imageMagin, imageY = y + h / 2 - image.height / 2;
 37: x--;
 38: y += h / 2 - 3;
 39: ctx.save();
 40: ctx.drawImage(image, imageX, imageY);
 41: ctx.restore();
 42: }
 43: };
 44: 
 45: // override getHitInfo to allow cell type get mouse messages
 46: TreeNodeCellType.prototype.getHitInfo = function (x, y, cellStyle, cellRect, context) {
 47: return {
 48: x: x,
 49: y: y,
 50: row: context.row,
 51: col: context.col,
 52: cellStyle: cellStyle,
 53: cellRect: cellRect,
 54: sheetArea: context.sheetArea
 55: };
 56: }
 57: 
 58: TreeNodeCellType.prototype.processMouseDown = function (hitinfo) {
 59: //处理鼠标点击展开/折叠行为
 60: var level = hitinfo.sheet.rowRangeGroup.getLevel(hitinfo.row);
 61: var hoffset = (level + 2) * 12 + hitinfo.cellRect.x;
 62: if (hitinfo.x < hoffset && hitinfo.x > hoffset - 10) {
 63: var collapsed = hitinfo.sheet.rowRangeGroup.isCollapsed(hitinfo.row + 1);
 64: hitinfo.sheet.rowRangeGroup.setCollapsed(hitinfo.row, !collapsed);
 65: hitinfo.sheet.invalidateLayout();
 66: hitinfo.sheet.repaint();
 67: }
 68: };

SpreadJS变身双色文字TreeGrid, 变身完毕！

快来点击下载源代码，试试效果吧!

这就是你想要的SpreadJS，快来官网了解并下载它吧！