SpreadJS 13
GC.Spread.Slicers Namespace / GeneralSlicerData type / getExclusiveData Method
The column name.
In This Topic
    getExclusiveData Method
    In This Topic
    Gets the exclusive data by the specified column name.
    Syntax
    var instance = new GC.Spread.Slicers.GeneralSlicerData(data, columnNames);
    var value; // Type: Array
    value = instance.getExclusiveData(columnName);
    function getExclusiveData( 
       columnName : string
    ) : Array;

    Parameters

    columnName
    The column name.

    Return Value

    The exclusive data that corresponds to the specified column name.
    Example
    This example creates a custom slicer.This example creates a custom slicer.
    <!DOCTYPE html>
     <html>
     <head>
         <title>Spread.Sheets Development Sample</title>
         <link href="./css/gc.spread.sheets.excel2013white.12.0.0.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.12.0.0.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>
    <!DOCTYPE html>
     <html>
     <head>
         <title>Spread.Sheets Sample</title>
         <link href="./css/gc.spread.sheets.excel2013white.12.0.0.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.12.0.0.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>
    See Also