SpreadJS表格控件（类Excel）实现自定义单元格——高亮搜索
本帖最后由 Fiooona 于 2019-6-14 18:09 编辑SpreadJS是一款类Excel的纯前端表格控件，可以与现在主流的框架VUE、Angular、React轻松集成。本文介绍如何实现单元格中高亮显示搜索框中的内容，效果如下图：
输入要搜索的内容，可以单元格中高亮显示搜索到的文字，使用SpreadJS的自定义单元格可以实现这种效果。
下面我们说明下实现步骤：
1.定义一个自定义单元格类型：HighlightSearchCellType，继承GC.Spread.Sheets.CellTypes.Text()
function HighlightSearchCellType() {}
HighlightSearchCellType.prototype = new GC.Spread.Sheets.CellTypes.Text();2.实现paintValue方法，根据搜索框的值正则匹配单元格中的数据，匹配到的内容高亮显示
3.绑定单元格时设置ColumnInfo的cellType为HighlightSearchCellType
var columnInfo = [
{ name: "LastName", displayName: "中文名", cellType: new HighlightSearchCellType(), size:80 },
{ name: "FirstName", displayName: "英文名", cellType: new HighlightSearchCellType(), size: 80 },
{ name: "Phone", displayName: "电话", cellType: new HighlightSearchCellType(), size: 180 },
{ name: "Email", displayName: "邮箱", cellType: new HighlightSearchCellType(), size: 200 },
];
sheet.bindColumns(columnInfo);4.监听键盘抬起事件，重新获取搜索框中的值，刷新页面
document.getElementById("searchTxt").onkeyup = (function() {
sheet.searchText = document.getElementById("searchTxt").value;
spread.repaint();
});自定义单元格更多资料
SpreadJS中文学习指南：https://demo.grapecity.com.cn/SpreadJS/TutorialSample/#/demos/customCellType
完整代码可下载附件Demo
请问如何使查找到的单元格背景高亮 可以加上这两句代码在原来的代码中
ctx.fillStyle = "yellow";
ctx.fillRect(x, y, w, h);
修改后的代码
if (blocks) {
ctx.fillStyle = "yellow";
ctx.fillRect(x, y, w, h);
for (var i = 0; i < blocks.length; i++) {
var block = blocks;
if (block.highlight) {
ctx.fillStyle = "red";
} else {
ctx.fillStyle = originalStyle;
}
ctx.fillText(block.text, x + 2, y + adjY);
x += ctx.measureText(block.text).width;
}
} else {
ctx.fillText(text, x + 2, y + adjY);
}
页:
[1]