SpreadJS表格控件（类Excel）实现自定义单元格——高亮搜索

    SpreadJS是一款类Excel的纯前端表格控件，可以与现在主流的框架VUE、Angular、React轻松集成。本文介绍如何实现单元格中高亮显示搜索框中的内容，效果如下图：

输入要搜索的内容，可以单元格中高亮显示搜索到的文字，使用SpreadJS的自定义单元格可以实现这种效果。
下面我们说明下实现步骤：
1.定义一个自定义单元格类型：HighlightSearchCellType，继承GC.Spread.Sheets.CellTypes.Text()

1. function HighlightSearchCellType() {}
   
2.         HighlightSearchCellType.prototype = new GC.Spread.Sheets.CellTypes.Text();

复制代码

2.实现paintValue方法，根据搜索框的值正则匹配单元格中的数据，匹配到的内容高亮显示

3.绑定单元格时设置ColumnInfo的cellType为HighlightSearchCellType

1.   var columnInfo = [
   
2.                 { name: "LastName", displayName: "中文名", cellType: new HighlightSearchCellType(), size:80 },
   
3.                 { name: "FirstName", displayName: "英文名", cellType: new HighlightSearchCellType(), size: 80 },
   
4.                 { name: "Phone", displayName: "电话", cellType: new HighlightSearchCellType(), size: 180 },
   
5.                 { name: "Email", displayName: "邮箱", cellType: new HighlightSearchCellType(), size: 200 },
   
6.             ];
   
7.   sheet.bindColumns(columnInfo);

复制代码

4.监听键盘抬起事件，重新获取搜索框中的值，刷新页面

1.   document.getElementById("searchTxt").onkeyup = (function() {
   
2.         sheet.searchText = document.getElementById("searchTxt").value;
   
3.         spread.repaint();
   
4.         });

复制代码

自定义单元格更多资料
SpreadJS中文学习指南：https://demo.grapecity.com.cn/SpreadJS/TutorialSample/#/demos/customCellType
完整代码可下载附件Demo

请问如何使查找到的单元格背景高亮

可以加上这两句代码在原来的代码中

1.                 ctx.fillStyle = "yellow";
   
2.                 ctx.fillRect(x, y, w, h);

复制代码

修改后的代码

1.             if (blocks) {
   
2.                 ctx.fillStyle = "yellow";
   
3.                 ctx.fillRect(x, y, w, h);
   
4.                 for (var i = 0; i < blocks.length; i++) {
   
5.                     var block = blocks[i];
   
6.                     if (block.highlight) {
   
7.                         ctx.fillStyle = "red";
   
8.                     } else {
   
9.                         ctx.fillStyle = originalStyle;
   
10.                     }
    
11.                     ctx.fillText(block.text, x + 2, y + adjY);
    
12.                     x += ctx.measureText(block.text).width;
    
13.                 }
    
14. 
    
15.             } else {
    
16.                 ctx.fillText(text, x + 2, y + adjY);
    
17.             }

复制代码