实现高亮搜索

问题：自定义单元格如何实现高亮搜索？

本文介绍如何实现单元格中高亮显示搜索框中的内容，效果如下图：

输入要搜索的内容，可以单元格中高亮显示搜索到的文字，使用 SpreadJS 的自定义单元格可以实现这种效果。

实现思路

下面我们说明下实现步骤：

1、定义一个自定义单元格类型：`HighlightSearchCellType`，继承自 `GC.Spread.Sheets.CellTypes.Text()`

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

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

HighlightSearchCellType.prototype.paintValue = function(
    ctx,
    value,
    x,
    y,
    w,
    h,
    style,
    options
) {
    var text = this.format(value, style.formatter);
    if (!text) {
        return;
    }
    ctx.save();
    ctx.rect(x, y, w, h);
    ctx.clip();
    ctx.beginPath();
    ctx.textAlign = "left";
    ctx.textBaseline = "alphabetic";

    if (style.font) {
        ctx.font = style.font;
    }
    if (style.foreColor) {
        ctx.fillStyle = style.foreColor;
    }
    var originalStyle = ctx.fillStyle;
    var fontSize = options.fontInfo.fontSize;
    var lineHeight = options.lineHeight;
    var baselineOffset = fontSize > 8 ? Math.floor((fontSize - 8) / 5 + 2) : 1;
    var lineOffset = lineHeight / 2 - fontSize / 2 + baselineOffset;
    var adjY = lineHeight - lineOffset + 2;
    var blocks = this._generateSearchBlock(text, options.sheet.searchText);
    if (blocks) {
        for (var i = 0; i < blocks.length; i++) {
            var block = blocks[i];
            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);
    }

    ctx.restore();
};

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();
};

完整Demo可以参考这个链接。

作者: GrapeCity China | 审核：AlexZ | 更新时间：2023.09.27

实现高亮搜索

问题：自定义单元格如何实现高亮搜索？

实现思路

1、定义一个自定义单元格类型：HighlightSearchCellType，继承自 GC.Spread.Sheets.CellTypes.Text()

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

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

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

1、定义一个自定义单元格类型：`HighlightSearchCellType`，继承自 `GC.Spread.Sheets.CellTypes.Text()`

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

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