The slicer works with GeneralSlicerData based on the following steps:
Create a new GeneralSlicerData instance with your data.
Create a new custom slicer and attach it to GeneralSlicerData.
Get the column data from GeneralSlicerData and build the slicer UI.
Respond to the UI events and invoke the GeneralSlicerData doFilter method.
Get the filtered result from GeneralSlicerData and update the slicer UI.
The following API will help you write simpler code:
getData: Get all data for the specified column.
getExclusiveData: Get exclusive data (non-repeating data) for the specified column.
doFilter: Filter the data that corresponds to the specified column and exclusive data indexes.
doUnfilter: Un-filter the data that corresponds to the specified column.
attachListener: Attach slicer to slicer data.
detachListener: Detach slicer from slicer data.
onFiltered: Occurs after the slicer data has been filtered.
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/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/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="info">Use GeneralSlicerData on the left table to filter data by City and Sex columns.</div>
<p>
<div id="info">Filter data by the third column using the slicer below:</div>
</p>
<div id="cityContainer"></div>
<p>
<div id="info">Filter data by the second column using the slicer below:</div>
</p>
<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;
}
