SpreadJS线条组件如何删除

Richard.Ma

请问SpreadJS线条组件如何调用api进行删除？如图，通过点击按钮删除选中的线条 image.png84926756.png

Richard.Ma · Richard.Ma

在按钮居中加入下面的代码即可实现你说的功能，遍历shapes得到选中的shape，使用remove删除即可

document.getElementById("test").onclick = function () {
var sheet = spread.getActiveSheet();
sheet.shapes.all().forEach(shape => {
if (shape.isSelected()) {
sheet.shapes.remove(shape.name());
}
});
}

复制代码

我使用chrome的移动端模式，没有复现你说的shape失去选中焦点的问题，参考下面的gif，可以顺利删除shape
aaa.gif485815123.png

Wilson.Zhang · Wilson.Zhang

您好！在SpreadJS中，线条也是一种形状，工作表中所有形状都被ShapeCollection统一管理，通过ShapeCollection:remove()便可将指定名称的形状删除，可以参考如下代码：

var shapes = sheet.shapes;
shapes.remove('shapeName');

复制代码

关于相关API，请参考官网API文档了解详情：
Worksheet:shapes()--https://demo.grapecity.com.cn/spreadjs/help/api/classes/GC.Spread.Sheets.Worksheet#shapes
ShapeCollection--https://demo.grapecity.com.cn/spreadjs/help/api/classes/GC.Spread.Sheets.Shapes.ShapeCollection

俊123 · 俊123

请问，我选中当前线条了但是我如果点击删除线条就会失焦，在没有键盘的情况下操作如何获取当前选中的这个线条的名称。 shapes.remove('？？？');

Wilson.Zhang · Wilson.Zhang

俊123 发表于 2024-8-19 16:46
请问，我选中当前线条了但是我如果点击删除线条就会失焦，在没有键盘的情况下操作如何获取当前选中的这个线 ...

您可以通过ShapeSelectionChanged事件获取被选中的线条以及其他形状，通过监听信息进一步获取线条名称，参考如下代码：

sheet.bind(GC.Spread.Sheets.Events.ShapeSelectionChanged, function(e, args) {
console.log('shape selection changed: ', e, args);
var shape = args.shape;
console.log('shape name: ', shape.name());
});

复制代码

俊123 · 俊123

还是不行，ShapeSelectionChanged代码没有触发，获取不到名称

这个添加线条的代码，看看是否有问题
function onLine() {
var spread = GC.Spread.Sheets.Designer.findControl(document.getElementById('ExcelTemplateDiv')).getWorkbook();
var index = spread.getActiveSheetIndex(); //获取控件的活动工作表索引。
var sheet = spread.getSheet(index); // 获取下标为0的工作表
console.log(index)
var command = {
canUndo: true,
execute: function(spread, options, isUndo) {
var Commands = GC.Spread.Sheets.Commands;
if (isUndo) {
Commands.undoTransaction(spread, options);
return true;
} else {
Commands.startTransaction(spread, options);
var shapeData = [{
type: 'straight',
}]
spread.suspendPaint();
// var sheet = spread.getSheet(0);
// sheet.name("ConnectorShape");
for (var i = 0; i < shapeData.length; i++) {
console.log("shapeData[i]", shapeData[i],shapeData)
initShape(sheet, shapeData[i], i); //add connectorShape
}
sheet.setValue(1, 1, 'STRAIGHT');
sheet.setValue(1, 5, 'ELBOW');
spread.options.tabStripRatio = 0.8;
spread.resumePaint();
Commands.endTransaction(spread, options);
return true;
}
}
};

var rowindex = sheet.getActiveRowIndex(); //获取选择的行信息
var selections = sheet.getSelections();
var commandManager = spread.commandManager();
commandManager.register('initShape', command);
commandManager.execute({
cmd: 'initShape',
sheetName: spread.getSheet(index).name()
});

}

//线条
function initShape(sheet, shapeData, index) {
var colors = ["#000000", "#F8B22E", "black", "#00C2D6"];
var arrowheadStyle = GC.Spread.Sheets.Shapes.ArrowheadStyle;
var arrowheadLength = GC.Spread.Sheets.Shapes.ArrowheadLength;
var arrowheadWidth = GC.Spread.Sheets.Shapes.ArrowheadWidth;
var beginX = 70,
endX = 250;
if (shapeData.type === 'elbow') {
beginX = 320;
endX = 500;
index = index % 4;
}
var connectorShape = sheet.shapes.addConnector('', GC.Spread.Sheets.Shapes.ConnectorType[shapeData.type], beginX,
80 + index * 70, endX, 50 + index * 70);
if (shapeData.beginArrowhead !== undefined) {
var connectorBeginStyle = connectorShape.style();
var beginLine = connectorBeginStyle.line;
beginLine.beginArrowheadStyle = arrowheadStyle[shapeData.beginArrowhead.style];
beginLine.beginArrowheadWidth = arrowheadWidth[shapeData.beginArrowhead.width];
beginLine.beginArrowheadLength = arrowheadLength[shapeData.beginArrowhead.length];
connectorShape.style(connectorBeginStyle);
}
if (shapeData.endArrowhead !== undefined) {
var connectorEndStyle = connectorShape.style();
var endLine = connectorEndStyle.line;
endLine.endArrowheadStyle = arrowheadStyle[shapeData.endArrowhead.style];
endLine.endArrowheadWidth = arrowheadWidth[shapeData.endArrowhead.width];
endLine.endArrowheadLength = arrowheadLength[shapeData.endArrowhead.length];
connectorShape.style(connectorEndStyle);
}
var connectorStyle = connectorShape.style();
var lineTemp = connectorStyle.line;
lineTemp.width = 3;
lineTemp.color = colors[index];
connectorShape.style(connectorStyle);
}

Wilson.Zhang · Wilson.Zhang

俊123 发表于 2024-8-19 18:05
还是不行，ShapeSelectionChanged代码没有触发，获取不到名称

这个添加线条的代码，看看是否有问题

添加线条的代码和官网教程中的一致，而且您也通过代码创建了线条，所以添加线条的代码没问题。那请您给我们提供一个能够复现问题的完整demo吧，这样有助于定位问题。

俊123 · 俊123

附件是demo

Wilson.Zhang · Wilson.Zhang

俊123 发表于 2024-8-20 15:25
附件是demo

运行您提供的文件，浏览器提示缺少文件，如下图所示：

线条名称demo缺少资源文件.png995709838.png

需要您提供一个能够复现问题的完整demo。

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

[已处理] SpreadJS线条组件如何删除

最佳答案

8 个回复

SpreadJS 认证

SpreadJS 高级认证

讲师达人

悬赏达人