テーブルスライサー

カスタムスライサーの作成ではGeneralSlicerDataのほかTableSlicerDataを使用することもできます。TableSlicerDataのデータソースはSpread.Sheetsのシートテーブルです。TableSlicerDataのコンストラクタにはシートテーブルを設定する必要があります。

シートテーブルのフィルタダイアログに表示されるチェックボックスの状態と行フィルタの状態は、TableSlicerDataがアタッチされたフィルタの結果に同期します。シートテーブルに対するフィルタ実行が完了すると、TableSlicerDataがアタッチされた全てのスライサーにonFilter通知が送信されます。 TableSlicerDataの使用方法は、次のとおりです。
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss")); var sheet = spread.getActiveSheet(); // 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"]]; // Create a table. var table = sheet.tables.addFromDataSource("table1", 1, 1, data); table.setColumnName(0, columnNames[0]); table.setColumnName(1, columnNames[1]); table.setColumnName(2, columnNames[2]); table.setColumnName(3, columnNames[3]); sheet.getRange(-1, 1, -1, 6).width(80); // Get TableSlicerData from table. var slicerData = table.getSlicerData(); // Create a custom slicer and add it to dom tree. var slicer1 = new CustomSlicer(document.getElementById("cityContainer"),'City'); slicer1.setData(slicerData, "City"); var slicer2 = new CustomSlicer(document.getElementById("sexContainer"),'Sex'); slicer2.setData(slicerData, "Sex"); }; // Define custom slicer. function CustomSlicer(container,name) { this.container = container; this.name = name; this.slicerData = null; this.columnName = null; } CustomSlicer.prototype.setData = function (slicerData, columnName) { this.slicerData = slicerData; this.columnName = columnName; this.slicerData.attachListener(this); this.onDataLoaded(); } CustomSlicer.prototype.onDataLoaded = function () { var columnName = this.columnName, exclusiveData = this.slicerData.getExclusiveData(columnName); // Create slicer dom tree. var strong = document.createElement('strong'); strong.innerText = this.name+':'; var br = document.createElement('br'); this.container.appendChild(strong); this.container.appendChild(br); var domString = "", id; var div = document.createElement('div'); div.setAttribute('class','option-group') for (var i = 0; i < exclusiveData.length; i++) { id = columnName + (i + 1); domString += '<input type="checkbox" name="' + columnName + '" value="' + exclusiveData[i] + '" id="' + id + '" checked>'; domString += '<label for="' + id + '">' + exclusiveData[i] + '</label></br>'; } div.innerHTML= domString; this.container.appendChild(div); // Attach events to dom element. var self = this; document.querySelector('.options-container').addEventListener('change',function (e) { // Invoke getExclusiveData method to get exclusive data from slicerData. var exclusiveData = self.slicerData.getExclusiveData(self.columnName); // parent = this.parentNode.parentNode; items = document.querySelectorAll('.options-container input'); 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); } if(exclusiveData.indexOf(value) != -1){ 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 }); } }); };
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta name="spreadjs culture" content="ja-jp" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets-resources-ja/dist/gc.spread.sheets.resources.ja.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" style="height: 100%;"> <div id="ss" class="sample-spreadsheets"></div> <div class="options-container"> <div id="cityContainer" class="sample-group"></div> <div id="sexContainer" class="sample-group"></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; margin: 6px 0; } strong { display: inline-block; margin: 12px 0; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }