【14.0.10】【显示单元格的bindingPath相关问题】

收藏

在设计表格时，需要把单元格的bindingPath显示出来，类似这种效果
image.png237529601.png

第一个问题

一开始我用的自定义单元格重写paint方法，核心代码如下

BindPathType.prototype = new spreadNS.CellTypes.Base();
BindPathType.prototype.paint = function(ctx, value, x, y, w, h, style, context) {
const { sheet } = context;
if (sheet) {
const bindPath = sheet.getBindingPath(context.row, context.col);
if (bindPath) {
style.foreColor = 'blue';
spreadNS.CellTypes.Base.prototype.paint.apply(this, [
ctx,
`{{${bindPath}}}`,
x,
y,
w,
h,
style,
context,
]);
} else {
spreadNS.CellTypes.Base.prototype.paint.apply(this, arguments);
}
}
};

复制代码

显示效果很好，但是所有单元格都不能编辑了，请问有解决办法吗？

第二个问题

然后我又用了第二种方法，重写了单元格的getText，核心代码如下

GC.Spread.Sheets.CellTypes.Text.prototype.getText = function(value, context) {
const bp = context.sheet.getBindingPath(context.row, context.col);
if (bp) {
return `{{${bp}}}`;
}
return originalTextCellTypeGetTextLogic.apply(this, arguments);
};

复制代码

这样单元格可以编辑了，但是bindingPath字体颜色是默认黑色，这个方案是否有类似getText的方法重写style？

Clark.Pan · Clark.Pan

您好，你说的这个学习指南上刚好是有demo实例的，参考这个：
https://demo.grapecity.com.cn/sp ... able-binding/purejs
image.png167346190.png

可以看上面app.js中的实现。

scodi · scodi

这个例子我看过，情况不太一样。
示例里是已经知道这个单元格是绑定了数据，所以用了

sheet.getCell(11, 4).bindingPath("receiverCustomer.name").cellType(bindingPathCellType);

复制代码

但是我是导入一个ssjson，这个ssjson里已经包含bindingPath，所以我事先并不知道哪个单元格可以用bindingPathCellType。

scodi · scodi

而且我也不能对所有单元格都用bindingPathCellType，因为这个示例里的bindingPathCellType是继承的Text，但实际情况有些单元格并不是Text

Clark.Pan · Clark.Pan

如果是这样的话有一个方案，就是重写text类型的paint方法，在paint方法中获取该单元格上的绑定信息，最终绘制成"[bindingpath]"这样的内容。但这就有一个问题，如果这么绘制那么单元格上如果是有绑定结果就没办法显示了。
SpreadJS的在线表格编辑器中是这么处理的，当点击模板这个按钮的时候所有的绑定信息会显示出来。当该按钮取消点击之后，对应的单元格会重绘为真是的value。您也可以参考这样的逻辑，在paint方法中再加上类似的一个判断即可。

scodi · scodi

这个方案感觉挺靠谱，我试试，谢谢了

Clark.Pan · Clark.Pan

好的，关于这个主题有什么问题您可以在这里接着问

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

[已处理] 【14.0.10】【显示单元格的bindingPath相关问题】

6 个回复

讲师达人

悬赏达人

微信认证勋章

SpreadJS 认证

SpreadJS 高级认证

元老葡萄