概述
本 Demo 展示了如何创建工作流列表下拉菜单，实现工作流状态的选择和转换。Demo 中定义了 6 个工作流状态（新建、打开、进行中、已解决、重新打开、已关闭），并通过 transitions 属性配置了每个状态允许转换的目标状态。
实现思路
创建样式对象，配置下拉按钮
定义工作流选项，包含状态值和转换规则
将样式应用到目标单元格
使用命令管理器打开工作流列表（也可通过点击下拉按钮打开）
代码解析
配置下拉按钮
通过 cellButtons 属性为单元格添加下拉按钮。imageType 设置为下拉图标，command 指定为 "openWorkflowList" 用于打开工作流列表，useButtonStyle 设置为 true 使用按钮样式。
定义工作流选项
dropDowns 数组配置下拉菜单的类型和选项。type 设置为 workflowList 表示工作流列表。每个工作流项包含：
value：状态名称
transitions：允许转换到的目标状态索引数组（数字表示 items 数组中的索引）
例如，"New" (索引 0) 的 transitions: [1] 表示只能转换到 "Open" (索引 1)。"Open" 的 transitions: [0, 2, 3, 5] 表示可以转换到 "New"、"In Progress"、"Resolved"、"Reopened"。
应用样式并打开列表
将样式应用到单元格 (5, 4)，并使用命令管理器直接打开工作流列表。execute 方法接收命令名称和参数对象，参数包括行索引、列索引和工作表名称。
运行效果
单元格 (5, 4) 显示带有下拉按钮的工作流列表
点击下拉按钮或运行命令后，弹出工作流状态选择面板
当单元格已有状态值时，下拉列表只显示该状态允许转换的目标状态
选择状态后，单元格值更新为所选状态
API 参考
setStyle 方法
row：行索引
col：列索引
value：样式对象
sheetArea：可选，工作表区域
IWorkFlowItem 接口
openWorkflowList 命令
用于在指定单元格打开工作流列表选择器。
var spreadNS = GC.Spread.Sheets;
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
initSpread(spread);
};
function initSpread(spread) {
var sheet = spread.getSheet(0);
sheet.suspendPaint();
// -------------------- WorkFlow ---------------------
let style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "openWorkflowList",
useButtonStyle: true,
}
];
style.dropDowns = [
{
type: GC.Spread.Sheets.DropDownType.workflowList,
option: {
items: [
{ value: "New", transitions: [1] },
{ value: "Open",transitions: [0,2,3,5] },
{ value: "In Progress", transitions: [1, 3, 5] },
{ value: "Resolved", transitions: [5, 4] },
{ value: "Reopened",transitions: [5, 3, 2] },
{ value: "Closed", transitions: [4] },
]
}
}
];
sheet.setText(4, 4, "Workflow List");
sheet.setStyle(5, 4, style);
sheet.setColumnWidth(4, 110, GC.Spread.Sheets.SheetArea.viewport);
sheet.resumePaint();
spread.commandManager().execute({cmd:"openWorkflowList",row:5,col:4,sheetName:"Sheet1"});
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta name="spreadjs culture" content="zh-cn" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js"
type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" style="width:100%; height: 100%"></div>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
