List

One of the cell drop-down controls in SpreadJS is list. This drop-down can be defined in JavaScript code with the style properties. This style can be applied to cells in the workbook, creating a list with the defined items in that cell. The different types of list drop-downs are shown in the spreadsheet below.

<p>Dropdowns provides developer the ability to add a drop down menu with specific properties to cells in a workbook. These drop down menus don't require any extra code other than simply specifying which one to use for the drop down menu. </p> <p>SpreadJS now have 8 different kinds of dropdowns, this is List.</p> <p>Before opening the list, you need to set the options data in cell's style. You can use List dropdown like the following code :</p> <pre><code class="hljs js language-js"> <span class="hljs-comment">// The way of click the dropdown icon to open list. </span> <span class="hljs-keyword">var</span> style = <span class="hljs-keyword">new</span> GC.Spread.Sheets.Style(); style.cellButtons = [ { <span class="hljs-attr">imageType</span>: GC.Spread.Sheets.ButtonImageType.dropdown, <span class="hljs-attr">command</span>: <span class="hljs-string">"openList"</span>, <span class="hljs-attr">useButtonStyle</span>: <span class="hljs-literal">true</span>, } ]; style.dropDowns = [ { <span class="hljs-attr">type</span>: GC.Spread.Sheets.DropDownType.list, <span class="hljs-attr">option</span>: { <span class="hljs-attr">items</span>: [ { <span class="hljs-attr">text</span>: <span class="hljs-string">'item1'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'item1'</span> }, { <span class="hljs-attr">text</span>: <span class="hljs-string">'item2'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'item2'</span> }, { <span class="hljs-attr">text</span>: <span class="hljs-string">'item3'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'item3'</span> }, { <span class="hljs-attr">text</span>: <span class="hljs-string">'item4'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'item4'</span> } ], } } ]; sheet.setText(<span class="hljs-number">2</span>, <span class="hljs-number">1</span>, <span class="hljs-string">"Vertical text list"</span>); sheet.setStyle(<span class="hljs-number">3</span>, <span class="hljs-number">1</span>, style); <span class="hljs-comment">// The way open list with command rather then clicking the dropdown button.</span> spread.commandManager().execute({<span class="hljs-attr">cmd</span>:<span class="hljs-string">"openList"</span>,<span class="hljs-attr">row</span>:<span class="hljs-number">3</span>,<span class="hljs-attr">col</span>:<span class="hljs-number">1</span>,<span class="hljs-attr">sheetName</span>:<span class="hljs-string">"Sheet1"</span>}); </code></pre> <p>You also can customize the organizational form of list through passing different option. The list options interface like this:</p> <pre><code class="hljs js language-js"><span class="hljs-keyword">export</span> interface IListItem { text?: string; value?: string; icon?: string; } <span class="hljs-keyword">export</span> interface IListLayout { direction?: GC.Spread.Sheets.LayoutDirection; displayAs?: GC.Spread.Sheets.LayoutDisplayAs; collapsible?: boolean; } <span class="hljs-keyword">export</span> interface IListOption { text?: string; layout?: IListLayout; multiSelect?: boolean; valueType?: GC.Spread.Sheets.DropdownListValue; items: IListItem[] | IListOption[] | <span class="hljs-function">(<span class="hljs-params">(</span>) =&gt;</span> HTMLElement); <span class="hljs-comment">// a function returns a DOM element</span> onItemSelected?: <span class="hljs-function">(<span class="hljs-params">MouseEvent</span>) =&gt;</span> string; <span class="hljs-comment">// used when items or sub-items is (() =&gt; HTMLElement)</span> } </code></pre> <p>You can refer the above sample's code in <code>app.js</code>.</p> <p><strong>Customize List</strong></p> <p>You can customize the list items with a function returns the dom element and a callback function return the value when clicked.</p> <p><strong>MultiSelect List</strong></p> <p>You can set the list to multi-select by set the options to true. It will use comma as separator character if the valueType is default or string.</p>
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 charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.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; }