设计器如何实现自定义横向菜单列表？

收藏

在SpreadJS的设计器中可以在Ribbon上选择不同的表格样式：

image.png968579101.png

有用户提出如何能自定义实现一个跟这种菜单类似的效果呢？

这就需要用到list来实现了，具体的参考代码如下：

window.onload = function () {
let designerConfig = JSON.parse(
JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig)
);
designerConfig.commandMap = {
menu: {
text: "菜单",
title: "菜单",
bigButton: "=ribbonHeight>toolbarHeight",
commandName: "menu",
direction: '=IF(ribbonHeight<toolbarHeight,"horizontal","vertical")',
dropdownListItemType: "menuitemradio",
// enableContext: "",
iconClass: "ribbon-button-formattable",
},
list: {
commandName: "list",
// enableContext: "",
execute(context, propertyName, checked) {
console.log("execute");
console.log(context);
console.log(propertyName);
console.log(checked);
},
getState(context, propertyName) {
console.log("getState");
console.log(context);
console.log(propertyName);
},
listContent: [
{
commandName: "list",
groupItems: [
{
iconClass: "table-format-light0",
iconHeight: 48,
iconWidth: 64,
tip: "Item1",
value: "light0",
},
{
iconClass: "table-format-light0",
iconHeight: 48,
iconWidth: 64,
tip: "Item1",
value: "light0",
},
{
iconClass: "table-format-light1",
iconHeight: 48,
iconWidth: 64,
tip: "Item1",
value: "light0",
},
{
iconClass: "table-format-light1",
iconHeight: 48,
iconWidth: 64,
tip: "Item1",
value: "light0",
},
{
iconClass: "table-format-light2",
iconHeight: 48,
iconWidth: 64,
tip: "Item1",
value: "light0",
},
{
iconClass: "table-format-light2",
iconHeight: 48,
iconWidth: 64,
tip: "Item1",
value: "light0",
},
{
iconClass: "table-format-light3",
iconHeight: 48,
iconWidth: 64,
tip: "Item1",
value: "light0",
},
{
iconClass: "table-format-light3",
iconHeight: 48,
iconWidth: 64,
tip: "Item1",
value: "light0",
},
],
groupName: "List One",
wrap: false,
},
],
maxWidth: 550,
type: "listContent",
},
};
designerConfig.ribbon[0].buttonGroups.push({
label: "测试",
thumbnailClass: "ribbon-thumbnail-styles",
commandGroup: {
children: [
{
children: ["list"],
command: "menu",
dropdownMaxWidth: 550,
type: "dropdown",
},
],
},
});
let designer = new GC.Spread.Sheets.Designer.Designer(
"gc-designer-container",
designerConfig
);
let spread = designer.getWorkbook();
let sheet = spread.getActiveSheet();
};

复制代码

相似的效果都可以采用list来实现。

		自动登录	找回密码
密码			立即注册

设计器如何实现自定义横向菜单列表？

0 个回复

SpreadJS 认证

SpreadJS 高级认证