드롭다운은 개발자에게 특정 속성이 있는 드롭다운 메뉴를 통합 문서의 셀에 추가하는 기능을 제공합니다. 이 드롭다운 메뉴는 드롭다운 메뉴에 사용할 코드를 지정하는 것 이외에 추가 코드가 필요하지 않습니다.
이제 SpreadJS에는 8가지 드롭다운이 포함됩니다. 이것은 목록입니다.
목록을 열기 전에 셀 스타일에서 옵션 데이터를 설정해야 합니다. 다음 코드와 같이 목록 드롭다운을 사용할 수 있습니다.
또한 다른 옵션을 전달하여 조직 목록 형식을 사용자 정의할 수 있습니다. 목록 옵션 인터페이스는 다음과 같습니다.
app.js에서 위 샘플의 코드를 참조할 수 있습니다.
Customize List
돔 요소를 반환하는 함수를 사용하여 목록 항목을 사용자 지정할 수 있으며 클릭하면 콜백 함수는 값을 반환한다.
MultiSelect List
옵션을 true로 설정하여 목록을 다중 선택으로 설정할 수 있다. valueType이 default 또는 문자열인 경우 쉼표를 구분 문자로 사용한다.
var spreadNS = GC.Spread.Sheets;
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
spread.setSheetCount(2);
var sheet = spread.getSheet(0);
initSheet(sheet, false);
sheet = spread.getSheet(1);
sheet.name("multi-select list")
initSheet(sheet, true);
spread.commandManager().execute({cmd:"openList",row:3,col:4,sheetName:"Sheet1"});
};
function initSheet(sheet, multiSelect) {
sheet.suspendPaint();
// -------------------- Vertical text list ---------------------
var verticalStyle = new GC.Spread.Sheets.Style();
verticalStyle.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "openList",
useButtonStyle: true,
}
];
verticalStyle.dropDowns = [
{
type: GC.Spread.Sheets.DropDownType.list,
option: {
multiSelect: multiSelect,
items: [
{
text: 'item1',
value: 'item1'
},
{
text: 'item2',
value: 'item2'
},
{
text: 'item3',
value: 'item3'
},
{
text: 'item4',
value: 'item4'
}
],
}
}
];
sheet.setText(2, 1, "Vertical text list");
sheet.setStyle(3, 1, verticalStyle);
// -------------------- Simple Icon list ---------------------
var simpleIconListData = {
multiSelect: multiSelect,
items: [
{
text: 'item1',
value: 'item1',
icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABWUlEQVQ4T42SrUsEQRjGf68YNIsIomBSsGpSg1XQqMWPaxbBDxTdTV7bOVQ4DXa/ihZBNBsULNdE0GK4YLh/4ILwyg5zy+7c7uGkeed53t++z8wKBUtD+vll2Mrd1CWikWeVvEMNOAZ2Pe1EDHu+vw2gAZoyPbv9bOtMDJmeTKEBt8Cib/agd2JYSjytjYaMonwmX1fu6aVk6yZHwHqiCWMS8RXXyQQasAxcp0wLwICr31HeUtFWxHDjA+LR4wjx+hHDoAaUrclQ1oBvYMTpG2I4zwL2GaKLujUoVamw4wFi2KHT56XCYwZg+wKegDmEKaAP5cE2CHGchotRE8Nk2yVawAFrCBf+W2dqpSQVLnMBbopTYLMAciaGrbRW9Ce+ANMe5FUMMz44HxAyjlIDelxDE2FCIj7+BbBRQlZRl1VYk4irvFi5E7SMGlB1/8F20cV2BHR8DSf+ATHpYBEJcyFZAAAAAElFTkSuQmCC"
},
{
text: 'item2',
value: 'item2',
icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABWUlEQVQ4T42SrUsEQRjGf68YNIsIomBSsGpSg1XQqMWPaxbBDxTdTV7bOVQ4DXa/ihZBNBsULNdE0GK4YLh/4ILwyg5zy+7c7uGkeed53t++z8wKBUtD+vll2Mrd1CWikWeVvEMNOAZ2Pe1EDHu+vw2gAZoyPbv9bOtMDJmeTKEBt8Cib/agd2JYSjytjYaMonwmX1fu6aVk6yZHwHqiCWMS8RXXyQQasAxcp0wLwICr31HeUtFWxHDjA+LR4wjx+hHDoAaUrclQ1oBvYMTpG2I4zwL2GaKLujUoVamw4wFi2KHT56XCYwZg+wKegDmEKaAP5cE2CHGchotRE8Nk2yVawAFrCBf+W2dqpSQVLnMBbopTYLMAciaGrbRW9Ce+ANMe5FUMMz44HxAyjlIDelxDE2FCIj7+BbBRQlZRl1VYk4irvFi5E7SMGlB1/8F20cV2BHR8DSf+ATHpYBEJcyFZAAAAAElFTkSuQmCC"
},
{
text: 'item3',
value: 'item3',
icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABWUlEQVQ4T42SrUsEQRjGf68YNIsIomBSsGpSg1XQqMWPaxbBDxTdTV7bOVQ4DXa/ihZBNBsULNdE0GK4YLh/4ILwyg5zy+7c7uGkeed53t++z8wKBUtD+vll2Mrd1CWikWeVvEMNOAZ2Pe1EDHu+vw2gAZoyPbv9bOtMDJmeTKEBt8Cib/agd2JYSjytjYaMonwmX1fu6aVk6yZHwHqiCWMS8RXXyQQasAxcp0wLwICr31HeUtFWxHDjA+LR4wjx+hHDoAaUrclQ1oBvYMTpG2I4zwL2GaKLujUoVamw4wFi2KHT56XCYwZg+wKegDmEKaAP5cE2CHGchotRE8Nk2yVawAFrCBf+W2dqpSQVLnMBbopTYLMAciaGrbRW9Ce+ANMe5FUMMz44HxAyjlIDelxDE2FCIj7+BbBRQlZRl1VYk4irvFi5E7SMGlB1/8F20cV2BHR8DSf+ATHpYBEJcyFZAAAAAElFTkSuQmCC"
},
{
text: 'item4',
value: 'item4',
icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABWUlEQVQ4T42SrUsEQRjGf68YNIsIomBSsGpSg1XQqMWPaxbBDxTdTV7bOVQ4DXa/ihZBNBsULNdE0GK4YLh/4ILwyg5zy+7c7uGkeed53t++z8wKBUtD+vll2Mrd1CWikWeVvEMNOAZ2Pe1EDHu+vw2gAZoyPbv9bOtMDJmeTKEBt8Cib/agd2JYSjytjYaMonwmX1fu6aVk6yZHwHqiCWMS8RXXyQQasAxcp0wLwICr31HeUtFWxHDjA+LR4wjx+hHDoAaUrclQ1oBvYMTpG2I4zwL2GaKLujUoVamw4wFi2KHT56XCYwZg+wKegDmEKaAP5cE2CHGchotRE8Nk2yVawAFrCBf+W2dqpSQVLnMBbopTYLMAciaGrbRW9Ce+ANMe5FUMMz44HxAyjlIDelxDE2FCIj7+BbBRQlZRl1VYk4irvFi5E7SMGlB1/8F20cV2BHR8DSf+ATHpYBEJcyFZAAAAAElFTkSuQmCC"
}
]
};
var simpleIconListStyle = new GC.Spread.Sheets.Style();
simpleIconListStyle.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "openList",
useButtonStyle: true,
}
];
simpleIconListStyle.dropDowns =[
{
type: GC.Spread.Sheets.DropDownType.list,
option: simpleIconListData
}
];
sheet.setText(2, 4, "Vertical text list");
sheet.setStyle(3, 4, simpleIconListStyle);
// -------------------- Vertical group list ---------------------
var groupListData= {
multiSelect: multiSelect,
items: [
{
text: 'group 1',
layout: { displayAs: GC.Spread.Sheets.LayoutDisplayAs.inline },
items: [
{
text: 'item1',
value: 'item1'
},
{
text: 'item2',
value: 'item2'
}
],
},
{
text: 'group 2',
layout: { displayAs: GC.Spread.Sheets.LayoutDisplayAs.inline },
items: [
{
text: 'item3',
value: 'item3'
},
{
text: 'item4',
value: 'item4'
}
]
}
]
};
var groupListStyle = new GC.Spread.Sheets.Style();
groupListStyle.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "openList",
useButtonStyle: true,
}
];
groupListStyle.dropDowns =[
{
type: GC.Spread.Sheets.DropDownType.list,
option: groupListData
}
];
sheet.setText(2, 8, "Vertical group list");
sheet.setStyle(3, 8, groupListStyle);
// -------------------- Vertical cascade group list ---------------------
var cascadeListData= {
multiSelect: multiSelect,
items: [
{
text: 'item1',
value: 'item1',
layout: {displayAs: GC.Spread.Sheets.LayoutDisplayAs.popup},
items: [
{
text: 'sub-item1',
value: 'sub-item1'
},
{
text: 'sub-item2',
value: 'sub-item2'
}
]
},
{
text: 'item2',
value: 'item2',
},
{
text: 'item3',
value: 'item3',
},
{
text: 'item4',
value: 'item4',
}
]
};
var verticalCascadeListStyle = new GC.Spread.Sheets.Style();
verticalCascadeListStyle.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "openList",
useButtonStyle: true,
}
];
verticalCascadeListStyle.dropDowns =[
{
type: GC.Spread.Sheets.DropDownType.list,
option: cascadeListData
}
];
sheet.setText(2, 12, "Vertical cascade group list");
sheet.setStyle(3, 12, verticalCascadeListStyle);
// -------------------- Group cascade list ---------------------
var groupCascadeListData= {
multiSelect: multiSelect,
items: [
{
text: 'group 1',
layout: { displayAs: GC.Spread.Sheets.LayoutDisplayAs.inline },
items: [
{
text: 'item1',
value: 'item1',
layout: { displayAs: GC.Spread.Sheets.LayoutDisplayAs.popup },
items: [
{
text: 'sub-item1',
value: 'sub-item1'
},
{
text: 'sub-item2',
value: 'sub-item2'
}
]
},
{
text: 'item2',
value: 'item2',
}
]
},
{
text: 'group 2',
layout: { displayAs: GC.Spread.Sheets.LayoutDisplayAs.inline },
items: [
{
text: 'item3',
value: 'item3',
},
{
text: 'item4',
value: 'item4',
}
]
}
]
};
var groupCascadeListStyle = new GC.Spread.Sheets.Style();
groupCascadeListStyle.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "openList",
useButtonStyle: true,
}
];
groupCascadeListStyle.dropDowns =[
{
type: GC.Spread.Sheets.DropDownType.list,
option: groupCascadeListData
}
];
sheet.setText(11, 1, "Group cascade list");
sheet.setStyle(12, 1, groupCascadeListStyle);
// -------------------- Tree list ---------------------
var treeListData = {
multiSelect: multiSelect,
items: [
{
text: 'group 1',
layout: { displayAs: GC.Spread.Sheets.LayoutDisplayAs.tree, collapsible: true },
items: [
{
text: 'sub group 1-1',
layout: { displayAs: GC.Spread.Sheets.LayoutDisplayAs.tree, collapsible: true },
items: [
{
text: 'sub group item1',
value: 'subGroupItem1'
},
{
text: 'sub group item2',
value: 'subGroupItem2'
}
]
},
{
text: 'sub group 1-2',
value: 'subGroup12'
}
],
},
{
text: 'group 2',
layout: { displayAs: GC.Spread.Sheets.LayoutDisplayAs.tree},
items: [
{
text: 'sub group 2-1',
layout: { displayAs: GC.Spread.Sheets.LayoutDisplayAs.tree},
items: [
{
text: 'sub group item3',
value: 'subGroupItem3'
},
{
text: 'sub group item4',
value: 'subGroupItem5'
}
]
},
{
text: 'sub group 2-2',
value: 'subGroup22'
}
],
},
]
};
var treeListStyle = new GC.Spread.Sheets.Style();
treeListStyle.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "openList",
useButtonStyle: true,
}
];
treeListStyle.dropDowns =[
{
type: GC.Spread.Sheets.DropDownType.list,
option: treeListData
}
];
sheet.setText(11, 4, "Vertical tree list");
sheet.setStyle(12, 4, treeListStyle);
// -------------------- Horizontal group list ---------------------
var horizontalGroupListData = {
multiSelect: multiSelect,
layout: {direction: GC.Spread.Sheets.LayoutDirection.horizontal},
items: [
{
layout: {displayAs: GC.Spread.Sheets.LayoutDisplayAs.inline, direction: GC.Spread.Sheets.LayoutDirection.horizontal},
text: 'group 1',
items: [
{
text: 'item1',
value: 'item1'
},
{
text: 'item2',
value: 'item2'
}
],
},
{
text: 'group 2',
layout: {displayAs: GC.Spread.Sheets.LayoutDisplayAs.inline},
items: [
{
text: 'item3',
value: 'item3'
},
{
text: 'item4',
value: 'item4'
}
]
}
]
};
var horizontalGroupListStyle = new GC.Spread.Sheets.Style();
horizontalGroupListStyle.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "openList",
useButtonStyle: true,
}
];
horizontalGroupListStyle.dropDowns =[
{
type: GC.Spread.Sheets.DropDownType.list,
option: horizontalGroupListData
}
];
sheet.setText(11, 8, "Vertical tree list");
sheet.setStyle(12, 8, horizontalGroupListStyle);
// -------------------- Custom list ---------------------
// This part just shows how to custom a list. (not a real color selector)
function generateStandardColors() {
return generateColors(10, 0, 65526)
}
function generateThemeColors() {
return generateColors(10, 0, 16777215)
}
function colorClicked(event) {
var target = event.target;
if (target && target.classList.contains("custom-color-block")) {
var color = target.style.backgroundColor;
return color;
}
return null;
}
function generateColors(count, start, stop) {
function pad(pad, str, padLeft) {
if (typeof str === "undefined") {
return pad;
}
if (padLeft) {
return (pad + str).slice(-pad.length);
} else {
return (str + pad).substring(0, pad.length);
}
}
var div = document.createElement("div");
div.style.width = "140px";
var step = (stop - start) / count | 0;
for (var i = start, index = 0; i < stop && index < count; i += step, index++) {
var item = document.createElement("div");
item.style.backgroundColor = "#" + pad('000000', i.toString(16), true);
item.style.width = '12px';
item.style.height = '12px';
item.style.border = '1px solid #c3c3c3';
item.classList.add("custom-color-block");
div.appendChild(item);
}
return div;
}
var colorListData= {
multiSelect: multiSelect,
onItemSelected: colorClicked,
items: [
{
text: 'Theme Colors',
layout: { direction: GC.Spread.Sheets.LayoutDirection.horizontal, displayAs: GC.Spread.Sheets.LayoutDisplayAs.inline },
items: generateThemeColors
},
{
text: 'Standard Colors',
layout: { direction: GC.Spread.Sheets.LayoutDirection.horizontal, displayAs: GC.Spread.Sheets.LayoutDisplayAs.inline },
items: generateStandardColors
},
{
text: 'No Color',
value: 'nocolor'
}, {
text: 'More Colors...',
value: 'morecolors',
icon: 'more-color-icon'
}
]
};
var customStyle = new GC.Spread.Sheets.Style();
customStyle.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "openList",
useButtonStyle: true,
}
];
customStyle.dropDowns =[
{
type: GC.Spread.Sheets.DropDownType.list,
option: colorListData
}
];
sheet.setText(11, 12, "Custom list");
sheet.setStyle(12, 12, customStyle);
sheet.resumePaint();
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta name="spreadjs culture" content="ko-kr"/>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/ko/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@grapecity/spread-sheets-resources-ko/dist/gc.spread.sheets.resources.ko.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;
}