组件版设计器结合jsLPSolver实现规划求解 - part2
本帖最后由 Lynn.Dou 于 2021-8-30 13:54 编辑接上文：组件版设计器结合jsLPSolver实现规划求解 - part1
本篇文章主要介绍以下两部分：
1、如何在组件版设计器中自定义工具栏按钮：规划求解
2、如何实现点击按钮后出现的规划求解弹窗
1、自定义工具栏按钮
实现思路是修改designer的config结构，这里我们新增加一个ribbon，并在ribbon中添加一个button。
（大家可以根据自己的需要设置规划求解按钮的位置）
代码如下：
//excelSolver方法（点击按钮后执行的操作）
function excelSolver(context) {
}
//新增 操作 选项卡
const operateRibbon = {
id: "operate",
text: "操作",
buttonGroups: []
};
//定义点击 规划求解 按钮时对应的命令
const operateCommands = {
solver: {
title: "规划求解",
commandName: "solver",
execute: async (context) => {
excelSolver(context);
},
iconClass: "ribbon-button-upload"
}
}
//新增 规划求解 按钮
const operateConfig = {
label: "规划求解",
thumbnailClass: "ribbon-thumbnail-spreadsettings",
commandGroup: {
children: [{
direction: "vertical",
commands: ["solver"]
}]
}
}
//在ribbon中加入自定义的命令和按钮
operateRibbon.buttonGroups.push(operateConfig);
// 导出 designerConfig
const designerConfig = JSON.parse(JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig));
//将命令注册到config的commandMap属性上
designerConfig.commandMap = {};
Object.assign(designerConfig.commandMap, operateCommands);
//将新增选项卡添加到designerConfig中
designerConfig.ribbon.push(operateRibbon);
//将designerConfig作为参数初始化designer
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), designerConfig);
这样在工具栏就新建一个ribbon和按钮了。
如下图：
2、定义点击按钮的弹窗
1) 在 excelSolver 方法中执行打开弹窗命令
function excelSolver(context) {
var option = {};
GC.Spread.Sheets.Designer.showDialog("newTab", option, (result) => {
})
}2）定义弹窗结构var CreateId = {
type: "FlexContainer",
margin: "10px",
children: [{
type: "FlexContainer",
children: [
{
type: "TextBlock",
text: "设置目标：",
margin: "5px"
},
{
type: "ColumnSet",
children: [
{
type: "RangeSelect",
needSheetName: false,
absoluteReference: true,
bindingPath: "target1",
style: "width: 300px",
margin: "5px 15px"
}
]
},
{
type: "ColumnSet",
children: [
{
type: "RangeSelect",
needSheetName: false,
absoluteReference: true,
bindingPath: "target2",
style: "width: 300px",
margin: "5px 15px"
}
]
},
{
type: "ColumnSet",
children: [
{
type: "TextBlock",
text: "到",
margin: "5px"
},
{
type: "ColumnSet",
children: [{
type: "Radio",
bindingPath: "radioValue",
columnCount: 2,
margin: "5px",
items: [{
text: '最大值',
value: 'max'
},
{
text: '最小值',
value: 'min'
}
]
}]
}
]
},
{
type: "TextBlock",
text: "可变因素:",
margin: "5px"
},
{
type: "ColumnSet",
children: [
{
type: "RangeSelect",
needSheetName: false,
absoluteReference: true,
bindingPath: "optimalQuantity1",
style: "width: 120px",
margin: "5px 15px"
},
{
type: "RangeSelect",
needSheetName: false,
absoluteReference: true,
bindingPath: "person1",
style: "width: 120px",
margin: "5px"
},
{
type: "RangeSelect",
needSheetName: false,
absoluteReference: true,
bindingPath: "cost1",
style: "width: 120px",
margin: "5px"
}
]
},
{
type: "ColumnSet",
children: [
{
type: "RangeSelect",
needSheetName: false,
absoluteReference: true,
bindingPath: "optimalQuantity2",
style: "width: 120px",
margin: "5px 15px"
},
{
type: "RangeSelect",
needSheetName: false,
absoluteReference: true,
bindingPath: "person2",
style: "width: 120px",
margin: "5px"
},
{
type: "RangeSelect",
needSheetName: false,
absoluteReference: true,
bindingPath: "cost2",
style: "width: 120px",
margin: "5px"
}
]
},
{
type: "TextBlock",
text: "约束条件：",
margin: "5px"
},
{
type: "ColumnSet",
children: [
{
type: "TextBlock",
text: "总数量",
//bindingPath: "quantityAll",
style: "width: 50px",
margin: "5px 15px"
},
{
type: "ListComboEditor",
bindingPath: "compare1",
style: "width: 120px",
margin: "5px",
items: [
{
text: "<=",
value: "max"
},
{
text: ">=",
value: "min"
},
{
text: "=",
value: "equal"
}
]
},
{
type: "TextEditor",
bindingPath: "quantityNumber",
style: "width: 120px",
margin: "5px"
}
]
},
{
type: "ColumnSet",
children: [
{
type: "TextBlock",
text: "总人数",
//bindingPath: "personAll",
style: "width: 50px",
margin: "5px 15px"
},
{
type: "ListComboEditor",
bindingPath: "compare2",
style: "width: 120px",
margin: "5px",
items: [
{
text: "<=",
value: "max"
},
{
text: ">=",
value: "min"
},
{
text: "=",
value: "equal"
}
]
},
{
type: "TextEditor",
bindingPath: "personNumber",
style: "width: 120px",
margin: "5px"
}
]
},
{
type: "ColumnSet",
children: [
{
type: "TextBlock",
text: "总费用",
//bindingPath: "costAll",
style: "width: 50px",
margin: "5px 15px"
},
{
type: "ListComboEditor",
bindingPath: "compare3",
style: "width: 120px",
margin: "5px",
items: [
{
text: "<=",
value: "max"
},
{
text: ">=",
value: "min"
},
{
text: "=",
value: "equal"
}
]
},
{
type: "TextEditor",
bindingPath: "costNumber",
style: "width: 120px",
margin: "5px"
}
]
}
]
}
]
}
//规划求解dialog
const richSheetTagTemplate = {
title: "规划求解",
content: [{
type: "TabControl",
width: 500,
height: 500,
bindingPath: "dialogOption",
children: [{
key: "solverTab",
text: "规划求解",
children: [
CreateId
]
}]
}]
}//注册模版
GC.Spread.Sheets.Designer.registerTemplate("newTab", richSheetTagTemplate);此时点击规划求解按钮，弹出弹窗如下图：
在下篇文章：
组件版设计器结合jsLPSolver实现规划求解 - part3
中我们将介绍如何将jsLPSolver与弹窗结合，实现规划求解。
（注：完整demo见part3）
页:
[1]