概述
本 Demo 展示了如何在单元格中配置颜色选择器下拉菜单，包括使用默认配置和自定义颜色分组两种方式。用户可以点击单元格上的下拉按钮打开颜色选择器，选择颜色后自动填充到单元格中。
实现思路
创建默认颜色选择器：通过 cellButtons 配置下拉按钮，设置 command 为 "openColorPicker"
创建自定义颜色选择器：定义颜色分组，通过 dropDowns 属性配置颜色块大小和颜色组
使用命令管理器编程打开颜色选择器
代码解析
配置默认颜色选择器
通过 cellButtons 属性为单元格添加下拉按钮。imageType 设置为 dropdown 表示下拉按钮样式，command 设置为 "openColorPicker" 表示点击按钮时打开颜色选择器。使用默认配置时，无需设置 dropDowns 属性。
配置自定义颜色选择器
自定义颜色选择器通过 dropDowns 属性配置。每个颜色组包含 name（组名称）和 colors（二维字符串数组，每个字符串为十六进制颜色值）。colorBlockSize 控制颜色块的大小。
使用命令打开颜色选择器
除了点击下拉按钮，也可以通过 commandManager().execute() 方法编程打开颜色选择器，指定单元格位置和工作表名称。
运行效果
表格中显示两个示例：默认颜色选择器（第 5 行第 3 列）和自定义颜色选择器（第 5 行第 11 列）
点击单元格右侧的下拉按钮，弹出颜色选择面板
默认颜色选择器显示 SpreadJS 预设的颜色面板
自定义颜色选择器显示三个颜色组，每个颜色块大小为 20 像素
选择颜色后，颜色的十六进制代码自动填充到单元格中
Demo 启动时自动打开默认颜色选择器
API 参考
cellButtons 属性
imageType：按钮图标类型，使用 GC.Spread.Sheets.ButtonImageType.dropdown 表示下拉按钮
command：点击按钮时执行的命令，"openColorPicker" 表示打开颜色选择器
useButtonStyle：是否使用按钮样式
dropDowns 属性
type：下拉菜单类型，使用 GC.Spread.Sheets.DropDownType.colorPicker 表示颜色选择器
option：颜色选择器配置选项
colorBlockSize：颜色块大小（像素）
groups：颜色分组数组
IColorPickerGroup 接口
name：颜色组名称
colors：二维字符串数组，每个元素为十六进制颜色值（如 "#ffffff"）
needScaleColor：是否生成刻度色组（可选）
var spreadNS = GC.Spread.Sheets;
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
initSpread(spread);
};
function initSpread(spread) {
// -------------------- Default Calculator ---------------------
var sheet = spread.getSheet(0);
sheet.suspendPaint();
var style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "openColorPicker",
useButtonStyle: true,
}
];
sheet.setText(4, 3, "Default Color Picker");
sheet.setStyle(5, 3, style);
// -------------------- Custom Calculator ---------------------
var colorGroup1 = {
name: 'group1',
colors: [
['#ffffff', '#000000', '#e7e6e6', '#44546a', '#5b9bd5', '#ed7d31', '#a5a5a5', '#ffc000', '#4472c4', '#70ad47'],
['#f2f2f2', '#7f7f7f', '#d1d0d0', '#d6dde4', '#dfebf6', '#fae6d7', '#ececec', '#fdf3ce', '#dae3f2', '#e3efda']
]
};
var colorGroup2 = {
name: 'group2',
colors: [
['#d8d8d8', '#595959', '#aeadac', '#aeb9c8', '#c0d7ed', '#f4ccaf', '#dadada', '#fce69d', '#b6c7e6', '#c8dfb5'],
['#bfbfbf', '#3f3f3f', '#777171', '#8797ae', '#9fc3e4', '#f0b186', '#c8c8c8', '#fbd96c', '#91acda', '#add091']
]
};
var colorGroup3 = {
name: 'group3',
colors: [
['#a5a5a5', '#252525', '#3c3939', '#344051', '#3977b6', '#c35a15', '#7c7c7c', '#bd9014', '#355696', '#5a8339'],
['#7f7f7f', '#0b0b0b', '#171615', '#222a35', '#264f79', '#823c0d', '#525252', '#7e600a', '#223a64', '#3b5825']
]
};
var customStyle = new GC.Spread.Sheets.Style();
customStyle.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "openColorPicker",
useButtonStyle: true,
}
];
customStyle.dropDowns = [
{
type: GC.Spread.Sheets.DropDownType.colorPicker,
option: {
colorBlockSize: 20,
groups: [
colorGroup1,
colorGroup2,
colorGroup3
]
}
}
];
sheet.setText(4, 11, "Custom Color Picker");
sheet.setStyle(5, 11, customStyle);
sheet.resumePaint();
spread.commandManager().execute({cmd:"openColorPicker",row:5,col:3,sheetName:"Sheet1"});
// spread.commandManager().execute({cmd:"openColorPicker",row:5,col:11,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;
}
