attachListener Method

Attaches the listener.

Syntax

Javascript (Usage)
Javascript (Specification)

var instance = new GC.Spread.Slicers.GeneralSlicerData(data, columnNames);
var value; // Type: any
value = instance.attachListener(listener);

function attachListener( 
   listener : GC.Spread.Slicers.ISlicerListener
) : any;

Parameters

listener: The listener.

Example

This example creates a custom slicer.This example creates a custom slicer.

Javascript

<!DOCTYPE html>
 <html>
 <head>
     <title>Spread.Sheets Development Sample</title>
     <link href="./css/gc.spread.sheets.excel2013white.10.x.x.css" rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-2.0.2.js" type="text/javascript"></script>
     <script src="./scripts/gc.spread.sheets.all.10.x.x.min.js"></script>
     <script type="text/javascript">
         //Define data source.
         data = [
             { "Name": "Bob", "City": "NewYork", "Birthday": "1968/6/8" },
             { "Name": "Bob", "City": "NewYork", "Birthday": "1968/6/8" },
             { "Name": "Bob", "City": "NewYork", "Birthday": "1968/6/8" },
             { "Name": "Bob", "City": "NewYork", "Birthday": "1968/6/8" },
             { "Name": "Betty", "City": "Washington", "Birthday": "1972/7/3" },
             { "Name": "Betty", "City": "Washington", "Birthday": "1972/7/3" },
             { "Name": "Betty", "City": "Washington", "Birthday": "1972/7/3" },
             { "Name": "Alice", "City": "NewYork", "Birthday": "1964/3/2" },
             { "Name": "Alice", "City": "NewYork", "Birthday": "1964/3/2" },
             { "Name": "Alice", "City": "NewYork", "Birthday": "1964/3/2" }];

        //Define custom slicer.
         function MySlicer(container) {
             this.container = container;
             this.slicerData = null;
             this.columnName = null;
         }
         MySlicer.prototype.setData = function (slicerData, columnName) {
             this.slicerData = slicerData;
             this.columnName = columnName;
             this.slicerData.attachListener(this);
             this.onDataLoaded();
         }
         MySlicer.prototype.onDataLoaded = function () {
             //create slicer dom tree.
             var columnName = this.columnName,
             exclusiveData = this.slicerData.getExclusiveData(columnName);
             $(this.container).append($('<span>' + this.columnName + ':</span>' + '<br />'));
             var domString = "";
             for (var i = 0; i < exclusiveData.length; i++) {
                 domString += '<input type="checkbox" name="' + columnName + '" value="' + exclusiveData[i] + '">';
                 domString += '<span>' + exclusiveData[i] + '</span>';
                 domString += '<br />';
             }
             $(this.container).append($(domString));
             //attach events to dom.
             var self = this;
             $("[name='" + self.columnName + "']").change(function () {
                 var slicer = self,
                 exclusiveData = slicer.slicerData.getExclusiveData(slicer.columnName),
                 parent = $(this).parent(),
                 items = parent.children(),
                 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) {
                     slicer.slicerData.doUnfilter(slicer.columnName);
                 } else {
                     slicer.slicerData.doFilter(slicer.columnName, { exclusiveRowIndexes: indexes });
                 }
             });
         };
         MySlicer.prototype.onFiltered = function () {
             //Sync the status if the data has been filtered by the Spread.Sheets table.
             var slicerdata = this.slicerData;
             var exclusiveIndexes = slicerdata.getFilteredIndexes(this.columnName);
             $.each($("#slicerContainer").children("input"), function (i,input) {
            });
         }

        $(document).ready(function () {             
             var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:1});
             var sheet = spread.getActiveSheet();

            //create a custom slicer and add this slicer to the "slicerContainer" div.
             var slicer = new MySlicer($("#slicerContainer")[0]);
             var table = sheet.tables.addFromDataSource("table1", 1, 1, data);
             var slicerData = table.getSlicerData();
             slicer.setData(slicerData, "Name");
        });
     </script>
</head>
 <body>
     <div id="slicerContainer" style="border:1px solid gray;width:190px"></div>
     <hr />
     <div id="ss" style="width:500px;height:500px;border:1px solid gray"></div>
 </body>
 </html>

Javascript

<!DOCTYPE html>
 <html>
 <head>
     <title>Spread.Sheets Sample</title>
     <link href="./css/gc.spread.sheets.excel2013white.10.x.x.css" rel="stylesheet" type="text/css" />
     <script src="http://code.jquery.com/jquery-2.0.2.js" type="text/javascript"></script>
     <script src="./scripts/gc.spread.sheets.all.10.x.x.min.js"></script>

    <script type="text/javascript">
         //Define data source.
         columnNames = ["Name", "City", "Birthday"];
         data = [
             ["Bob", "NewYork", "1968/6/8"],
             ["Betty", "Washington", "1972/7/3"],
             ["Alice", "NewYork", "1964/3/2"]];

        //Define custom slicer.
         function MySlicer(container) {
             this.container = container;
             this.slicerData = null;
             this.columnName = null;
         }
         MySlicer.prototype.setData = function (slicerData, columnName) {
             this.slicerData = slicerData;
             this.columnName = columnName;
             this.slicerData.attachListener(this);
             this.onDataLoaded();
         }
         MySlicer.prototype.onDataLoaded = function () {
             //create slicer dom tree.
             var columnName = this.columnName,
             exclusiveData = this.slicerData.getExclusiveData(columnName);
             $(this.container).append($('<span>' + this.columnName + ':</span>' + '<br />'));
             var domString = "";
             for (var i = 0; i < exclusiveData.length; i++) {
                 domString += '<input type="checkbox" name="' + columnName + '" value="' + exclusiveData[i] + '">';
                 domString += '<span>' + exclusiveData[i] + '</span>';
                 domString += '<br />';
             }
             $(this.container).append($(domString));
             //attach events to dom.
             var self = this;
             $("[name='" + self.columnName + "']").change(function () {
                 var slicer = self,
                 exclusiveData = slicer.slicerData.getExclusiveData(slicer.columnName),
                 parent = $(this).parent(),
                 items = parent.children(),
                 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) {
                     slicer.slicerData.doUnfilter(slicer.columnName);
                 } else {
                     slicer.slicerData.doFilter(slicer.columnName, { exclusiveRowIndexes: indexes });
                 }
             });
         };
         MySlicer.prototype.onFiltered = function () {
             //The following is an example of showing the filtered result.
             var slicerdata = this.slicerData;
             var filteredRowIndexs = slicerdata.getFilteredRowIndexes();
             var trs = $listTable.find("tr");
             for (var i = 0; i < slicerdata.data.length; i++) {
                 if (filteredRowIndexs.indexOf(i) !== -1) {
                     $(trs[i + 1]).show();
                 } else {
                     $(trs[i + 1]).hide();
                 }
             }
         }

        //Define the show filtered result method.
         function initFilteredResultList() {
             var tableStr = "<table border='1' cellpadding='0' cellspacing='0'><tr>";
             for (var i = 0; i < columnNames.length; i++) {
                 tableStr += "<th>" + columnNames[i] + "</th>";
             }
             tableStr += "</tr>";
             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>";
             }
             tableStr += "</table>";
             $listTable = $(tableStr);
             $("#list").append($listTable);
         }

        $(document).ready(function () {
             //init filtered result list.
             initFilteredResultList();
             //create a custom slicer and add this slicer to the "slicerContainer" div.
             var slicer = new MySlicer($("#slicerContainer")[0]);
             var slicerData = new GC.Spread.Slicers.GeneralSlicerData(data, columnNames);
             slicer.setData(slicerData, "Name");
         });
     </script>

</head>
 <body>
     <div id="slicerContainer" style="border:1px solid gray;width:190px"></div>
     <hr/>
     <div id="list" style="width:300px;float:left"></div>
 </body>
 </html>

Reference

GeneralSlicerData type