スライサーデータ

GeneralSlicerDataクラスを使用してカスタムスライサーを作成できます。GeneralSlicerDataクラスは、2次元配列のデータを処理するためのクラスです。1つのカスタムスライサーには、複数のスライサーを連結できます。個々のスライサーは、1つの列のデータをフィルタリングします。1つのスライサーのフィルタリングが完了すると、GeneralSlicerDataクラスによって他のスライサーに通知が行われます。この後、各スライサーはGeneralSlicerDataからフィルタ結果を取得し、それぞれのUIを更新します。

<p>スライサーは以下の手順に基づき、 GeneralSlicerDataクラスと連携して動作します。</p> <p><strong>データを指定し、新規のGeneralSlicerDataを作成します。</strong></p> <p><strong>カスタムスライサーを新規作成し、GeneralSlicerDataに接続します。.</strong></p> <p><strong>GeneralSlicerDataから列データを取得し、スライサーのUIを作成します。</strong></p> <p><strong>UIイベントに応答し、GeneralSlicerDataの doFilterメソッドを呼び出します。</strong></p> <p><strong>GeneralSlicerDataからフィルタ結果を取得し、スライサーのUIを更新します。</strong></p> <p>以下のAPIは簡潔な処理の構築に役立ちます。</p> <p><strong>getData:</strong> 特定の列の全データを取得します。</p> <p><strong>getExclusiveData:</strong> 排他データ(重複しないデータ)を取得します。</p> <p><strong>doFilter:</strong> 列をフィルタリングします。</p> <p><strong>doUnfilter:</strong> フィルタリング情報を消去します。</p> <p><strong>attachListener:</strong> リスナーをGeneralSlicerDataに接続します。</p> <p><strong>detachListener:</strong> リスナーとGeneralSlicerDataの接続を解除します。</p> <p><strong>onFiltered:</strong> フィルタリングの発生に応じて実行されるイベントです。</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 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"> <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; }