切片器设置

切片器拥有以下多种属性来满足你的不同需求,它们是:

disableResizingAndMoving: 当 'disableResizingAndMoving' 为 true 时, 无法通过鼠标来改变切片器位置和大小,但是切片器依然可以通过鼠标来筛选数据。 isLocked: 当表单未被保护时, 切片器的 'isLocked'属性不起作用。当表单被保护时并且切片器 'isLocked' 为 true 时,切片器无法被鼠标选中,此时,切片器也不能通过鼠标来筛选数据。 fixPosition: 当 'fixPosition' 为 true 时,切片器的位置不会因为滚动,行列可见性,行列高宽改变,行列移动等改变自己的位置。 sortState: 表明切片器中数据排序的状态。类型为 GC.Spread.Sheets.SortState。默认值为GC.Spread.Sheets.SortState.ascending。 dynamicMove and dynamicSize: 当表单的行列宽度改变时,切片器的位置行为会因这两个属性不同而不同。 随着单元格移动及改变大小: 'dynamicMove' 为 true 并且 'dynamicSize' 为 true。 随着单元格移动但不改变大小: dynamicMove' 为 true 并且 'dynamicSize' 为 false。 不随着单元格移动且不改变大小: 'dynamicMove' 为 false 并且 'dynamicSize' 为 false。 style: Spread.Sheets支持14种内置切片器样式。你可以使用这些内置样式来改变切片器的外观: 切片器默认样式是 GC.Spread.Sheets.Slicers.SlicerStyles.light1().
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss")); spread.suspendPaint(); var sheet = spread.getActiveSheet(); var dataColumns = ["Name", "City", "Birthday", "Sex", "Weight", "Height"]; var data = [ ["Bob", "NewYork", "1968/6/8", "man", "80", "180"], ["Betty", "NewYork", "1972/7/3", "woman", "72", "168"], ["Gary", "NewYork", "1964/3/2", "man", "71", "179"], ["Hunk", "Washington", "1972/8/8", "man", "80", "171"], ["Cherry", "Washington", "1986/2/2", "woman", "58", "161"], ["Eva", "Washington", "1993/2/15", "woman", "71", "180"]]; sheet.tables.addFromDataSource("table1", 1, 1, data); sheet.getRange(-1, 1, -1, 6).width(80); var table = sheet.tables.findByName("table1"); table.setColumnName(0, dataColumns[0]); table.setColumnName(1, dataColumns[1]); table.setColumnName(2, dataColumns[2]); table.setColumnName(3, dataColumns[3]); table.setColumnName(4, dataColumns[4]); table.setColumnName(5, dataColumns[5]); var slicer1 = sheet.slicers.add("slicer1", "table1", "Height"); slicer1.position(new GC.Spread.Sheets.Point(100, 180)); bindSlicerEvent(spread); spread.resumePaint(); _disableInput(); document.getElementById('protect_sheet').disabled = false; clearSlicerSetting(); }; function bindSlicerEvent(spread) { spread.bind(GC.Spread.Sheets.Events.SlicerChanged, function (event, args) { var sheet = args.sheet; var slicer = args.slicer; if (!slicer) { return; } var propertyName = args.propertyName; if (propertyName === "isSelected") { if (slicer.isSelected()) { _activeInput() initSlicerSetting(sheet, slicer); } else { _disableInput(); document.getElementById('protect_sheet').disabled = false; } } }); var sheet = spread.getActiveSheet(); // protect sheet document.getElementById('protect_sheet').onchange = function (e) { sheet.options.isProtected = e.target.checked; }; // slicer sort state document.getElementById('sort_state').onchange = function (e) { setSlicerProperty({sheet: sheet}, "sortState", e.target.value); }; // lock slicer document.getElementById('lock_slicer').onchange = function (e) { setSlicerProperty({sheet: sheet}, "isLocked", e.target.checked); }; // slicer fixed position document.getElementById('fix_position').onchange = function (e) { setSlicerProperty({sheet: sheet}, "fixedPosition", e.target.checked); }; // slicer dynamic move and dynamic size document.getElementById('slicer_move_size').onchange = function (e) { setSlicerProperty({sheet: sheet}, "moveAndSize", e.target.checked); }; document.getElementById('slicer_move_no_size').onchange = function (e) { setSlicerProperty({sheet: sheet}, "moveAndNoSize", e.target.checked); }; document.getElementById('slicer_no_move_size').onchange = function (e) { setSlicerProperty({sheet: sheet}, "noMoveAndSize", e.target.checked); }; document.getElementById('slicer_style').onchange = function (e) { var slicerStyle = null; switch (document.getElementById('slicer_style').value) { case "light1": slicerStyle = GC.Spread.Sheets.Slicers.SlicerStyles.light1(); break; case "light2": slicerStyle = GC.Spread.Sheets.Slicers.SlicerStyles.light2(); break; case "light3": slicerStyle = GC.Spread.Sheets.Slicers.SlicerStyles.light3(); break; case "light4": slicerStyle = GC.Spread.Sheets.Slicers.SlicerStyles.light4(); break; case "light5": slicerStyle = GC.Spread.Sheets.Slicers.SlicerStyles.light5(); break; case "light6": slicerStyle = GC.Spread.Sheets.Slicers.SlicerStyles.light6(); break; case "other1": slicerStyle = GC.Spread.Sheets.Slicers.SlicerStyles.other1(); break; case "other2": slicerStyle = GC.Spread.Sheets.Slicers.SlicerStyles.other2(); break; case "dark1": slicerStyle = GC.Spread.Sheets.Slicers.SlicerStyles.dark1(); break; case "dark2": slicerStyle = GC.Spread.Sheets.Slicers.SlicerStyles.dark2(); break; case "dark3": slicerStyle = GC.Spread.Sheets.Slicers.SlicerStyles.dark3(); break; case "dark4": slicerStyle = GC.Spread.Sheets.Slicers.SlicerStyles.dark4(); break; case "dark5": slicerStyle = GC.Spread.Sheets.Slicers.SlicerStyles.dark5(); break; case "dark6": slicerStyle = GC.Spread.Sheets.Slicers.SlicerStyles.dark6(); break; } setSlicerProperty({sheet: sheet}, "style", slicerStyle); }; } function setSlicerProperty(data, property, value) { console.log(data, property, value) var sheet = data && data.sheet; if (!needChangeSlicer(sheet)) { return; } var selectedSlicers = getSelectedSlicers(sheet); for (var item in selectedSlicers) { var slicer = selectedSlicers[item]; switch (property) { case "sortState": slicer.sortState(GC.Spread.Sheets.SortState[value]); break; case "isLocked": slicer.isLocked(value); break; case "fixedPosition": slicer.fixedPosition(value); break; case "moveAndSize": slicer.dynamicMove(true); slicer.dynamicSize(true); break; case "moveAndNoSize": slicer.dynamicMove(true); slicer.dynamicSize(false); break; case "noMoveAndSize": slicer.dynamicMove(false); slicer.dynamicSize(false); break; case "style": slicer.style(value); break; } } } function initSlicerSetting(sheet, slicer) { document.getElementById('sort_state').value = slicer.sortState() === 1 ? "ascending" :(slicer.sortState() === 2 ? "descending" : ""); document.getElementById('protect_sheet').checked = sheet.isProtected; document.getElementById('lock_slicer').checked = slicer.isLocked(); document.getElementById('fix_position').checked = slicer.fixedPosition(); var dynamicMove = slicer.dynamicMove(), dynamicSize = slicer.dynamicSize(); if (!dynamicMove) { document.getElementById('slicer_no_move_size').checked = true; } if (dynamicMove && !dynamicSize) { document.getElementById('slicer_move_no_size').checked = true; } if (dynamicMove && dynamicSize) { document.getElementById('slicer_move_size').checked = true; } } function clearSlicerSetting() { document.getElementById('sort_state').value = 'ascending'; document.getElementById('protect_sheet').checked = false; document.getElementById('lock_slicer').checked = true; document.getElementById('fix_position').checked = false; document.getElementById('slicer_move_size').checked = true; } function getSelectedSlicers(sheet) { if (!sheet) { return null; } var slicers = sheet.slicers.all(); if (!slicers || _isEmptyObject(slicers)) { return null; } var selectedSlicers = []; for (var item in slicers) { var slicer = slicers[item]; if (slicer.isSelected()) { selectedSlicers.push(slicer); } } return selectedSlicers; } function needChangeSlicer(sheet) { if (!sheet) { return false; } var selectedSlicers = getSelectedSlicers(sheet); if (!selectedSlicers || selectedSlicers.length === 0) { return false; } return true; } function _disableInput() { var inputs = document.querySelectorAll('.option-group input, .option-group select'); for (var inputIndex = 0; inputIndex < inputs.length; inputIndex++) { inputs[inputIndex].disabled = "disabled"; } } function _activeInput() { var inputs = document.querySelectorAll('.option-group input, .option-group select'); for (var inputIndex = 0; inputIndex < inputs.length; inputIndex++) { inputs[inputIndex].disabled = false; } } function _isEmptyObject(obj) { var name; for (name in obj) { return false; } return true; }
<!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/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/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" class="sample-spreadsheets"></div> <div class="options-container"> <p>Select the slicer and then change the options.</p> <div class="option-group"> <label for="sort_state">Sort State:</label> <select id="sort_state"> <option value="none">none</option> <option value="ascending">ascending</option> <option value="descending">descending</option> </select> </div> <div class="option-group"> <label for="slicer_style">Built-in Styles:</label> <select id="slicer_style"> <option value="light1">Light1</option> <option value="light2">Light2</option> <option value="light3">Light3</option> <option value="light4">Light4</option> <option value="light5">Light5</option> <option value="light6">Light6</option> <option value="other1">Other1</option> <option value="other2">Other2</option> <option value="dark1">Dark1</option> <option value="dark2">Dark2</option> <option value="dark3">Dark3</option> <option value="dark4">Dark4</option> <option value="dark5">Dark5</option> <option value="dark6">Dark6</option> </select> </div> <hr> <div class="option-group"> <input type="checkbox" id="protect_sheet" /> <label for="protect_sheet">Protect Sheet</label> </div> <div class="option-group"> <input type="checkbox" id="lock_slicer" checked /> <label for="lock_slicer">Lock Slicer</label> </div> <div class="option-group"> <input type="checkbox" id="fix_position" /> <label for="fix_position">Fix Position</label> </div> <hr> <div class="option-group"> <input type="radio" name="dynamic_move_size" value="move_size" id="slicer_move_size" checked /> <label for="slicer_move_size">Move and size with cells</label> </div> <div class="option-group"> <input type="radio" name="dynamic_move_size" value="move_no_size" id="slicer_move_no_size" /> <label for="slicer_move_no_size">Move and don't size with cells</label> </div> <div class="option-group"> <input type="radio" name="dynamic_move_size" value="no_move_size" id="slicer_no_move_size" /> <label for="slicer_no_move_size">Don't move and size with cells</label> </div> </div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: calc(100% - 280px); height: 100%; overflow: auto; float: left; } .options-container { float: right; width: 280px; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } .option-group { margin-bottom: 6px; } label { display: inline-block; min-width: 90px; margin: 6px 0; } input { padding: 4px 6px; box-sizing: border-box; margin-bottom: 6px; } hr { border-color: #fff; opacity: .2; margin: 12px 0; } p { padding: 2px 10px; background-color: #F4F8EB; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }