组件版设计器自定制 - 重写插入图表

收藏

背景：
客户在使用designer的插入图表功能时，有这样的业务需求：
当用户选中两列数据时，点击插入图表按钮，此时会作出相应提示，禁止插入；
当用户选中非两列数据时，可以正常插入图表。
image.png609353637.png

思路：
插入图表按钮对应的command为 insetChart，先看看这个command是什么
image.png530771178.png

重写其中的excute方法，获取当前选择的区域信息，判断如果为2列，则弹窗提示；如果不为两列，则执行原insertChart代码逻辑。

var newInsertChartCommand = GC.Spread.Sheets.Designer.getCommand(GC.Spread.Sheets.Designer.CommandNames.InsertChart);
if (newInsertChartCommand) {
var oldExecute = newInsertChartCommand.execute;
newInsertChartCommand.execute = function (context, propertyName, args) {
//添加confirm逻辑
console.log("重写插入图表逻辑");
// 判断当前选择区域的列数
var activeSheet = context.getWorkbook().getActiveSheet();
var sel = activeSheet.getSelections()[0];
if(sel.colCount != 2) {
oldExecute.call(this, context, propertyName, args);
} else {
alert("数据为2列，禁止插入");
}
}
}

复制代码

将修改后的command重新注册

designerConfig.commandMap = {};
designerConfig.commandMap[GC.Spread.Sheets.Designer.CommandNames.InsertChart] = newInsertChartCommand;

复制代码

初始化deisgenr，来测试看看效果吧（见下方动图）

var designer = new GC.Spread.Sheets.Designer.Designer("gc-designer-container", designerConfig);

复制代码

附件为完整demo，供参考。

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

0 个回复