クラス: ItemSlicer

Sheets.Slicers.ItemSlicer

Table of contents

コンストラクタ

• constructor

メソッド

• captionName
• columnCount
• getDOMElement
• height
• itemHeight
• name
• showHeader
• showNoDataItems
• showNoDataItemsInLast
• sortState
• style
• visuallyNoDataItems
• width

コンストラクタ

constructor

• new ItemSlicer(name, slicerData, columnName)

アイテムスライサーを表します。

実例

//　次のサンプルコードは、アイテムスライサーを作成します。
// テーブルを作成します。
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 = new GC.Spread.Sheets.Slicers.TableSlicerData(table)
//　スライサーデータをアイテムスライサーに設定します。
var slicer = new GC.Spread.Sheets.Slicers.ItemSlicer("slicer", slicerData, "Name");
//　アイテムスライサーをDOMツリーに追加します。
//　"slicerHost"は、スライサーのDOMを追加する対象のdivです。
$("#slicerHost").append(slicer.getDOMElement());

パラメータ

名前	型	説明
name	string	アイテムスライサーの名前。
slicerData	GeneralSlicerData	GeneralSlicerDataまたはTableSlicerDataのインスタンス。
columnName	string	アイテムスライサーに関連する列名。

メソッド

captionName

▸ captionName(value?): any

アイテムスライサーのキャプション名を取得または設定します。

実例

var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
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 = new GC.Spread.Sheets.Slicers.TableSlicerData(table)
//　スライサーデータをアイテムスライサーに設定します。
var slicer = new GC.Spread.Sheets.Slicers.ItemSlicer("slicer", slicerData, "Name");
var oldValue = slicer.captionName();
console.log(oldValue);
slicer.captionName('Slicer_Caption');
var newValue = slicer.captionName();
console.log(newValue);

パラメータ

名前	型
value?	string

戻り値

any

値が設定されていない場合は、アイテムスライサーのキャプション名を返します。値が設定されている場合は、アイテムスライサーを返します。

---

columnCount

▸ columnCount(value?): any

アイテムスライサーの列数を取得または設定します。

実例

var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
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 = new GC.Spread.Sheets.Slicers.TableSlicerData(table)
//　スライサーデータをアイテムスライサーに設定します。
var slicer = new GC.Spread.Sheets.Slicers.ItemSlicer("slicer", slicerData, "Name");
var oldValue = slicer.columnCount();
console.log(oldValue);
slicer.columnCount(3);
var newValue = slicer.columnCount();
console.log(newValue);

パラメータ

名前	型
value?	number

戻り値

any

値が設定されていない場合は、アイテムスライサーの列数を返します。値が設定されている場合は、アイテムスライサーを返します。

---

getDOMElement

▸ getDOMElement(): HTMLElement

アイテムスライサーのDOM要素を取得します。

実例

//　次のサンプルコードは、アイテムスライサーを作成します。
// テーブルを作成します。
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 = new GC.Spread.Sheets.Slicers.TableSlicerData(table)
//　スライサーデータをアイテムスライサーに設定します。
var slicer = new GC.Spread.Sheets.Slicers.ItemSlicer("slicer", slicerData, "Name");
//　アイテムスライサーをDOMツリーに追加します。
//　"slicerHost"は、スライサーのDOMを追加する対象のdivです。
$("#slicerHost").append(slicer.getDOMElement());

戻り値

HTMLElement

アイテムスライサーのDOM要素。

---

height

▸ height(value?): any

アイテムスライサーの高さを取得または設定します。

実例

var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
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 = new GC.Spread.Sheets.Slicers.TableSlicerData(table)
//　スライサーデータをアイテムスライサーに設定します。
var slicer = new GC.Spread.Sheets.Slicers.ItemSlicer("slicer", slicerData, "Name");
var oldValue = slicer.height();
console.log(oldValue);
slicer.height(120);
var newValue = slicer.height();
console.log(newValue);

パラメータ

名前	型
value?	number

戻り値

any

値が設定されていない場合は、アイテムスライサーの高さを返します。値が設定されている場合は、アイテムスライサーを返します。

---

itemHeight

▸ itemHeight(value?): any

アイテムスライサーのアイテムの高さを取得または設定します。

実例

var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
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 = new GC.Spread.Sheets.Slicers.TableSlicerData(table)
//　スライサーデータをアイテムスライサーに設定します。
var slicer = new GC.Spread.Sheets.Slicers.ItemSlicer("slicer", slicerData, "Name");
var oldValue = slicer.itemHeight();
console.log(oldValue);
slicer.itemHeight(34);
var newValue = slicer.itemHeight();
console.log(newValue);

パラメータ

名前	型
value?	number

戻り値

any

値が設定されていない場合は、アイテムスライサーのアイテムの高さを返します。値が設定されている場合は、アイテムスライサーを返します。

---

name

▸ name(value?): any

アイテムスライサーの名前を取得または設定します。

実例

var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
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 = new GC.Spread.Sheets.Slicers.TableSlicerData(table)
//　スライサーデータをアイテムスライサーに設定します。
var slicer = new GC.Spread.Sheets.Slicers.ItemSlicer("slicer", slicerData, "Name");
var oldValue = slicer.name();
console.log(oldValue);
slicer.name('SlicerA');
var newValue = slicer.name();
console.log(newValue);

パラメータ

名前	型
value?	string

戻り値

any

値が設定されていない場合は、アイテムスライサーの名前を返します。値が設定されている場合は、アイテムスライサーを返します。

---

showHeader

▸ showHeader(value?): any

アイテムスライサーのヘッダを表示するかどうかを取得または設定します。

実例

var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
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 = new GC.Spread.Sheets.Slicers.TableSlicerData(table)
//　スライサーデータをアイテムスライサーに設定します。
var slicer = new GC.Spread.Sheets.Slicers.ItemSlicer("slicer", slicerData, "Name");
var oldValue = slicer.showHeader();
console.log(oldValue);
slicer.showHeader(false);
var newValue = slicer.showHeader();
console.log(newValue);

パラメータ

名前	型
value?	boolean

戻り値

any

値が設定されていない場合は、アイテムスライサーのヘッダを表示するかどうかを返します。値が設定されている場合は、アイテムスライサーを返します。

---

showNoDataItems

▸ showNoDataItems(value?): any

アイテムスライサーのデータなしアイテムを表示するかどうかを取得または設定します。

実例

var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
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 = new GC.Spread.Sheets.Slicers.TableSlicerData(table)
//　スライサーデータをアイテムスライサーに設定します。
var slicer = new GC.Spread.Sheets.Slicers.ItemSlicer("slicer", slicerData, "Name");
var oldValue = slicer.showNoDataItems();
console.log(oldValue);
slicer.showNoDataItems(false);
var newValue = slicer.showNoDataItems();
console.log(newValue);

パラメータ

名前	型
value?	boolean

戻り値

any

値が設定されていない場合は、アイテムスライサーのデータなしアイテムを表示するかどうかを返します。値が設定されている場合は、アイテムスライサーを返します。

---

showNoDataItemsInLast

▸ showNoDataItemsInLast(value?): any

データなしアイテムを最後に表示するかどうかを取得または設定します。

実例

var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
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 = new GC.Spread.Sheets.Slicers.TableSlicerData(table)
//　スライサーデータをアイテムスライサーに設定します。
var slicer = new GC.Spread.Sheets.Slicers.ItemSlicer("slicer", slicerData, "Name");
var oldValue = slicer.showNoDataItemsInLast();
console.log(oldValue);
slicer.showNoDataItemsInLast(false);
var newValue = slicer.showNoDataItemsInLast();
console.log(newValue);

パラメータ

名前	型
value?	boolean

戻り値

any

値が設定されていない場合は、データなしアイテムを最後に表示するかどうかを返します。値が設定されている場合は、アイテムスライサーを返します。

---

sortState

▸ sortState(value?): any

アイテムスライサーのソート状態を取得または設定します。

実例

var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
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 = new GC.Spread.Sheets.Slicers.TableSlicerData(table)
//　スライサーデータをアイテムスライサーに設定します。
var slicer = new GC.Spread.Sheets.Slicers.ItemSlicer("slicer", slicerData, "Name");
var oldValue = slicer.sortState();
console.log(oldValue);
slicer.sortState(GC.Spread.Sheets.SortState.descending);
var newValue = slicer.sortState();
console.log(newValue);

パラメータ

名前	型
value?	SortState

戻り値

any

値が設定されていない場合は、アイテムスライサーのソート状態を返します。値が設定されている場合は、アイテムスライサーを返します。

---

style

▸ style(value?): any

アイテムスライサーのスタイルを取得または設定します。

実例

このスタイルはjsonデータであり、以下のようなjsonスキーマに従います。
{
     "$schema" : "http://json-schema.org/draft-04/schema#",
     "title" : "style",
     "type" : "object",
     "properties" : {
         "wholeSlicerStyle" : {
             "$ref" : "#/definitions/StyleInfo"
         },
         "headerStyle" : {
             "$ref" : "#/definitions/StyleInfo"
         },
         "selectedItemWithDataStyle" : {
             "$ref" : "#/definitions/StyleInfo"
         },
         "selectedItemWithNoDataStyle" : {
             "$ref" : "#/definitions/StyleInfo"
         },
         "unSelectedItemWithDataStyle" : {
             "$ref" : "#/definitions/StyleInfo"
         },
         "unSelectedItemWithNoDataStyle" : {
             "$ref" : "#/definitions/StyleInfo"
         },
         "hoveredSelectedItemWithDataStyle" : {
             "$ref" : "#/definitions/StyleInfo"
         },
         "hoveredSelectedItemWithNoDataStyle" : {
             "$ref" : "#/definitions/StyleInfo"
         },
         "hoveredUnSelectedItemWithDataStyle" : {
             "$ref" : "#/definitions/StyleInfo"
         },
         "hoveredUnSelectedItemWithNoDataStyle" : {
             "$ref" : "#/definitions/StyleInfo"
         }
     },
     "definitions" : {
         "StyleInfo" : {
             "type" : "object",
             "properties" : {
                     "backColor" : {
                             "type" : "string"
                     },
                     "foreColor" : {
                             "type" : "string"
                     },
                     "font" : {
                             "type" : "string"
                     },
                     "borderLeft" : {
                             "$ref" : "#/definitions/SlicerBorder"
                     },
                     "borderTop" : {
                             "$ref" : "#/definitions/SlicerBorder"
                     },
                     "borderRight" : {
                             "$ref" : "#/definitions/SlicerBorder"
                     },
                     "borderBottom" : {
                             "$ref" : "#/definitions/SlicerBorder"
                     },
                 "textDecoration":{
                     "type" : "string"
                 }
             }
         },
         "SlicerBorder":{
             "type":"object",
             "properties":{
                 "borderWidth":{
                         "type":"number"
                 },
                 "borderStyle":{
                         "type":"string"
                 },
                 "borderColor":{
                         "type":"string"
                 }
          }
         }
     }
 }
サンプル：
var style = new GC.Spread.Sheets.Slicers.SlicerStyle();
style.wholeSlicerStyle(new GC.Spread.Sheets.Slicers.SlicerStyleInfo('red', 'blue', '16pt Calibri'));
style.headerStyle(new GC.Spread.Sheets.Slicers.SlicerStyleInfo(undefined, 'green'));
style.selectedItemWithDataStyle(new GC.Spread.Sheets.Slicers.SlicerStyleInfo(undefined, undefined, undefined, new GC.Spread.Sheets.LineBorder('pink', GC.Spread.Sheets.LineStyle.double)));
var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
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 = new GC.Spread.Sheets.Slicers.TableSlicerData(table)
//　スライサーデータをアイテムスライサーに設定します。
var slicer = new GC.Spread.Sheets.Slicers.ItemSlicer("slicer", slicerData, "Name");
var oldValue = slicer.style();
console.log(oldValue);
slicer.style(style);
var newValue = slicer.style();
console.log(newValue);

パラメータ

名前	型	説明
value?	any	スライサー項目のスタイル。スライサーの style プロパティは、スライサーコントロールに適用される外観と書式設定スタイルを指定し、スライサーの全体的な外観とプレゼンテーションを定義します。

戻り値

any

値が設定されていない場合は、アイテムスライサーのスタイルを返します。値が設定されている場合は、アイテムスライサーを返します。

---

visuallyNoDataItems

▸ visuallyNoDataItems(value?): any

データのないアイテムを視覚的に区別するかどうかを取得または設定します。

実例

var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
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 = new GC.Spread.Sheets.Slicers.TableSlicerData(table)
//　スライサーデータをアイテムスライサーに設定します。
var slicer = new GC.Spread.Sheets.Slicers.ItemSlicer("slicer", slicerData, "Name");
var oldValue = slicer.visuallyNoDataItems();
console.log(oldValue);
slicer.visuallyNoDataItems(false);
var newValue = slicer.visuallyNoDataItems();
console.log(newValue);

パラメータ

名前	型
value?	boolean

戻り値

any

値が設定されていない場合は、データのないアイテムを視覚的に区別するかどうかを返します。値が設定されている場合は、アイテムスライサーを返します。

---

width

▸ width(value?): any

アイテムスライサーの幅を取得または設定します。

実例

var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
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 = new GC.Spread.Sheets.Slicers.TableSlicerData(table)
//　スライサーデータをアイテムスライサーに設定します。
var slicer = new GC.Spread.Sheets.Slicers.ItemSlicer("slicer", slicerData, "Name");
var oldValue = slicer.width();
console.log(oldValue);
slicer.width(120);
var newValue = slicer.width();
console.log(newValue);

パラメータ

名前	型
value?	number

戻り値

any

値が設定されていない場合は、アイテムスライサーの幅を返します。値が設定されている場合は、アイテムスライサーを返します。