通用切片器数据

GeneralSlicerData,是一个数据处理模型,用来处理二维数组类型数据。你可以将一个通用切片器数据作用在多个切片器上,每个切片器负责筛选一列数据。当其中某一个切片器执行了筛选操作,其他所有的切片器都会收到通用切片器数据的通知,并获取到当前筛选的结果,转而更新自己的界面。

只需下面几个步骤,切片器和切片器数据就可以一起工作: (1) 根据自己的数据创建一个GeneralSlicerData。 (2) 创建一个自定义的切片器并附加到GeneralSlicerData。 (3) 从GeneralSlicerData获取列数据然后构建切片器的UI。 (4) 响应UI事件并调用GeneralSlicerData的doFilter方法。 (5) 从GeneralSlicerData获取筛选结果并更新切片器的UI。 下面的API可以简化你的代码: getData: 从指定列获取所有数据。 getExclusiveData: 从指定列获取排除的数据(无重复数据)。 doFilter: 对指定的列和排除的数据索引进行筛选。 doUnfilter: 取消指定列的筛选。 attachListener: 附加切片器到切片器数据。 detachListener: 从切片器数据摘除切片器。 onFiltered: 在切片器数据被筛选后触发调用。
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="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"> <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; }