SpreadJS 13
GC.Spread.Slicers Namespace / GeneralSlicerData type / doFilter Method
The column name.
The conditional filter. conditional.exclusiveRowIndexes: number array type, visible exclusive row indexes conditional.ranges: {min:number, max:number} array type, visible ranges.
Indicates whether preview is set.
In This Topic
    doFilter Method
    In This Topic
    Filters the data that corresponds to the specified column name and exclusive data indexes.
    Syntax
    var instance = new GC.Spread.Slicers.GeneralSlicerData(data, columnNames);
    var value; // Type: any
    value = instance.doFilter(columnName, conditional, isPreview);
    function doFilter( 
       columnName : string,
       conditional : Object,
       isPreview : boolean
    ) : any;

    Parameters

    columnName
    The column name.
    conditional
    The conditional filter. conditional.exclusiveRowIndexes: number array type, visible exclusive row indexes conditional.ranges: {min:number, max:number} array type, visible ranges.
    isPreview
    Indicates whether preview is set.
    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