请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

Lynn.Dou 讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2021-8-30 11:47  /   查看:1848  /  回复:0
本帖最后由 Lynn.Dou 于 2021-8-30 13:54 编辑

接上文:组件版设计器结合jsLPSolver实现规划求解 - part1
本篇文章主要介绍以下两部分:
1、如何在组件版设计器中自定义工具栏按钮:规划求解
2、如何实现点击按钮后出现的规划求解弹窗

1、自定义工具栏按钮
实现思路是修改designer的config结构,这里我们新增加一个ribbon,并在ribbon中添加一个button。
(大家可以根据自己的需要设置规划求解按钮的位置)
代码如下:
  1. //excelSolver方法(点击按钮后执行的操作)
  2. function excelSolver(context) {
  3. }
  4. //新增 操作 选项卡
  5. const operateRibbon = {
  6.     id: "operate",
  7.     text: "操作",
  8.     buttonGroups: []
  9. };
  10. //定义点击 规划求解 按钮时对应的命令
  11. const operateCommands = {
  12.     solver: {
  13.         title: "规划求解",
  14.         commandName: "solver",
  15.         execute: async (context) => {
  16.             excelSolver(context);
  17.         },
  18.         iconClass: "ribbon-button-upload"
  19.     }
  20. }
  21. //新增 规划求解 按钮
  22. const operateConfig = {
  23.     label: "规划求解",
  24.     thumbnailClass: "ribbon-thumbnail-spreadsettings",
  25.     commandGroup: {
  26.         children: [{
  27.             direction: "vertical",
  28.             commands: ["solver"]
  29.         }]
  30.     }
  31. }
  32. //在ribbon中加入自定义的命令和按钮
  33. operateRibbon.buttonGroups.push(operateConfig);
  34. // 导出 designerConfig
  35. const designerConfig = JSON.parse(JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig));
  36. //将命令注册到config的commandMap属性上
  37. designerConfig.commandMap = {};
  38. Object.assign(designerConfig.commandMap, operateCommands);
  39. //将新增选项卡添加到designerConfig中
  40. designerConfig.ribbon.push(operateRibbon);
  41. //将designerConfig作为参数初始化designer
  42. var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), designerConfig);
复制代码

这样在工具栏就新建一个ribbon和按钮了。
如下图:
image.png909544067.png
2、定义点击按钮的弹窗
1) 在 excelSolver 方法中执行打开弹窗命令
  1. function excelSolver(context) {
  2.     var option = {};
  3.     GC.Spread.Sheets.Designer.showDialog("newTab", option, (result) => {

  4.     })
  5. }
复制代码
2)定义弹窗结构
  1. var CreateId = {
  2.     type: "FlexContainer",
  3.     margin: "10px",
  4.     children: [{
  5.             type: "FlexContainer",
  6.             children: [
  7.                 {
  8.                     type: "TextBlock",
  9.                     text: "设置目标:",
  10.                     margin: "5px"
  11.                 },
  12.                 {
  13.                     type: "ColumnSet",
  14.                     children: [
  15.                         {
  16.                             type: "RangeSelect",
  17.                             needSheetName: false,
  18.                             absoluteReference: true,
  19.                             bindingPath: "target1",
  20.                             style: "width: 300px",
  21.                             margin: "5px 15px"
  22.                         }

  23.                     ]
  24.                 },
  25.                 {
  26.                     type: "ColumnSet",
  27.                     children: [
  28.                         {
  29.                             type: "RangeSelect",
  30.                             needSheetName: false,
  31.                             absoluteReference: true,
  32.                             bindingPath: "target2",
  33.                             style: "width: 300px",
  34.                             margin: "5px 15px"
  35.                         }
  36.                     ]
  37.                 },
  38.                 {
  39.                     type: "ColumnSet",
  40.                     children: [
  41.                         {
  42.                             type: "TextBlock",
  43.                             text: "到",
  44.                             margin: "5px"
  45.                         },
  46.                         {
  47.                             type: "ColumnSet",
  48.                             children: [{
  49.                                 type: "Radio",
  50.                                 bindingPath: "radioValue",
  51.                                 columnCount: 2,
  52.                                 margin: "5px",
  53.                                 items: [{
  54.                                         text: '最大值',
  55.                                         value: 'max'
  56.                                     },
  57.                                     {
  58.                                         text: '最小值',
  59.                                         value: 'min'
  60.                                     }
  61.                                 ]
  62.                             }]
  63.                         }
  64.                     ]
  65.                 },
  66.                 {
  67.                     type: "TextBlock",
  68.                     text: "可变因素:",
  69.                     margin: "5px"
  70.                 },
  71.                 {
  72.                     type: "ColumnSet",
  73.                     children: [
  74.                         {
  75.                             type: "RangeSelect",
  76.                             needSheetName: false,
  77.                             absoluteReference: true,
  78.                             bindingPath: "optimalQuantity1",
  79.                             style: "width: 120px",
  80.                             margin: "5px 15px"
  81.                         },
  82.                         {
  83.                             type: "RangeSelect",
  84.                             needSheetName: false,
  85.                             absoluteReference: true,
  86.                             bindingPath: "person1",
  87.                             style: "width: 120px",
  88.                             margin: "5px"
  89.                         },
  90.                         {
  91.                             type: "RangeSelect",
  92.                             needSheetName: false,
  93.                             absoluteReference: true,
  94.                             bindingPath: "cost1",
  95.                             style: "width: 120px",
  96.                             margin: "5px"
  97.                         }
  98.                     ]
  99.                 },
  100.                 {
  101.                     type: "ColumnSet",
  102.                     children: [
  103.                         {
  104.                             type: "RangeSelect",
  105.                             needSheetName: false,
  106.                             absoluteReference: true,
  107.                             bindingPath: "optimalQuantity2",
  108.                             style: "width: 120px",
  109.                             margin: "5px 15px"
  110.                            
  111.                         },
  112.                         {
  113.                             type: "RangeSelect",
  114.                             needSheetName: false,
  115.                             absoluteReference: true,
  116.                             bindingPath: "person2",
  117.                             style: "width: 120px",
  118.                             margin: "5px"
  119.                         },
  120.                         {
  121.                             type: "RangeSelect",
  122.                             needSheetName: false,
  123.                             absoluteReference: true,
  124.                             bindingPath: "cost2",
  125.                             style: "width: 120px",
  126.                             margin: "5px"
  127.                         }
  128.                     ]
  129.                 },
  130.                 {
  131.                     type: "TextBlock",
  132.                     text: "约束条件:",
  133.                     margin: "5px"
  134.                 },
  135.                 {
  136.                     type: "ColumnSet",
  137.                     children: [
  138.                         {
  139.                             type: "TextBlock",
  140.                             text: "总数量",
  141.                             //bindingPath: "quantityAll",
  142.                             style: "width: 50px",
  143.                             margin: "5px 15px"
  144.                         },
  145.                         {
  146.                             type: "ListComboEditor",
  147.                             bindingPath: "compare1",
  148.                             style: "width: 120px",
  149.                             margin: "5px",
  150.                             items: [
  151.                                 {
  152.                                     text: "<=",
  153.                                     value: "max"
  154.                                 },
  155.                                 {
  156.                                     text: ">=",
  157.                                     value: "min"
  158.                                 },
  159.                                 {
  160.                                     text: "=",
  161.                                     value: "equal"
  162.                                 }
  163.                             ]
  164.                         },
  165.                         {
  166.                             type: "TextEditor",
  167.                             bindingPath: "quantityNumber",
  168.                             style: "width: 120px",
  169.                             margin: "5px"
  170.                         }
  171.                     ]
  172.                 },
  173.                 {
  174.                     type: "ColumnSet",
  175.                     children: [
  176.                         {
  177.                             type: "TextBlock",
  178.                             text: "总人数",
  179.                             //bindingPath: "personAll",
  180.                             style: "width: 50px",
  181.                             margin: "5px 15px"
  182.                         },
  183.                         {
  184.                             type: "ListComboEditor",
  185.                             bindingPath: "compare2",
  186.                             style: "width: 120px",
  187.                             margin: "5px",
  188.                             items: [
  189.                                 {
  190.                                     text: "<=",
  191.                                     value: "max"
  192.                                 },
  193.                                 {
  194.                                     text: ">=",
  195.                                     value: "min"
  196.                                 },
  197.                                 {
  198.                                     text: "=",
  199.                                     value: "equal"
  200.                                 }
  201.                             ]
  202.                         },
  203.                         {
  204.                             type: "TextEditor",
  205.                             bindingPath: "personNumber",
  206.                             style: "width: 120px",
  207.                             margin: "5px"
  208.                         }
  209.                     ]
  210.                 },
  211.                 {
  212.                     type: "ColumnSet",
  213.                     children: [
  214.                         {
  215.                             type: "TextBlock",
  216.                             text: "总费用",
  217.                             //bindingPath: "costAll",
  218.                             style: "width: 50px",
  219.                             margin: "5px 15px"
  220.                         },
  221.                         {
  222.                             type: "ListComboEditor",
  223.                             bindingPath: "compare3",
  224.                             style: "width: 120px",
  225.                             margin: "5px",
  226.                             items: [
  227.                                 {
  228.                                     text: "<=",
  229.                                     value: "max"
  230.                                 },
  231.                                 {
  232.                                     text: ">=",
  233.                                     value: "min"
  234.                                 },
  235.                                 {
  236.                                     text: "=",
  237.                                     value: "equal"
  238.                                 }
  239.                             ]
  240.                         },
  241.                         {
  242.                             type: "TextEditor",
  243.                             bindingPath: "costNumber",
  244.                             style: "width: 120px",
  245.                             margin: "5px"
  246.                         }
  247.                     ]
  248.                 }
  249.             ]
  250.         }

  251.     ]
  252. }
复制代码


  1. //规划求解dialog
  2. const richSheetTagTemplate = {
  3.     title: "规划求解",
  4.     content: [{
  5.         type: "TabControl",
  6.         width: 500,
  7.         height: 500,
  8.         bindingPath: "dialogOption",
  9.         children: [{
  10.             key: "solverTab",
  11.             text: "规划求解",
  12.             children: [
  13.                 CreateId
  14.             ]
  15.         }]
  16.     }]
  17. }
复制代码
  1. //注册模版
  2. GC.Spread.Sheets.Designer.registerTemplate("newTab", richSheetTagTemplate);
复制代码
此时点击规划求解按钮,弹出弹窗如下图:

image.png722136535.png

在下篇文章:
组件版设计器结合jsLPSolver实现规划求解 - part3
中我们将介绍如何将jsLPSolver与弹窗结合,实现规划求解。

(注:完整demo见part3)





0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部