筛选框及筛选按钮

筛选框显示筛选的详细信息,点击筛选按钮将弹出筛选框,通过选择不同的筛选项来进行数据筛选。

filterButtonVisible 方法的获取和设置的值取决于以下参数: 无参数: 获取是否筛选按钮被显示。True 表示显示,否则表示不显示。 只有一个参数: 如果是一个数字,就用它作为列索引返回对应的列上的筛选按钮是否显示。如果是布尔类型,就将其设置给所有的筛选按钮。 有两个参数:第一个参数表示列索引,第二个参数表示次列的筛选按钮是否显示。 用法: 筛选框由按值排序区,按颜色排序区,按颜色筛选区,按值筛选区以及列表筛选区等组成。 你可以通过filterDialogVisibleInfo方法控制筛选框的显示结构. 将当前所选内容添加到筛选器: 假设你已经使用筛选器筛选过一次,然后将其中的一部分筛选掉,当你第二次筛选时选择“将当前所选内容添加到筛选器”,那么此次筛选将会将结果添加到首次筛选结果中,而不是将第一次的筛选结果清除。
var spreadNS = GC.Spread.Sheets; var salesData = [ ["SalesPers", "Birth", "Region", "SaleAmt", "ComPct", "ComAmt"], ["Joe", new Date("2000/01/23"), "North", 260, 0.1, 26], ["Robert", new Date("1988/08/21"), "South", 660, 0.15, 99], ["Michelle", new Date("1995/08/03"), "East", 940, 0.15, 141], ["Erich", new Date("1994/05/23"), "West", 410, 0.12, 49.2], ["Dafna", new Date("1992/07/21"), "North", 800, 0.15, 120], ["Rob", new Date("1995/11/03"), "South", 900, 0.15, 135], ["Jonason", new Date("1987/02/11"), "West", 300, 0.17, 110], ["Enana", new Date("1997/04/01"), "West", 310, 0.16, 99.2], ["Dania", new Date("1997/02/15"), "North", 500, 0.10, 76], ["Robin", new Date("1991/12/28"), "East", 450, 0.18, 35]]; var tableColumnsContainer; var checkBoxes; window.onload = function () { tableColumnsContainer = _getElementById("tableColumnsContainer"); var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 2}); initSpread(spread); }; function initSpread(spread) { var sheet = spread.getSheet(0); sheet.suspendPaint(); sheet.options.allowCellOverflow = true; sheet.name("FilterDialog"); sheet.setArray(1, 1, salesData); var filter = new spreadNS.Filter.HideRowFilter(new spreadNS.Range(2, 1, salesData.length - 1, salesData[0].length)); sheet.rowFilter(filter); prepareFilterItems(sheet, salesData[0]); sheet.defaults.rowHeight = 28; sheet.setColumnWidth(1, 110); sheet.setColumnWidth(2, 80); sheet.setColumnWidth(3, 100); sheet.setColumnWidth(4, 80); sheet.setColumnWidth(5, 80); sheet.setColumnWidth(6, 80); sheet.getRange(2, 2, 10, 1).formatter("yyyy/mm/dd"); var ComparisonOperators = spreadNS.ConditionalFormatting.ComparisonOperators; var equalsTo = ComparisonOperators.equalsTo; var range = sheet.getRange(1, 1, 11, 6); range.setBorder(new spreadNS.LineBorder("gray", spreadNS.LineStyle.thin), {all: true}); var ranges = [new spreadNS.Range(2, 3, 10, 1)]; var style1 = new spreadNS.Style(); style1.foreColor = "Accent 2"; var rule1 = new spreadNS.ConditionalFormatting.NormalConditionRule(1, ranges, style1, equalsTo, "West", ""); sheet.conditionalFormats.addRule(rule1); var style2 = new spreadNS.Style(); style2.foreColor = "Accent 3"; var rule2 = new spreadNS.ConditionalFormatting.NormalConditionRule(1, ranges, style2, equalsTo, "East", ""); sheet.conditionalFormats.addRule(rule2); var style3 = new spreadNS.Style(); style3.foreColor = "Accent 6"; var rule3 = new spreadNS.ConditionalFormatting.NormalConditionRule(1, ranges, style3, equalsTo, "North", ""); sheet.conditionalFormats.addRule(rule3); var style4 = new spreadNS.Style(); style4.foreColor = "Accent 1"; var rule4 = new spreadNS.ConditionalFormatting.NormalConditionRule(1, ranges, style4, equalsTo, "South", ""); sheet.conditionalFormats.addRule(rule4); ranges = [new spreadNS.Range(2, 2, 10, 1)]; style1 = new spreadNS.Style(); style1.backColor = "rgb(241, 135, 102)"; rule1 = new spreadNS.ConditionalFormatting.NormalConditionRule(1, ranges, style1, ComparisonOperators.lessThan, "1990/01/01", ""); sheet.conditionalFormats.addRule(rule1); style2 = new spreadNS.Style(); style2.backColor = "lightGreen"; rule2 = new spreadNS.ConditionalFormatting.NormalConditionRule(1, ranges, style2, ComparisonOperators.between, "1990/01/01", "2000/01/01"); sheet.conditionalFormats.addRule(rule2); style3 = new spreadNS.Style(); style3.backColor = "deepSkyBlue"; rule3 = new spreadNS.ConditionalFormatting.NormalConditionRule(1, ranges, style3, ComparisonOperators.greaterThan, "2000/01/01", ""); sheet.conditionalFormats.addRule(rule3); sheet.resumePaint(); var sheet2 = spread.sheets[1]; initOutlineColumnFilter(sheet2); sheet2.name("OutlineColumnFilter"); _getElementById("showAll").addEventListener('click',function () { if (filter) { filter.filterButtonVisible(true); checkBoxes.forEach(function(item) { item.checked = true; }); } }); _getElementById("hideAll").addEventListener('click',function () { if (filter) { filter.filterButtonVisible(false); checkBoxes.forEach(function(item) { item.checked = false; }); } }); _getElementById("sortByValue").addEventListener('change',function () { var val = this.checked; filter.filterDialogVisibleInfo({ sortByValue: val }); }); _getElementById("sortByColor").addEventListener('change',function () { var val = this.checked; filter.filterDialogVisibleInfo({sortByColor:val}); }); _getElementById("filterByColor").addEventListener('change',function () { var val = this.checked; filter.filterDialogVisibleInfo({filterByColor:val}); }); _getElementById("filterByValue").addEventListener('change',function () { var val = this.checked; filter.filterDialogVisibleInfo({filterByValue:val}); }); _getElementById("listFilterArea").addEventListener('change',function () { var val = this.checked; filter.filterDialogVisibleInfo({listFilterArea:val}); }); } function prepareFilterItems(sheet, headers) { var items = []; var filter = sheet.rowFilter(), range = filter.range, startColumn = range.col; for (var c = 0, length = headers.length; c < length; c++) { var name = headers[c]; items.push('<div><label><input type="checkbox" checked data-index="' + (startColumn + c) + '">'+ name + '</label></div>'); } tableColumnsContainer.innerHTML = items.join(""); var nodeList = tableColumnsContainer.querySelectorAll("input[type='checkbox']"); checkBoxes = []; for (var i = 0, count = nodeList.length; i < count; i++) { var element = nodeList[i]; checkBoxes.push(element); element.addEventListener('change', function () { var index = +this.dataset.index; // +this.getAttribute("data-index"); if (filter) { filter.filterButtonVisible(index, this.checked); } }); } } function initOutlineColumnFilter(sheet) { sheet.setColumnWidth(2, 120); sheet.rowFilter(new GC.Spread.Sheets.Filter.HideRowFilter(new GC.Spread.Sheets.Range(-1, 0, -1, 1))); sheet.suspendPaint(); sheet.setColumnWidth(0, 200); sheet.setRowCount(12); sheet.outlineColumn.options({ columnIndex: 0, showIndicator: true, }); var sd = data; sheet.setDataSource(sd); sheet.bindColumn(0, "name"); sheet.setColumnCount(3); sheet.setColumnWidth(0, 300); for (var r = 0; r < sd.length; r++) { var level = sd[r].level; sheet.getCell(r, 0).textIndent(level); } sheet.showRowOutline(false); sheet.outlineColumn.refresh(); sheet.resumePaint(); } function _getElementById(id){ return document.getElementById(id); }
<!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="$DEMOROOT$/spread/source/data/outlineColumn.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"> <div class="option-group"> <input id="showAll" type="button" value="Show All" title="Show all filter buttons of the table"/> <input id="hideAll" type="button" value="Hide All" title="Hide all filter buttons of the table"/> </div> <div class="option-group"> <h4>Show filter buttons:</h4> <div id="tableColumnsContainer"></div> <h4>Filter dialog visible info:</h4> <div> <div><label><input type="checkbox" checked id="sortByValue">ShowSortByValue</label></div> <div><label><input type="checkbox" checked id="sortByColor">ShowSortByColor</label></div> <div><label><input type="checkbox" checked id="filterByColor">ShowFilterByColor</label></div> <div><label><input type="checkbox" checked id="filterByValue">ShowFilterByValue</label></div> <div><label><input type="checkbox" checked id="listFilterArea">ShowListFilterArea</label></div> </div> </div> </div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: calc(100% - 280px); height: 100%; overflow: hidden; 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; } .option-group input[type="checkbox"] { margin-right: 6px; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }