SpreadJS Table Slicer

Slicers allow you to quickly filter data. A slicer provides filtering details without the need to use drop-down lists. This makes it easier to find the data you are interested in. SpreadJS supports table slicers. The slicer has a header, a caption, items, and a clear button. You can move, resize, delete, cut, copy, or paste the slicer. You can use undo or redo actions when resizing, deleting, moving, cutting, copying, or pasting the slicer. The TableSlicerData class provides table data and filtering information for the slicer. Items that are filtered out by another slicer are referred to as "has data items" and "no data items". Items that are filtered by the slicer are referred to as "selected items" and "unselected items".

Item Type

Description

no data items

Items that have been filtered out by another slicer

has data items

Items that have not been filtered out by another slicer

selected items

Items filtered out by the slicer

unselected items

The item that has not been filtered out by the slicer

The slicer synchronizes with the table filter. The following table changes cause changes in the slicer.

Table Change

Slicer Change

modify data

Slicer items are changed

modify column name

Slicer caption is changed

add row

Slicer items are changed

add column

No changes

delete row

Slicer items are changed

delete column

The slicer connected to this column is removed

remove table

All slicers connected to this table are removed

You can set options for the slicer with the Slicer class. You can also set options for the slicer with the FloatingObject class. You can specify whether the slicer is visible or locked (isVisible or isLocked methods). The isLocked method only has an effect if the sheet is protected. You can add a slicer with the addSlicer method and remove a slicer with the removeSlicer method. Resizing or moving a row or column can cause the slicer's location and size to change based on the settings for the dynamicMove and dynamicSize methods. The following table displays the result of the dynamicMove and dynamicSize settings.

DynamicMove

DynamicSize

Result

true

true

Slicer is moved and sized

true

false

Slicer is moved, but not sized

false

true or false

Slicer is not moved or sized

The following example creates a slicer. SpreadJSSlicer Table Slicer 

<!DOCTYPE html>  
<html>  
<head>  
    <title>SpreadJS Slicer</title>  
 <link type="text/css" href="./css/gcspread.sheets.9.40.20153.0.css" rel="stylesheet" />   
  <script src="http://code.jquery.com/jquery-2.0.2.js" type="text/javascript"></script>  
<script type="text/javascript" src="./scripts/gcspread.sheets.all.9.40.20153.0.min.js"></script>  

<script type="text/javascript">   
        $(document).ready(function () {       
var spread = new GcSpread.Sheets.Spread($("#spreadContainer")[0],{sheetCount:3});  
            // Get active sheet in spread instance  
 var activeSheet = spread.getActiveSheet();  
var datasource = [  
{ Name: "Apple", Category: "Fruit" },  
{ Name: "Orange", Category: "Fruit" },  
{ Name: "Broccoli", Category: "Vegetable" },  
{ Name: "Kiwi", Category: "Fruit" },  
{ Name: "Rice", Category: "Cereal" },  
{ Name: "Strawberry", Category: "Fruit" },  
{ Name: "Yogurt", Category: "Dairy" },  
{ Name: "Plum", Category: "Fruit" },  
{ Name: "Celery", Category: "Vegetable" },  
{ Name: "Grape", Category: "Fruit" },  
{ Name: "Oats", Category: "Cereal" },  
{ Name: "Quinoa", Category: "Cereal" },  
{ Name: "Maize", Category: "Cereal" },  
{ Name: "Okra", Category: "Vegetable" },  
{ Name: "Corn", Category: "Vegetable" },  
{ Name: "Wheat", Category: "Cereal" },  
{ Name: "Barley", Category: "Cereal" },  
{ Name: "Cream", Category: "Dairy" },  
{ Name: "Millet", Category: "Cereal" },  
{ Name: "Rye", Category: "Cereal" },  
{ Name: "Artichoke", Category: "Vegetable" },  
{ Name: "Buckwheat", Category: "Cereal" },  
{ Name: "Gooseberry", Category: "Fruit" },  
{ Name: "Amaranth", Category: "Cereal" },  
{ Name: "Carrot", Category: "Vegetable" },  
{ Name: "Cheese", Category: "Dairy" },  
{ Name: "Fig", Category: "Fruit" },  
{ Name: "Milk", Category: "Dairy" },  
{ Name: "Butter", Category: "Dairy" },  
               ];  
var table = activeSheet.addTableByDataSource("table1", 1, 1, datasource);  
//add a slicer to the sheet and return the slicer instance.  
var slicer = activeSheet.addSlicer("slicer1",table.name(),"Category");  
 //change the slicer properties.  
slicer.width(200);  
slicer.height(200);  
slicer.position(new GcSpread.Sheets.Point(300, 50));  
slicer.style(GcSpread.Sheets.SlicerStyles.dark4());  

activeSheet.getColumn(1).width(100);  
activeSheet.getColumn(2).width(100);  
activeSheet.getColumn(3).width(100);  
       });  
    </script>  
</head>  
<body>  

<div id="spreadContainer" style="width: 600px; height: 400px; border: 1px solid gray">  
</div>  
</body>  
</html>

The following example creates a slicer and sets the slicer style. SpreadJSSlicer1 Table Slicer 

var datasource = [  
{ Name: "Apple", Category: "Fruit" },  
{ Name: "Orange", Category: "Fruit" },  
{ Name: "Broccoli", Category: "Vegetable" },  
{ Name: "Kiwi", Category: "Fruit" },  
{ Name: "Rice", Category: "Cereal" },  
{ Name: "Strawberry", Category: "Fruit" },  
{ Name: "Yogurt", Category: "Dairy" },  
{ Name: "Plum", Category: "Fruit" },  
{ Name: "Celery", Category: "Vegetable" },  
{ Name: "Grape", Category: "Fruit" },  
{ Name: "Oats", Category: "Cereal" },  
{ Name: "Quinoa", Category: "Cereal" },  
{ Name: "Maize", Category: "Cereal" },  
{ Name: "Okra", Category: "Vegetable" },  
{ Name: "Corn", Category: "Vegetable" },  
{ Name: "Wheat", Category: "Cereal" },  
{ Name: "Barley", Category: "Cereal" },  
{ Name: "Cream", Category: "Dairy" },  
{ Name: "Millet", Category: "Cereal" },  
{ Name: "Rye", Category: "Cereal" },  
{ Name: "Artichoke", Category: "Vegetable" },  
{ Name: "Buckwheat", Category: "Cereal" },  
{ Name: "Gooseberry", Category: "Fruit" },  
{ Name: "Amaranth", Category: "Cereal" },  
{ Name: "Carrot", Category: "Vegetable" },  
{ Name: "Cheese", Category: "Dairy" },  
{ Name: "Fig", Category: "Fruit" },  
{ Name: "Milk", Category: "Dairy" },  
{ Name: "Butter", Category: "Dairy" },  
               ];  

var table = activeSheet.addTableByDataSource("table1", 1, 1, datasource);  
//add a slicer to the sheet and return the slicer instance.  
var slicer = activeSheet.addSlicer("slicer1",table.name(),"Category");  
 //change the slicer properties.  
slicer.width(200);  
slicer.height(200);  
slicer.position(new GcSpread.Sheets.Point(300, 50));  
//create slicer styles  
var hstyle = new GcSpread.Sheets.SlicerStyleInfo();  
hstyle.backColor("red");  
hstyle.borderBottom(new GcSpread.Sheets.SlicerBorder(3, "dashed", "green"));  
var hstyle1 = new GcSpread.Sheets.SlicerStyleInfo();  
hstyle1.borderTop(new GcSpread.Sheets.SlicerBorder(2, "dashed", "blue"));  
hstyle1.backColor("yellow");  
var hstyle2 = new GcSpread.Sheets.SlicerStyleInfo();  
hstyle2.backColor("green");  
//set slicer styles  
var style1 = new GcSpread.Sheets.SlicerStyle();  
style1.hoveredSelectedItemWithDataStyle(hstyle);  
style1.hoveredUnSelectedItemWithDataStyle(hstyle);  
style1.unSelectedItemWithDataStyle(hstyle1);  
style1.selectedItemWithDataStyle(hstyle2);  
slicer.style(style1);  

activeSheet.getColumn(1).width(100);  
activeSheet.getColumn(2).width(100);  
activeSheet.getColumn(3).width(100);

MESCIUS inc.

comments powered by Disqus