General Slicer Data

GeneralSlicerData is used to process the data in a two-dimensional array. You can attach multiple slicers to one GeneralSlicerData and each slicer is used to filter one column of data. When any slicer is filtered, all slicers will get a notice from GeneralSlicerData. At the same time, all slicers will get the filtered result from GeneralSlicerData and update their UI.

<p>The slicer works with GeneralSlicerData based on the following steps:</p> <p><strong>Create a new GeneralSlicerData with your data.</strong></p> <p><strong>Create a new custom slicer and attach it to GeneralSlicerData.</strong></p> <p><strong>Get the column data from GeneralSlicerData and build the slicer UI.</strong></p> <p><strong>Respond to the UI events and invoke the GeneralSlicerData doFilter method.</strong></p> <p><strong>Get the filtered result from GeneralSlicerData and update the slicer UI.</strong></p> <p>The following API will help you write simpler code:</p> <p><strong>getData:</strong> Get all data for the specified column.</p> <p><strong>getExclusiveData:</strong> Get exclusive data (non-repeating data) for the specified column.</p> <p><strong>doFilter:</strong> Filter the data that corresponds to the specified column and exclusive data indexes.</p> <p><strong>doUnfilter:</strong> Unfilter the data that corresponds to the specified column.</p> <p><strong>attachListener:</strong> Attach slicer to slicer data.</p> <p><strong>detachListener:</strong> Detach slicer from slicer data.</p> <p><strong>onFiltered:</strong> Occurs after the slicer data has been filtered.</p>
window.onload = function () { // Define data source. var columnNames = ["Name", "Sex", "City", "Birthday"], data = [ ["Bob", "Man", "NewYork", "1968/06/08"], ["Betty", "Woman", "Washington", "1972/07/03"], ["Alice", "Woman", "Atlanta", "1964/03/02"], ["Tom", "Man", "Houston", "1986/12/03"], ["Jenny", "Woman", "Washington", "1956/10/13"], ["Nacy", "Woman", "NewYork", "1989/01/14"], ["John", "Man", "Houston", "1995/01/01"], ["Mark", "Man", "Atlanta", "1965/11/11"], ["Susan", "Woman", "Atlanta", "1983/07/08"]]; // Build data UI. initFilteredResultList(columnNames, data); // Create GeneralSlicerData. var slicerData = new GC.Spread.Slicers.GeneralSlicerData(data, columnNames); // Create a custom slicer and attach it to dom tree. var slicer1 = new CustomSlicer(document.getElementById('cityContainer')); slicer1.setData(slicerData, 'City'); var slicer2 = new CustomSlicer(document.getElementById('sexContainer')); slicer2.setData(slicerData, 'Sex'); }; // Define custom slicer. function CustomSlicer(container) { this.container = container; this.slicerData = null; this.columnName = null; } CustomSlicer.prototype.setData = function (slicerData, columnName) { this.slicerData = slicerData; this.columnName = columnName; // Invoke attachListener method. this.slicerData.attachListener(this); this.onDataLoaded(); } CustomSlicer.prototype.onDataLoaded = function () { var columnName = this.columnName, exclusiveData = this.slicerData.getExclusiveData(columnName); var domString = '<span>' + this.columnName + ':</span>' + '<br />'; exclusiveData.forEach(function (exclusiveDataItem, index) { var id = columnName + index + 1; domString += '<input type="checkbox" class="' + columnName + '" value="' + exclusiveDataItem + '" id="' + id + '" style="margin-left:10px;" checked>' + '<label for="' + id + '">' + exclusiveDataItem + '</label>' + '<br />'; }); this.container.innerHTML = domString; var self = this; var elements = document.getElementsByClassName(columnName); for (var _index = 0; _index < elements.length; _index++) { var element = elements[_index] element.onchange = function (e) { var parent = e.target.parentNode, items = parent.childNodes, indexes = []; for (var i = 0, length = items.length; i < length; i++) { if (items[i].checked) { var value = items[i].value; if (!isNaN(parseInt(value))) { value = parseInt(value); } indexes.push(exclusiveData.indexOf(value)) } } if (indexes.length === 0) { // Invoke doUnfilter method when all item are not selected. self.slicerData.doUnfilter(self.columnName); } else { // Invoke doFilter method when any item is selected. self.slicerData.doFilter(self.columnName, {exclusiveRowIndexes: indexes}); } } } }; // OverWrite onFiltered method to filter your data. CustomSlicer.prototype.onFiltered = function () { var slicerdata = this.slicerData; var filteredRowIndexs = slicerdata.getFilteredRowIndexes(); var trs = document.getElementsByTagName('tr'); for (var i = 0; i < slicerdata.data.length; i++) { if (filteredRowIndexs.indexOf(i) !== -1) { trs[i + 1].style.display = ''; } else { trs[i + 1].style.display = 'none'; } } } function initFilteredResultList(columnNames, data) { var tableStr = ''; for (var i = 0; i < columnNames.length; i++) { tableStr += "<th>" + columnNames[i] + "</th>"; } for (var i = 0; i < data.length; i++) { tableStr += "<tr>"; for (var j = 0; j < data[i].length; j++) { tableStr += "<td>" + data[i][j] + "</td>"; } tableStr += "</tr>"; } var table = document.createElement('table'); table.border = '1'; table.cellPadding = '0'; table.cellSpacing = '0'; table.innerHTML = tableStr; document.getElementById('ss').appendChild(table); }
<!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" class="sample-spreadsheets"></div> <div class="options-container"> <div id="cityContainer"></div> <div id="sexContainer"></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; } label { display: inline-block; min-width: 90px; margin: 6px 0; } hr { border-color: #fff; opacity: .2; margin: 12px 0; } table th, table td { padding: 4px 8px; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }