rowFilter에 대한 정보와 SheetTable의 필터 대화 상자에서 확인된 상태는 TableSlicerData와 연결된 슬라이서의 필터 결과와 동기화됩니다. TableSlicerData와 연결된 모든 슬라이서는 onFilter 알림을 받고 코드 또는 필터 대화 상자를 사용하여 SheetTable 필터 이후에 필터링된 결과를 가져옵니다.
다음과 같이 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 charset="utf-8" />
<meta name="spreadjs culture" content="ko-kr" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-slicers/dist/gc.spread.sheets.slicers.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-resources-ko/dist/gc.spread.sheets.resources.ko.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;
}