自定义组件版编辑器——“插入函数”按钮添加自定义公式

有小伙伴想要在设计器的插入函数模板中添加自己的自定义函数。那么我们今天就来讲一下这部分应该如何实现。



首先，我们先自定义一个函数，如何自定义函数可以参考学习指南这个demo
https://demo.grapecity.com.cn/sp ... om-functions/purejs

1. function FactorialFunction() {
   
2.                         this.name = "FACTORIAL";
   
3.                         this.maxArgs = 1;
   
4.                         this.minArgs = 1;
   
5.                         this.description = function () {
   
6.                                 return (
   
7.                                         {
   
8.                                                 description: "菲波那切数列",
   
9.                                                 parameters: [
   
10.                                                         {
    
11.                                                                 name: 'number01',
    
12.                                                                 repeatable: false,
    
13.                                                                 optional: false
    
14.                                                         }
    
15.                                                 ]
    
16.                                         }
    
17.                                 )
    
18.                         }
    
19.                 }
    
20.                 FactorialFunction.prototype = new GC.Spread.CalcEngine.Functions.Function();
    
21.                 FactorialFunction.prototype.evaluate = function (arg) {
    
22.                         var result = 1;
    
23.                         if (arguments.length === 1 && !isNaN(parseInt(arg))) {
    
24.                                 for (var i = 1; i <= arg; i++) {
    
25.                                         result = i * result;
    
26.                                 }
    
27.                                 return result;
    
28.                         }
    
29.                         return "#VALUE!";
    
30.                 };
    
31. 
    
32.                 var factorial = new FactorialFunction();
    
33.                 GC.Spread.CalcEngine.Functions.defineGlobalCustomFunction("FACTORIAL", new FactorialFunction());
    
34.                
    
35.                 spread.addCustomFunction(factorial)

复制代码

定义完这个函数后，我们需要找这个弹框对应的template。对应的是GC.Spread.Sheets.Designer.TemplateNames.InsertFunctionDialogTemplate。


我们要添加函数的位置在这个数组中


于是我们可以通过bindingPath找到这个位置，并且添加我们的自定义函数对象

1. function customFontFamilyInFormatDialogTemplate(templateNode) {
   
2.                         
   
3.                         if (templateNode.bindingPath && templateNode.bindingPath === 'functionDesc.allFunction' && templateNode.items) {
   
4. 
   
5.                                 templateNode.items.unshift({ text: "FACTORIAL", value: "FACTORIAL" })
   
6. 
   
7.                                 return;
   
8.                         }
   
9.                         let nodes = templateNode.content || templateNode.children;
   
10.                         if (nodes && nodes instanceof Array) {
    
11.                                 nodes.forEach((subNode) => customFontFamilyInFormatDialogTemplate(subNode));
    
12.                         }
    
13.                 }

复制代码

最后把这个template注册回去

1. GC.Spread.Sheets.Designer.registerTemplate(GC.Spread.Sheets.Designer.TemplateNames.InsertFunctionDialogTemplate, template);

复制代码

可以看到已经成功加上了

下载附件即可查看完整demo