SpreadJS 13
SpreadJS Documentation / Developer's Guide / Features / Manage Data Visualization and Objects / Slicer / Item Slicer
In This Topic
    Item Slicer
    In This Topic

    The item slicer can be used to filter the data.

    The GeneralSlicerData and TableSlicerData classes contain the data to filter and also provide filter information properties. The ItemSlicer class can be used with the slicer data. The item slicer is a slicer component and is independent of the sheet. The style method can be used to set styles for the item slicer.

    The following image displays an item slicer. 

    Item slicer

    Using Code

    This example creates a table and adds an item slicer.

    JavaScript
    Copy Code
    //create table
            var dataSource = [
                { Name: "Bob", City: "NewYork", Birthday: "1968/6/8" },
                { Name: "Betty", City: "NewYork", Birthday: "1972/7/3" },
                { Name: "Alice", City: "Washington", Birthday: "2012/2/15" },
            ];
    var table = activeSheet.tables.addFromDataSource("table1", 1, 1, dataSource);
    var slicerData = table.getSlicerData();
    //create item slicer and add slicer data to item slicer.
    var slicer = new GC.Spread.Sheets.Slicers.ItemSlicer("slicer", slicerData, "Name");
    //Add the item slicer to the dom tree.
    //The "slicerHost" is the div you want to add the slicer's dom to.
    $("#slicerHost").append(slicer.getDOMElement());
    .....
    <div id="slicerHost" style="height: 300px; width: 50%"></div>