表单控件形状-滚动条

SpreadJS支持滚动条类型的表单控件形状。

添加滚动条 设置滚动条属性 设置滚动条值 绑定事件
window.onload = function () { var workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss")); workbook.suspendPaint(); initSheet1(workbook.getSheet(0)); workbook.resumePaint(); }; function initSheet1(sheet) { sheet.setArray(0, 5, [ ["item1", 67], ["item2", 159], ["item3", 177], ["item4", 93], ["item5", 166], ["item6", 91], ["item7", 57], ["item8", 107], ["item9", 92], ["item10", 175], ]); for (var i = 1; i <= 6; i++) { sheet.setFormula(i, 0, "=INDEX(F" + i + ":F10, C1)"); sheet.setFormula(i, 1, "=INDEX(G" + i + ":G10, C1)"); } sheet.conditionalFormats.addDataBarRule( GC.Spread.Sheets.ConditionalFormatting.ScaleValueType.automin, null, GC.Spread.Sheets.ConditionalFormatting.ScaleValueType.automax, null, "green", [new GC.Spread.Sheets.Range(1, 1, 6, 1)] ); var scrollBar = sheet.shapes.addFormControl("scrollBar", GC.Spread.Sheets.Shapes.FormControlType.scrollBar, 125, 21, 30, 118); var options = scrollBar.options(); options.minValue = 1; options.maxValue = 5; options.step = 1; options.pageChange = 2; options.cellLink = "C1"; scrollBar.options(options); scrollBar.value(1); sheet.bind(GC.Spread.Sheets.Events.FormControlValueChanged, function (s, args) { console.log("value changed...", args.newValue); }); }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="spreadjs culture" content="zh-cn" /> <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$/zh/purejs/node_modules/@grapecity-software/spread-sheets-shapes/dist/gc.spread.sheets.shapes.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" class="sample-spreadsheets"></div> </div> </body> </html>
input[type="text"] { width: 200px; margin-right: 20px; } label { display: inline-block; width: 110px; } .sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: 100%; height: 100%; overflow: hidden; float: left; } label { display: block; margin-bottom: 6px; } input { padding: 4px 6px; } input[type=button] { margin-top: 6px; display: block; width:216px; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } code { border: 1px solid #000; }