自定义单元格如何实现搜索功能

登录

本帖最后由 Ellia.Duan 于 2025-12-9 09:21 编辑

调研编号：GCNSJS-28110

需求：
1、我封装了一个多选功能的自定义单元格，如下图：

2、单元格的值是字符串数组，如: [id1, id2]
3、单元格显示文本是我重写paint实现的
4、现在需要改单元格在Ctrl + F搜索栏中通过选项名称搜索到，如图：

5、应该如何实现？

Matthew.Xue · Matthew.Xue

如果您的选项值最终是通过formatter的形式展现的，而非通过单元格的paint方法去绘制，那么就可以通过现有的搜索框搜到：

function customCell() {}
customCell.prototype = new GC.Spread.Sheets.CellTypes.Base()
// 此示例创建一个自定义格式化程序。
function MyFormatter(format, cultureName) {
GC.Spread.Formatter.FormatterBase.apply(this, arguments);
this.typeName = "MyFormatter";
this.formatter = format;
}
MyFormatter.prototype = new GC.Spread.Formatter.FormatterBase();
MyFormatter.prototype.format = function (obj, options) {
if (!obj) {
return ""
} else if(Array.isArray(obj)) {
return obj.join(",")
}
};
sheet.setCellType(1, 1, new customCell())
sheet.setValue(1, 1, ["选项1","选项2"])
sheet.setFormatter(1, 1, new MyFormatter())

复制代码

清风沐阳 · 清风沐阳

本帖最后由清风沐阳于 2025-12-1 09:11 编辑

请问使用TS怎么写自定义formatte？,你们的ts声明中constructor还有两个参数：

还有，我的自定义单元格一定是需要通过单元格的paint方法去绘制的，我的单元格下拉框除了需要展示所选值的label之外，右侧还需绘制“展开箭头”

Matthew.Xue · Matthew.Xue

清风沐阳发表于 2025-12-1 08:58
请问使用TS怎么写自定义formatte？,你们的ts声明中constructor还有两个参数：

还有，我的自定义单元格一 ...

抱歉，是我没有讲清楚，您可以使用paint方法，但是要同时保证对单元格设置了formatter
我这里也绘制了一个蓝色横线，但是仍然可以正确搜索到：

customCell.prototype.paint = function (ctx, value, x, y, w, h, style, context) {
console.log("paint", arguments)
ctx.strokeStyle = "blue"
ctx.moveTo(x + w, y + h / 2)
ctx.lineTo(x + w / 2, y + h / 2)
ctx.stroke()
GC.Spread.Sheets.CellTypes.Text.prototype.paint.apply(this, arguments)
}

复制代码

至于formatterBase的构造函数，其实按照我之前附上的代码写就好，如果ts中有报错，忽略一下就好了。

清风沐阳 · 清风沐阳

你看我这样写对吗？似乎有点问题，当实例化 new SelectCellFormatter()我又传什么呢？直接忽略？

清风沐阳 · 清风沐阳

本帖最后由清风沐阳于 2025-12-1 11:20 编辑

以上方案似乎起效了，但是我发现查找选项配置默认使用“公式”查找范围，如果按照自定义formatter来实现查找，则必须手动将查找范围切换成“值”才能查找到结果，如图：

站在最终用户的角度肯定希望默认都能够查询直观看见的结果，这能否实现呢？或者如何将查找范围配置成默认按照"值"进行查询呢？

Matthew.Xue · Matthew.Xue

清风沐阳发表于 2025-12-1 10:54
你看我这样写对吗？似乎有点问题，当实例化 new SelectCellFormatter()我又传什么呢？直接忽略？

是的，创建实例的时候不传任何参数，如果有ts报错，用注释忽略一下报错。
我这边在搜索的时候，不管选择“值”还是“公式”，都可以搜得到，是否可以上传一个您的demo，我帮您基于demo看一下？

清风沐阳 · 清风沐阳

本帖最后由清风沐阳于 2025-12-1 13:56 编辑

试试这样的固定写法呢？
另外，从封装角度上考虑，我的自定义单元格class包含了下拉选项列表options（对象数组[{label: '选项', value: 'xxx_id'}]），那么自定义的MyFormatter中只能在format方法中拿到value（选项id列表['xxx_id1', 'xxx_id2']），而似乎拿不到单元格的options，我的format函数中context打印是undefined

Matthew.Xue · Matthew.Xue

清风沐阳发表于 2025-12-1 13:44
试试这样的固定写法呢？
另外，从封装角度上考虑，我的自定义单元格class包含了下拉选项列表options（对象 ...

换成固定值之后的确就不可以了，关于如何在搜索框打开后直接让搜索类型变成“值”，我目前还不确定是否能做到，还需要调研一下。
最后，如果您想要搜索候选框的值，目前的确做不到，搜索只能是基于format之后的值，而它是不会考虑候选框的值的，要实现的话只能是自己写搜索框了。

清风沐阳 · 清风沐阳

你误会了，我说的不是搜索候选框列表，我的意思是自定义单元格是下拉选择框，它的选项列表数据结构是[{label: 'xx', value: 'xx_id'}]，它的值是['xx_id1', 'xx_id2']，那么我即便是自定义formatter，在MyFormatter中，按照format方法结构：

format(value: any, format: GC.Spread.Formatter.GeneralFormatter | string, formattedData?: GC.Spread.Sheets.FormattedData, context?: any): string

复制代码

，我就应该在format中返回自定义下拉单元格所选项目的label拼接，而我只能在format中拿到当前单元格的值，我还需要拿单元格的选项列表，通过值过滤出所选列表项，再拼接出所选的label，但是我发现在format中我拿不到当前单元格类型实例，因为其中的context是undefined，我原本以为可以从context中拿到sheet、row、col，然后就可以拿到cellType,然而并不能
还得麻烦你们从我自定义Formatter、自定义单元格类型的封装角度考虑，因为是工程化，必须将这两个自定义部分拆分成不同模块

		自动登录	找回密码
密码			立即注册

[处理中] 自定义单元格如何实现搜索功能

19 个回复

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源