在线表格编辑器添加图表时候禁用多选

收藏

原因：

目前的在线表格编辑器内部所有的添加图表实现，都是基于单独选择范围的，尚不支持多选。多选会出现添加图表结果不正确的情况（可以通过后续的操作单独调整正确）。所以基于这种情况，我们可以在用户添加图表的时候进行判断用户的选择范围个数，大于1就是多选，这个时候就要给用户予以提示。
思路：
修改添加图表的命令，在用户添加图表的时候给予提示，并阻止此次操作
image.png645578307.png

首先找到所有添加图表相关的command，然后设置到一个数组里：

var commandArray = ["insertChart","clusteredColumnChart","stackedColumnChart","stackedColumn100Chart","clusteredBarChart","stackedBarChart","stackedBar100Chart",
"treemapChart","sunburstChart","funnelChart","stockHLCChart","stockOHLCChart","stockVHLCChart","stockVOHLCChart","radarChart","radarWithMarkersChart",
"filledRadarChart","lineChart","lineStackedChart","lineStacked100Chart","lineMarkersChart","lineMarkersStackedChart","lineMarkersStacked100Chart",
"areaChart","areaStackedChart","areaStacked100Chart","pieChart","doughnutChart","comboChartColumnAndLine","comboChartColumnAndArea","comboChartColumnAndLineAxis",
"scatterChart","scatterSmoothMarkersChart","scatterSmoothChart","scatterStraightMarkersChart","scatterStraightChart","bubbleChart"];

复制代码

然后循环数组修改command中的execute方法，在方法中判断选择区域数量，并予以提示

for(var i = 0; i < commandArray.length; i++){
var insertChartCmd = GC.Spread.Sheets.Designer.getCommand(commandArray[i]);
insertChartCmd.oldExecute = insertChartCmd.execute;
insertChartCmd.execute = function (context) {
let spread = context.getWorkbook();
let sheet = spread.getActiveSheet();
let sels = sheet.getSelections();
if (sels.length > 1) {
GC.Spread.Sheets.Designer.showMessageBox("插入图表不支持多选", "插入图表", 3);
} else {
this.oldExecute.apply(this, arguments);
}
}
config.commandMap[commandArray[i]] = insertChartCmd;
}

复制代码

这里面值得注意的是由于是循环，并且方法中用了apply去执行修改前的逻辑。这个时候一定要将修改前的逻辑记在方法的一个自定义属性中接住（否则真正执行的时候因为循环已经走完了，老的逻辑就找不到了）

完整的demo请参考附件

MillionDream · MillionDream

大佬太强了！

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

在线表格编辑器添加图表时候禁用多选

1 个回复

讲师达人

悬赏达人

微信认证勋章

SpreadJS 认证

SpreadJS 高级认证

元老葡萄