有哪些信誉好的足球投注网站- 1、本文档共8页，可阅读全部内容。
- 2、有哪些信誉好的足球投注网站（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
- 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
查看更多
SpreadJS表格控件实现双色文字单元格教程
SpreadJS 表格控件实现双色文字单元格教程
SpreadJS 表格控件像 Excel 一样 ，拥有类似下面的特征：
中规中矩的单行列头
每行元素都是平级显示
一个单元格只使用一种颜色
最下端可以选择不同的工作表
垂直和水平滚动条
Excel 传统外观风格
今天，就来颠覆下大家的印象。
先来看下下图：
咦？这张图哪里有电子表格的影子，完全是个TreeGrid 嘛！
木有滚动条，木有多工作表，列头有两行还带合并。不仅有层次分明的树形结构，
而且一个单元格里面既有节点三角形、文件夹或文件形状的图片，还有描述文字。
更神奇的是，“任务编码“一列，居然还有黑红两色文字同时显示。这个拥有双
色文字单元格的 TreeGrid 就是 SpreadJS 变身而来。
下面我们就来揭秘 SpreadJS 究竟是如何变身的：
1. 外观
SpreadJS 不仅支持 JQueryUI 默认的 25 种外观，而且还支持随意定制各部分
的颜色。
这么多酷炫的外观，需要写多少代码实现呢？什么？！一句代码足矣：
1: link href=Reference/jquery-ui-1.10.0/themes/smoothness/j
query-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, opacit
y) {
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 bord
er line, - 1 is for begining from the left side of the right dou
ble 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 =
文档评论（0）