クラス: DOMTableSlicer

Sheets.Slicers.DOMTableSlicer

階層

• FloatingObject

  ↳ DOMTableSlicer

Table of contents

コンストラクタ

• constructor

プロパティ

• typeName

メソッド

• allowMove
• allowResize
• alt
• captionName
• cloneContent
• columnCount
• content
• disableResizingAndMoving
• dynamicMove
• dynamicSize
• endColumn
• endColumnOffset
• endRow
• endRowOffset
• fixedPosition
• getHost
• height
• isLocked
• isSelected
• isVisible
• itemHeight
• name
• refreshContent
• showHeader
• showNoDataItems
• showNoDataItemsInLast
• sortState
• startColumn
• startColumnOffset
• startRow
• startRowOffset
• style
• toImageSrc
• toImageSrcAsync
• visuallyNoDataItems
• width
• X
• y

コンストラクタ

constructor

• new DOMTableSlicer(name, table, columnName)

スライサーを表します。

パラメータ

名前	型	説明
name	string	スライサーの名前。
table	Table	スライサーに関連するテーブル。
columnName	string	テーブルの列の名前。

オーバーライド

FloatingObject.constructor

プロパティ

typeName

• typeName: string

シリアル化のサポートに使用される型名の文字列を表します。

実例

var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject('floatingObject', 10, 10, 64, 30);
console.log(customFloatingObject.typeName); // "0"

継承元

FloatingObject.typeName

メソッド

allowMove

▸ allowMove(value?): any

浮動オブジェクトの移動を無効にするかどうかを取得または設定します。

実例

// 次のサンプルコードは、浮動オブジェクトを移動またはサイズ変更できないようにします。
var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject("f1", 10, 10, 60, 64);
var btn = document.createElement('button');
btn.style.width = "60px";
btn.style.height = "30px";
btn.innerText = "button";
customFloatingObject.allowResize(false);
customFloatingObject.allowMove(false);
customFloatingObject.content(btn);
activeSheet.floatingObjects.add(customFloatingObject);

パラメータ

名前	型
value?	boolean

戻り値

any

値が設定されていない場合は、浮動オブジェクトの移動を無効にするかどうかの設定を返します。値が設定されている場合は、浮動オブジェクトを返します。

継承元

FloatingObject.allowMove

---

allowResize

▸ allowResize(value?): any

浮動オブジェクトのサイズ変更を無効にするかどうかを取得または設定します。

実例

// 次のサンプルコードは、浮動オブジェクトを移動またはサイズ変更できないようにします。
var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject("f1", 10, 10, 60, 64);
var btn = document.createElement('button');
btn.style.width = "60px";
btn.style.height = "30px";
btn.innerText = "button";
customFloatingObject.allowResize(false);
customFloatingObject.allowMove(false);
customFloatingObject.content(btn);
activeSheet.floatingObjects.add(customFloatingObject);

パラメータ

名前	型
value?	boolean

戻り値

any

値が設定されていない場合は、浮動オブジェクトのサイズ変更を無効にするかどうかの設定を返します。値が設定されている場合は、浮動オブジェクトを返します。

継承元

FloatingObject.allowResize

---

alt

▸ alt(value?): any

スクリーンリーダーの浮動オブジェクトの代替テキストを取得または設定します。

実例

var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject('f1', 10, 10, 60, 64);
var btn = document.createElement('button');
btn.style.width = "60px";
btn.style.height = "30px";
btn.innerText = "button";
customFloatingObject.content(btn);
customFloatingObject.alt("A button");
activeSheet.floatingObjects.add(customFloatingObject);

パラメータ

名前	型
value?	string

戻り値

any

浮動オブジェクトの代替テキスト。

継承元

FloatingObject.alt

---

captionName

▸ captionName(value?): any

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

実例

// 次のサンプルコードは、captionNameメソッドを使用します。
// テーブルを作成します。
var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
var datas = [
    ["1", "NewYork", "1968/6/8", "80", "180"],
    ["4", "NewYork", "1972/7/3", "72", "168"],
    ["4", "NewYork", "1964/3/2", "71", "179"],
    ["5", "Washington", "1972/8/8","80", "171"],
    ["6", "Washington", "1986/2/2", "89", "161"],
    ["7", "Washington", "2012/2/15", "71", "240"]];
var table = activeSheet.tables.addFromDataSource("table1", 2, 2, datas);
var dataColumns = ["Name", "City", "Birthday", "Weight", "Height"];
table.setColumnName(0, dataColumns[0]);
table.setColumnName(1, dataColumns[1]);
table.setColumnName(2, dataColumns[2]);
table.setColumnName(3, dataColumns[3]);
table.setColumnName(4, dataColumns[4]);
// スライサーのスタイル。
var style1 = new GC.Spread.Sheets.Slicers.SlicerStyles.light4();
var slicer = new GC.Spread.Sheets.Slicers.DOMTableSlicer('slicer1', table, 'Name');
//　アイテムスライサーをDOMツリーに追加します。
//　"slicerHost"は、スライサーのDOMを追加する対象のdivです。
var slicerHost = document.getElementById("slicerHost");
slicerHost.appendChild(slicer.cloneContent()); // add the slicer to the dom tree
 // スライサーのプロパティを変更します。
slicer.position(new GC.Spread.Sheets.Point(100, 200));
slicer.captionName("S1");
slicer.style(style1);

パラメータ

名前	型
value?	string

戻り値

any

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

---

cloneContent

▸ cloneContent(): HTMLElement

インスタンスの現在の内容のコピーを取得します。

実例

var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject('f1', 10, 10, 64, 30);
customFloatingObject.content(createButton('button 1', '64px', '30px'));
activeSheet.floatingObjects.add(customFloatingObject);

var btn = customFloatingObject.cloneContent();
btn.innerText = 'button 2';
customFloatingObject.content(btn);

function createButton (text, width, height) {
    var btn = document.createElement('button');
    btn.style.width = width;
    btn.style.height = height;
    btn.innerText = text;
    return btn;
}

戻り値

HTMLElement

インスタンスの現在の内容のコピー。

継承元

FloatingObject.cloneContent

---

columnCount

▸ columnCount(value?): any

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

実例

// 次のサンプルコードは、スライサーの列数を変更します。
// テーブルを作成します。
var datas = [
    ["1", "NewYork", "1968/6/8", "80", "180"],
    ["4", "NewYork", "1972/7/3", "72", "168"],
    ["4", "NewYork", "1964/3/2", "71", "179"],
    ["5", "Washington", "1972/8/8","80", "171"],
    ["6", "Washington", "1986/2/2", "89", "161"],
    ["7", "Washington", "2012/2/15", "71", "240"]];
var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
var table = activeSheet.tables.addFromDataSource("table1", 2, 2, datas);
var dataColumns = ["Name", "City", "Birthday", "Weight", "Height"];
table.setColumnName(0, dataColumns[0]);
table.setColumnName(1, dataColumns[1]);
table.setColumnName(2, dataColumns[2]);
table.setColumnName(3, dataColumns[3]);
table.setColumnName(4, dataColumns[4]);
// スライサーをシートに追加し、スライサーインスタンスを返します。
var slicer = new GC.Spread.Sheets.Slicers.DOMTableSlicer('slicer1', table, 'Name');
//　アイテムスライサーをDOMツリーに追加します。
//　"slicerHost"は、スライサーのDOMを追加する対象のdivです。
var slicerHost = document.getElementById("slicerHost");
slicerHost.appendChild(slicer.cloneContent()); // add the slicer to the dom tree
console.log(slicer.columnCount());
slicer.columnCount(3);
console.log(slicer.columnCount());

パラメータ

名前	型
value?	number

戻り値

any

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

---

content

▸ content(value?): any

カスタム浮動オブジェクトの内容を取得または設定します。

実例

var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject('f1', 10, 10, 64, 30);
customFloatingObject.content(createButton('button 1', '64px', '30px'));
activeSheet.floatingObjects.add(customFloatingObject);

console.log(customFloatingObject.content()); // 現在のコンテンツを取得します。 結果は、テキスト「button 1」を持つボタン要素です。
customFloatingObject.content(createButton('button 2', '64px', '30px')); // 新しいコンテンツを設定します。

function createButton (text, width, height) {
    var btn = document.createElement('button');
    btn.style.width = width;
    btn.style.height = height;
    btn.innerText = text;
    return btn;
}

パラメータ

名前	型
value?	HTMLElement

戻り値

any

値が設定されていない場合は、カスタム浮動オブジェクトの内容を返します。値が設定されている場合は、浮動オブジェクトを返します。

継承元

FloatingObject.content

---

disableResizingAndMoving

▸ disableResizingAndMoving(value?): any

スライサーのサイズ変更と移動を無効にするかどうかを取得または設定します。

実例

// 次のサンプルコードは、スライサーを移動またはサイズ変更できないようにします。
// テーブルを作成します。
var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
var datas = [
    ["1", "NewYork", "1968/6/8", "80", "180"],
    ["4", "NewYork", "1972/7/3", "72", "168"],
    ["4", "NewYork", "1964/3/2", "71", "179"],
    ["5", "Washington", "1972/8/8","80", "171"],
    ["6", "Washington", "1986/2/2", "89", "161"],
    ["7", "Washington", "2012/2/15", "71", "240"]];
var table = activeSheet.tables.addFromDataSource("table1", 2, 2, datas);
var dataColumns = ["Name", "City", "Birthday", "Weight", "Height"];
table.setColumnName(0, dataColumns[0]);
table.setColumnName(1, dataColumns[1]);
table.setColumnName(2, dataColumns[2]);
table.setColumnName(3, dataColumns[3]);
table.setColumnName(4, dataColumns[4]);
// スライサーのスタイル。
var style1 = new GC.Spread.Sheets.Slicers.SlicerStyles.light4();
var slicer = new GC.Spread.Sheets.Slicers.DOMTableSlicer('slicer1', table, 'Name');
// スライサーのプロパティを変更します。
slicer.position(new GC.Spread.Sheets.Point(100, 200));
slicer.disableResizingAndMoving(true);
slicer.style(style1);

パラメータ

名前	型
value?	boolean

戻り値

any

値が設定されていない場合は、スライサーのサイズ変更と移動を無効にするかどうかを返します。値が設定されている場合は、スライサーを返します。

---

dynamicMove

▸ dynamicMove(value?): any

行または列を表示/非表示にするとき、サイズ変更するとき、または移動するときにオブジェクトが移動するかどうかを取得または設定します。

実例

// 次のサンプルコードは、浮動オブジェクトを作成します。
var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject("f1", 10, 10, 60, 64);
customFloatingObject.isVisible(true);
customFloatingObject.dynamicSize(true);
customFloatingObject.dynamicMove(true);
var btn = document.createElement('button');
btn.style.width = "60px";
btn.style.height = "30px";
btn.innerText = "button";
customFloatingObject.content(btn);
activeSheet.floatingObjects.add(customFloatingObject);

パラメータ

名前	型
value?	boolean

戻り値

any

値が設定されていない場合は、この浮動オブジェクトが動的に移動するかどうかを返します。値が設定されている場合は、浮動オブジェクトを返します。

継承元

FloatingObject.dynamicMove

---

dynamicSize

▸ dynamicSize(value?): any

行または列を表示/非表示にするとき、サイズ変更するとき、または移動するときにオブジェクトのサイズが変更されるかどうかを取得または設定します。

実例

// 次のサンプルコードは、浮動オブジェクトを作成します。
var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject("f1", 10, 10, 60, 64);
customFloatingObject.isVisible(true);
customFloatingObject.dynamicSize(true);
customFloatingObject.dynamicMove(true);
var btn = document.createElement('button');
btn.style.width = "60px";
btn.style.height = "30px";
btn.innerText = "button";
customFloatingObject.content(btn);
activeSheet.floatingObjects.add(customFloatingObject);

パラメータ

名前	型
value?	boolean

戻り値

any

値が設定されていない場合は、この浮動オブジェクトのサイズが動的に変更されるかどうかを返します。値が設定されている場合は、浮動オブジェクトを返します。

継承元

FloatingObject.dynamicSize

---

endColumn

▸ endColumn(value?): any

浮動オブジェクトの位置の終了列インデックスを取得または設定します。

実例

// 浮動オブジェクトを作成します。
var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject("f1", 10, 10, 60, 64);
var btn = document.createElement('button');
btn.style.width = "60px";
btn.style.height = "30px";
btn.innerText = "button";
customFloatingObject.content(btn);
activeSheet.floatingObjects.add(customFloatingObject);
// 浮動オブジェクトの左上隅をセルアンカーで配置します。
customFloatingObject.startRow(2);
customFloatingObject.startColumn(2);
customFloatingObject.startRowOffset(10);
customFloatingObject.startColumnOffset(10);
// 浮動オブジェクトの右上隅をセルアンカーで配置します。
customFloatingObject.endRow(7);
customFloatingObject.endColumn(5);
customFloatingObject.endRowOffset(10);
customFloatingObject.endColumnOffset(10);

パラメータ

名前	型
value?	number

戻り値

any

値が設定されていない場合は、浮動オブジェクトの位置の終了列インデックスを返します。値が設定されている場合は、浮動オブジェクトを返します。

継承元

FloatingObject.endColumn

---

endColumnOffset

▸ endColumnOffset(value?): any

浮動オブジェクトの終了列に対するオフセットを取得または設定します。

実例

// 浮動オブジェクトを作成します。
var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject("f1", 10, 10, 60, 64);
var btn = document.createElement('button');
btn.style.width = "60px";
btn.style.height = "30px";
btn.innerText = "button";
customFloatingObject.content(btn);
activeSheet.floatingObjects.add(customFloatingObject);
// 浮動オブジェクトの左上隅をセルアンカーで配置します。
customFloatingObject.startRow(2);
customFloatingObject.startColumn(2);
customFloatingObject.startRowOffset(10);
customFloatingObject.startColumnOffset(10);
// 浮動オブジェクトの右上隅をセルアンカーで配置します。
customFloatingObject.endRow(7);
customFloatingObject.endColumn(5);
customFloatingObject.endRowOffset(10);
customFloatingObject.endColumnOffset(10);

パラメータ

名前	型
value?	number

戻り値

any

値が設定されていない場合は、浮動オブジェクトの終了列に対するオフセットを返します。値が設定されている場合は、浮動オブジェクトを返します。

継承元

FloatingObject.endColumnOffset

---

endRow

▸ endRow(value?): any

浮動オブジェクトの位置の終了行インデックスを取得または設定します。

実例

// 浮動オブジェクトを作成します。
var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject("f1", 10, 10, 60, 64);
var btn = document.createElement('button');
btn.style.width = "60px";
btn.style.height = "30px";
btn.innerText = "button";
customFloatingObject.content(btn);
activeSheet.floatingObjects.add(customFloatingObject);
// 浮動オブジェクトの左上隅をセルアンカーで配置します。
customFloatingObject.startRow(2);
customFloatingObject.startColumn(2);
customFloatingObject.startRowOffset(10);
customFloatingObject.startColumnOffset(10);
// 浮動オブジェクトの右上隅をセルアンカーで配置します。
customFloatingObject.endRow(7);
customFloatingObject.endColumn(5);
customFloatingObject.endRowOffset(10);
customFloatingObject.endColumnOffset(10);

パラメータ

名前	型
value?	number

戻り値

any

値が設定されていない場合は、浮動オブジェクトの位置の終了行インデックスを返します。値が設定されている場合は、浮動オブジェクトを返します。

継承元

FloatingObject.endRow

---

endRowOffset

▸ endRowOffset(value?): any

浮動オブジェクトの終了行に対するオフセットを取得または設定します。

実例

// 浮動オブジェクトを作成します。
var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject("f1", 10, 10, 60, 64);
var btn = document.createElement('button');
btn.style.width = "60px";
btn.style.height = "30px";
btn.innerText = "button";
customFloatingObject.content(btn);
activeSheet.floatingObjects.add(customFloatingObject);
// 浮動オブジェクトの左上隅をセルアンカーで配置します。
customFloatingObject.startRow(2);
customFloatingObject.startColumn(2);
customFloatingObject.startRowOffset(10);
customFloatingObject.startColumnOffset(10);
// 浮動オブジェクトの右上隅をセルアンカーで配置します。
customFloatingObject.endRow(7);
customFloatingObject.endColumn(5);
customFloatingObject.endRowOffset(10);
customFloatingObject.endColumnOffset(10);

パラメータ

名前	型
value?	number

戻り値

any

値が設定されていない場合は、フローティングオブジェクトの終了行に対するオフセットを返します。値が設定されている場合は、フローティングオブジェクトを返します。

継承元

FloatingObject.endRowOffset

---

fixedPosition

▸ fixedPosition(value): any

浮動オブジェクトの位置が固定されているかどうかを取得または設定します。fixedPositionがtrueの場合、dynamicMoveとdynamicSizeは無効になります。

実例

// 次のサンプルコードは、オブジェクトの位置を固定します。
var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject("f1", 10, 10, 60, 64);
customFloatingObject.fixedPosition(true);
var btn = document.createElement('button');
btn.style.width = "60px";
btn.style.height = "30px";
btn.innerText = "button";
customFloatingObject.content(btn);
activeSheet.floatingObjects.add(customFloatingObject);

パラメータ

名前	型
value	boolean

戻り値

any

値が設定されていない場合は、浮動オブジェクトの位置が固定されているかどうかを返します。値が設定されている場合は、浮動オブジェクトを返します。

継承元

FloatingObject.fixedPosition

---

getHost

▸ getHost(): HTMLElement[]

カスタムコンテンツのDOMホストを取得します。

戻り値

HTMLElement[]

継承元

FloatingObject.getHost

---

height

▸ height(value?): any

浮動オブジェクトの高さを取得または設定します。

実例

// 次のサンプルコードは、浮動オブジェクトを作成します。
var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject("f1");
customFloatingObject.x(10);
customFloatingObject.y(10);
customFloatingObject.width(60);
customFloatingObject.height(64);
var btn = document.createElement('button');
btn.style.width = "60px";
btn.style.height = "30px";
btn.innerText = "button";
customFloatingObject.content(btn);
activeSheet.floatingObjects.add(customFloatingObject);

パラメータ

名前	型
value?	number

戻り値

any

値が設定されていない場合は、浮動オブジェクトの高さを返します。値が設定されている場合は、浮動オブジェクトを返します。

継承元

FloatingObject.height

---

isLocked

▸ isLocked(value?): any

この浮動オブジェクトがロックされているかどうかを取得または設定します。

実例

var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject("f1");
customFloatingObject.x(10);
customFloatingObject.y(10);
customFloatingObject.width(60);
customFloatingObject.height(64);
customFloatingObject.isLocked(true);
var btn = document.createElement('button');
btn.style.width = "60px";
btn.style.height = "30px";
btn.innerText = "button";
customFloatingObject.content(btn);
activeSheet.floatingObjects.add(customFloatingObject);
activeSheet.options.isProtected = true;

パラメータ

名前	型
value?	boolean

戻り値

any

値が設定されていない場合は、この浮動オブジェクトがロックされているかどうかを返します。値が設定されている場合は、浮動オブジェクトを返します。

継承元

FloatingObject.isLocked

---

isSelected

▸ isSelected(value?): any

この浮動オブジェクトが選択されているかどうかを取得または設定します。

実例

// 次のサンプルコードは、浮動オブジェクトを作成します。
var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject("f1", 10, 10, 60, 64);
customFloatingObject.isSelected(true);
var btn = document.createElement('button');
btn.style.width = "60px";
btn.style.height = "30px";
btn.innerText = "button";
customFloatingObject.content(btn);
activeSheet.floatingObjects.add(customFloatingObject);

パラメータ

名前	型
value?	boolean

戻り値

any

値が設定されていない場合は、この浮動オブジェクトが選択されているかどうかを返します。値が設定されている場合は、浮動オブジェクトを返します。

継承元

FloatingObject.isSelected

---

isVisible

▸ isVisible(value?): any

この浮動オブジェクトが表示されるかどうかを取得または設定します。

実例

// 次のサンプルコードは、浮動オブジェクトを作成します。
var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject("f1", 10, 10, 60, 64);
customFloatingObject.isVisible(true);
customFloatingObject.dynamicSize(true);
customFloatingObject.dynamicMove(true);
var btn = document.createElement('button');
btn.style.width = "60px";
btn.style.height = "30px";
btn.innerText = "button";
customFloatingObject.content(btn);
activeSheet.floatingObjects.add(customFloatingObject);

パラメータ

名前	型
value?	boolean

戻り値

any

値が設定されていない場合は、この浮動オブジェクトが表示されるかどうかを返します。値が設定されている場合は、浮動オブジェクトを返します。

継承元

FloatingObject.isVisible

---

itemHeight

▸ itemHeight(value?): any

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

実例

// 次のサンプルコードは、スライサー項目の高さを変更します。
// テーブルを作成します。
var datas = [
    ["1", "NewYork", "1968/6/8", "80", "180"],
    ["4", "NewYork", "1972/7/3", "72", "168"],
    ["4", "NewYork", "1964/3/2", "71", "179"],
    ["5", "Washington", "1972/8/8","80", "171"],
    ["6", "Washington", "1986/2/2", "89", "161"],
    ["7", "Washington", "2012/2/15", "71", "240"]];
var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
var table = activeSheet.tables.addFromDataSource("table1", 2, 2, datas);
var dataColumns = ["Name", "City", "Birthday", "Weight", "Height"];
table.setColumnName(0, dataColumns[0]);
table.setColumnName(1, dataColumns[1]);
table.setColumnName(2, dataColumns[2]);
table.setColumnName(3, dataColumns[3]);
table.setColumnName(4, dataColumns[4]);

var slicer = new GC.Spread.Sheets.Slicers.DOMTableSlicer('slicer1', table, 'Name');
//　アイテムスライサーをDOMツリーに追加します。
//　"slicerHost"は、スライサーのDOMを追加する対象のdivです。
var slicerHost = document.getElementById("slicerHost");
slicerHost.appendChild(slicer.cloneContent()); // add the slicer to the dom tree
console.log(slicer.itemHeight()); // 21
slicer.itemHeight(35);
console.log(slicer.itemHeight()); // 35

パラメータ

名前	型
value?	number

戻り値

any

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

---

name

▸ name(value?): any

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

実例

// 次のサンプルコードは、nameメソッドを使用します。
// テーブルを作成します。
var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
var datas = [
    ["1", "NewYork", "1968/6/8", "80", "180"],
    ["4", "NewYork", "1972/7/3", "72", "168"],
    ["4", "NewYork", "1964/3/2", "71", "179"],
    ["5", "Washington", "1972/8/8","80", "171"],
    ["6", "Washington", "1986/2/2", "89", "161"],
    ["7", "Washington", "2012/2/15", "71", "240"]];
var table = activeSheet.tables.addFromDataSource("table1", 2, 2, datas);
var dataColumns = ["Name", "City", "Birthday", "Weight", "Height"];
table.setColumnName(0, dataColumns[0]);
table.setColumnName(1, dataColumns[1]);
table.setColumnName(2, dataColumns[2]);
table.setColumnName(3, dataColumns[3]);
table.setColumnName(4, dataColumns[4]);
var slicer = new GC.Spread.Sheets.Slicers.DOMTableSlicer('slicer1', table, 'Name');
//　アイテムスライサーをDOMツリーに追加します。
//　"slicerHost"は、スライサーのDOMを追加する対象のdivです。
var slicerHost = document.getElementById("slicerHost");
slicerHost.appendChild(slicer.cloneContent()); // add the slicer to the dom tree
console.log(slicer.name());
slicer.name("slicer2");
console.log(slicer.name());

パラメータ

名前	型
value?	string

戻り値

any

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

オーバーライド

FloatingObject.name

---

refreshContent

▸ refreshContent(): void

浮動オブジェクトの内容を更新します。内容を浮動オブジェクトと同期させるには、このメソッドをオーバーライドする必要があります。

実例

var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject('floatingObject', 10, 10, 64, 30);
var btn = document.createElement('button');
btn.style.width = "60px";
btn.style.height = "30px";
btn.innerText = "button";
customFloatingObject.content(btn);
//浮動オブジェクトを非表示にします。
customFloatingObject.isVisible(false);
activeSheet.floatingObjects.add(customFloatingObject);

//浮動オブジェクトを表示します。
customFloatingObject.isVisible(true);
customFloatingObject.refreshContent(customFloatingObject.content());

戻り値

void

継承元

FloatingObject.refreshContent

---

showHeader

▸ showHeader(value?): any

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

実例

// 次のサンプルコードは、スライサーのヘッダを非表示にします。
// テーブルを作成します。
var datas = [
    ["1", "NewYork", "1968/6/8", "80", "180"],
    ["4", "NewYork", "1972/7/3", "72", "168"],
    ["4", "NewYork", "1964/3/2", "71", "179"],
    ["5", "Washington", "1972/8/8","80", "171"],
    ["6", "Washington", "1986/2/2", "89", "161"],
    ["7", "Washington", "2012/2/15", "71", "240"]];
var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
var table = activeSheet.tables.addFromDataSource("table1", 2, 2, datas);
var dataColumns = ["Name", "City", "Birthday", "Weight", "Height"];
table.setColumnName(0, dataColumns[0]);
table.setColumnName(1, dataColumns[1]);
table.setColumnName(2, dataColumns[2]);
table.setColumnName(3, dataColumns[3]);
table.setColumnName(4, dataColumns[4]);
// スライサーのスタイル。
var style1 = new GC.Spread.Sheets.Slicers.SlicerStyles.light4();
// スライサーをシートに追加し、スライサーインスタンスを返します。
var slicer = new GC.Spread.Sheets.Slicers.DOMTableSlicer('slicer1', table, 'Name');
//　アイテムスライサーをDOMツリーに追加します。
//　"slicerHost"は、スライサーのDOMを追加する対象のdivです。
var slicerHost = document.getElementById("slicerHost");
slicerHost.appendChild(slicer.cloneContent()); // add the slicer to the dom tree
slicer.position(new GC.Spread.Sheets.Point(100, 200));
slicer.showHeader(false);
slicer.style(style1);

パラメータ

名前	型
value?	boolean

戻り値

any

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

---

showNoDataItems

▸ showNoDataItems(value?): any

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

実例

// テーブルを作成します。
var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
var datas = [
    ["1", "NewYork", "1968/6/8", "80", "180"],
    ["4", "NewYork", "1972/7/3", "72", "168"],
    ["4", "NewYork", "1964/3/2", "71", "179"],
    ["5", "Washington", "1972/8/8","80", "171"],
    ["6", "Washington", "1986/2/2", "89", "161"],
    ["7", "Washington", "2012/2/15", "71", "240"]];
var table = activeSheet.tables.addFromDataSource("table1", 2, 2, datas);
var dataColumns = ["Name", "City", "Birthday", "Weight", "Height"];
table.setColumnName(0, dataColumns[0]);
table.setColumnName(1, dataColumns[1]);
table.setColumnName(2, dataColumns[2]);
table.setColumnName(3, dataColumns[3]);
table.setColumnName(4, dataColumns[4]);
var slicer = new GC.Spread.Sheets.Slicers.DOMTableSlicer('slicer1', table, 'Name');
//　アイテムスライサーをDOMツリーに追加します。
//　"slicerHost"は、スライサーのDOMを追加する対象のdivです。
var slicerHost = document.getElementById("slicerHost");
slicerHost.appendChild(slicer.cloneContent()); // add the slicer to the dom tree
// スライサーのプロパティを変更します。
slicer.showNoDataItems(false);

パラメータ

名前	型
value?	boolean

戻り値

any

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

---

showNoDataItemsInLast

▸ showNoDataItemsInLast(value?): any

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

実例

// テーブルを作成します。
var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
var datas = [
    ["1", "NewYork", "1968/6/8", "80", "180"],
    ["4", "NewYork", "1972/7/3", "72", "168"],
    ["4", "NewYork", "1964/3/2", "71", "179"],
    ["5", "Washington", "1972/8/8","80", "171"],
    ["6", "Washington", "1986/2/2", "89", "161"],
    ["7", "Washington", "2012/2/15", "71", "240"]];
var table = activeSheet.tables.addFromDataSource("table1", 2, 2, datas);
var dataColumns = ["Name", "City", "Birthday", "Weight", "Height"];
table.setColumnName(0, dataColumns[0]);
table.setColumnName(1, dataColumns[1]);
table.setColumnName(2, dataColumns[2]);
table.setColumnName(3, dataColumns[3]);
table.setColumnName(4, dataColumns[4]);
var slicer = new GC.Spread.Sheets.Slicers.DOMTableSlicer('slicer1', table, 'Name');
//　アイテムスライサーをDOMツリーに追加します。
//　"slicerHost"は、スライサーのDOMを追加する対象のdivです。
var slicerHost = document.getElementById("slicerHost");
slicerHost.appendChild(slicer.cloneContent()); // add the slicer to the dom tree
// スライサーのプロパティを変更します。
slicer.showNoDataItemsInLast(false);

パラメータ

名前	型
value?	boolean

戻り値

any

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

---

sortState

▸ sortState(value?): any

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

実例

// 次のサンプルコードは、スライサーの項目のソート順序を設定します。
// テーブルを作成します。
var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
var datas = [
    ["1", "NewYork", "1968/6/8", "80", "180"],
    ["4", "NewYork", "1972/7/3", "72", "168"],
    ["4", "NewYork", "1964/3/2", "71", "179"],
    ["5", "Washington", "1972/8/8","80", "171"],
    ["6", "Washington", "1986/2/2", "89", "161"],
    ["7", "Washington", "2012/2/15", "71", "240"]];
var table = activeSheet.tables.addFromDataSource("table1", 2, 2, datas);
var dataColumns = ["Name", "City", "Birthday", "Weight", "Height"];
table.setColumnName(0, dataColumns[0]);
table.setColumnName(1, dataColumns[1]);
table.setColumnName(2, dataColumns[2]);
table.setColumnName(3, dataColumns[3]);
table.setColumnName(4, dataColumns[4]);
// スライサーのスタイル。
var style1 = new GC.Spread.Sheets.Slicers.SlicerStyles.light4();
var slicer = new GC.Spread.Sheets.Slicers.DOMTableSlicer('slicer1', table, 'Name');
//　アイテムスライサーをDOMツリーに追加します。
//　"slicerHost"は、スライサーのDOMを追加する対象のdivです。
var slicerHost = document.getElementById("slicerHost");
slicerHost.appendChild(slicer.cloneContent()); // add the slicer to the dom tree
// スライサーのプロパティを設定します。
slicer.position(new GC.Spread.Sheets.Point(100, 200));
slicer.sortState(GC.Spread.Sheets.SortState.descending);
slicer.style(style1);

パラメータ

名前	型
value?	SortState

戻り値

any

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

---

startColumn

▸ startColumn(value?): any

浮動オブジェクトの位置の開始列インデックスを取得または設定します。

実例

// 浮動オブジェクトを作成します。
var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject("f1", 10, 10, 60, 64);
var btn = document.createElement('button');
btn.style.width = "60px";
btn.style.height = "30px";
btn.innerText = "button";
customFloatingObject.content(btn);
activeSheet.floatingObjects.add(customFloatingObject);
// 浮動オブジェクトの左上隅をセルアンカーで配置します。
customFloatingObject.startRow(2);
customFloatingObject.startColumn(2);
customFloatingObject.startRowOffset(10);
customFloatingObject.startColumnOffset(10);

パラメータ

名前	型
value?	number

戻り値

any

値が設定されていない場合は、浮動オブジェクトの位置の開始列インデックスを返します。値が設定されている場合は、浮動オブジェクトを返します。

継承元

FloatingObject.startColumn

---

startColumnOffset

▸ startColumnOffset(value?): any

浮動オブジェクトの開始列に対するオフセットを取得または設定します。

実例

// 浮動オブジェクトを作成します。
var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject("f1", 10, 10, 60, 64);
var btn = document.createElement('button');
btn.style.width = "60px";
btn.style.height = "30px";
btn.innerText = "button";
customFloatingObject.content(btn);
activeSheet.floatingObjects.add(customFloatingObject);
// 浮動オブジェクトの左上隅をセルアンカーで配置します。
customFloatingObject.startRow(2);
customFloatingObject.startColumn(2);
customFloatingObject.startRowOffset(10);
customFloatingObject.startColumnOffset(10);

パラメータ

名前	型
value?	number

戻り値

any

値が設定されていない場合は、浮動オブジェクトの開始列に対するオフセットを返します。値が設定されている場合は、浮動オブジェクトを返します。

継承元

FloatingObject.startColumnOffset

---

startRow

▸ startRow(value?): any

浮動オブジェクトの位置の開始行インデックスを取得または設定します。

実例

// 浮動オブジェクトを作成します。
var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject("f1", 10, 10, 60, 64);
var btn = document.createElement('button');
btn.style.width = "60px";
btn.style.height = "30px";
btn.innerText = "button";
customFloatingObject.content(btn);
activeSheet.floatingObjects.add(customFloatingObject);
// 浮動オブジェクトの左上隅をセルアンカーで配置します。
customFloatingObject.startRow(2);
customFloatingObject.startColumn(2);
customFloatingObject.startRowOffset(10);
customFloatingObject.startColumnOffset(10);

パラメータ

名前	型
value?	number

戻り値

any

値が設定されていない場合は、浮動オブジェクトの位置の開始行インデックスを返します。値が設定されている場合は、浮動オブジェクトを返します。

継承元

FloatingObject.startRow

---

startRowOffset

▸ startRowOffset(value?): any

浮動オブジェクトの開始行に対するオフセットを取得または設定します。

実例

// 次のサンプルコードは、浮動オブジェクトを作成します。
var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject("f1", 10, 10, 60, 64);
var btn = document.createElement('button');
btn.style.width = "60px";
btn.style.height = "30px";
btn.innerText = "button";
customFloatingObject.content(btn);
activeSheet.floatingObjects.add(customFloatingObject);
// 浮動オブジェクトの左上隅をセルアンカーで配置します。
customFloatingObject.startRow(2);
customFloatingObject.startColumn(2);
customFloatingObject.startRowOffset(10);
customFloatingObject.startColumnOffset(10);

パラメータ

名前	型
value?	number

戻り値

any

値が設定されていない場合は、浮動オブジェクトの開始行に対するオフセットを返します。値が設定されている場合は、浮動オブジェクトを返します。

継承元

FloatingObject.startRowOffset

---

style

▸ style(value?): any

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

実例

//　次のサンプルコードは、組み込みスタイルを使用します。
// テーブルを作成します。
var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
var datas = [
    ["1", "NewYork", "1968/6/8", "80", "180"],
    ["4", "NewYork", "1972/7/3", "72", "168"],
    ["4", "NewYork", "1964/3/2", "71", "179"],
    ["5", "Washington", "1972/8/8","80", "171"],
    ["6", "Washington", "1986/2/2", "89", "161"],
    ["7", "Washington", "2012/2/15", "71", "240"]];
var table = activeSheet.tables.addFromDataSource("table1", 2, 2, datas);
var dataColumns = ["Name", "City", "Birthday", "Weight", "Height"];
table.setColumnName(0, dataColumns[0]);
table.setColumnName(1, dataColumns[1]);
table.setColumnName(2, dataColumns[2]);
table.setColumnName(3, dataColumns[3]);
table.setColumnName(4, dataColumns[4]);
// スライサーのスタイル。
var style1 = new GC.Spread.Sheets.Slicers.SlicerStyles.light4();
var slicer = new GC.Spread.Sheets.Slicers.DOMTableSlicer('slicer1', table, 'Name');
// スライサーのプロパティを変更します。
slicer.position(new GC.Spread.Sheets.Point(100, 200));
slicer.style(style1);

パラメータ

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

戻り値

any

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

---

toImageSrc

▸ toImageSrc(): string

Base64 文字列タイプのスライサー画像の src を取得します。

実例

let slicerImageSrc = sheet.slicers.all()[0].toImageSrc();

戻り値

string

スライサー画像の Base64 src 文字列を返します。

---

toImageSrcAsync

▸ toImageSrcAsync(): Promise<string>

Base64 文字列タイプのスライサー画像の src を取得します。

実例

let slicerImageSrc = await sheet.slicers.all()[0].toImageSrcAsync();

戻り値

Promise<string>

スライサー画像の Base64 src 文字列を返します。

---

visuallyNoDataItems

▸ visuallyNoDataItems(value?): any

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

実例

// テーブルを作成します。
var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
var datas = [
    ["1", "NewYork", "1968/6/8", "80", "180"],
    ["4", "NewYork", "1972/7/3", "72", "168"],
    ["4", "NewYork", "1964/3/2", "71", "179"],
    ["5", "Washington", "1972/8/8","80", "171"],
    ["6", "Washington", "1986/2/2", "89", "161"],
    ["7", "Washington", "2012/2/15", "71", "240"]];
var table = activeSheet.tables.addFromDataSource("table1", 2, 2, datas);
var dataColumns = ["Name", "City", "Birthday", "Weight", "Height"];
table.setColumnName(0, dataColumns[0]);
table.setColumnName(1, dataColumns[1]);
table.setColumnName(2, dataColumns[2]);
table.setColumnName(3, dataColumns[3]);
table.setColumnName(4, dataColumns[4]);
var slicer = new GC.Spread.Sheets.Slicers.DOMTableSlicer('slicer1', table, 'Name');
//　アイテムスライサーをDOMツリーに追加します。
//　"slicerHost"は、スライサーのDOMを追加する対象のdivです。
var slicerHost = document.getElementById("slicerHost");
slicerHost.appendChild(slicer.cloneContent()); // add the slicer to the dom tree
// スライサーのプロパティを変更します。
slicer.visuallyNoDataItems(false);

パラメータ

名前	型
value?	boolean

戻り値

any

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

---

width

▸ width(value?): any

浮動オブジェクトの幅を取得または設定します。

実例

// 次のサンプルコードは、浮動オブジェクトを作成します。
var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject("f1");
customFloatingObject.x(10);
customFloatingObject.y(10);
customFloatingObject.width(60);
customFloatingObject.height(64);
var btn = document.createElement('button');
btn.style.width = "60px";
btn.style.height = "30px";
btn.innerText = "button";
customFloatingObject.content(btn);
activeSheet.floatingObjects.add(customFloatingObject);

パラメータ

名前	型
value?	number

戻り値

any

値が設定されていない場合は、浮動オブジェクトの幅を返します。値が設定されている場合は、浮動オブジェクトを返します。

継承元

FloatingObject.width

---

x

▸ x(value?): any

浮動オブジェクトの水平位置を取得または設定します。

実例

// 次のサンプルコードは、浮動オブジェクトを作成します。
var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject("f1");
customFloatingObject.x(10);
customFloatingObject.y(10);
customFloatingObject.width(60);
customFloatingObject.height(64);
var btn = document.createElement('button');
btn.style.width = "60px";
btn.style.height = "30px";
btn.innerText = "button";
customFloatingObject.content(btn);
activeSheet.floatingObjects.add(customFloatingObject);

パラメータ

名前	型
value?	number

戻り値

any

値が設定されていない場合は、浮動オブジェクトの水平位置を返します。値が設定されている場合は、浮動オブジェクトを返します。

継承元

FloatingObject.x

---

y

▸ y(value?): any

浮動オブジェクトの垂直位置を取得または設定します。

実例

// 次のサンプルコードは、浮動オブジェクトを作成します。
var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject("f1");
customFloatingObject.x(10);
customFloatingObject.y(10);
customFloatingObject.width(60);
customFloatingObject.height(64);
var btn = document.createElement('button');
btn.style.width = "60px";
btn.style.height = "30px";
btn.innerText = "button";
customFloatingObject.content(btn);
activeSheet.floatingObjects.add(customFloatingObject);

パラメータ

名前	型
value?	number

戻り値

any

値が設定されていない場合は、浮動オブジェクトの垂直位置を返します。値が設定されている場合は、浮動オブジェクトを返します。

継承元

FloatingObject.y