[]
Sheets.Slicers.TableSlicerData
↳ TableSlicerData
• new TableSlicerData(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 = 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());
名前 | 型 | 説明 |
---|---|---|
table |
Table |
テーブル。 |
• columnNames: string
[]
一般スライサーデータの列名を示します。
• data: any
[][]
一般スライサーデータのデータソースを示します。
▸ aggregateData(columnName
, aggregateType
, range?
): number
指定した列名によってデータを集計します。
実例
var slicerData = new GC.Spread.Slicers.GeneralSlicerData(
[
[
{ value: 'Bob', text: 'Bob' },
{ value: 'NewYork', text: 'NewYork' },
{ value: new Date("1968/6/8"), text: '6/8/1968' },
{ value: 10000, text: '10 000' }
],
[
{ value: 'Betty', text: 'Betty' },
{ value: 'NewYork', text: 'NewYork' },
{ value: new Date("1972/7/3"), text: '7/3/1972' },
{ value: 8000, text: '8 000' }
],
[
{ value: 'Alice', text: 'Alice' },
{ value: 'Washington', text: 'Washington' },
{ value: new Date("2012/2/15"), text: '2/15/2012' },
{ value: 5500, text: '5 500' }
],
[
{ value: 'Chris', text: 'Chris' },
{ value: 'Washington', text: 'Washington' },
{ value: new Date("2001/9/2"), text: '9/2/2001' },
{ value: 6200, text: '6 200' }
],
[
{ value: 'James', text: 'James' },
{ value: 'Phoenix', text: 'Phoenix' },
{ value: new Date("1995/11/22"), text: '11/22/1995' },
{ value: 16150, text: '16 150' }
]
], ["Name", "City", "Birthday", "Salary"]
);
console.log(slicerData.aggregateData('Salary', GC.Spread.Slicers.SlicerAggregateType.average));
console.log(slicerData.aggregateData('Salary', GC.Spread.Slicers.SlicerAggregateType.count, {min: 8000, max: 20000}));
名前 | 型 | 説明 |
---|---|---|
columnName |
string |
列名。 |
aggregateType |
SlicerAggregateType |
集計タイプ。 |
range? |
ISlicerRangeConditional |
特定の範囲。 |
number
集計されたデータ。
GeneralSlicerData.aggregateData
▸ attachListener(listener
): void
リスナーをアタッチします。SlicerData は、適切なタイミングで対応するインタフェースを呼び出します。
実例
// データソースを定義します。
var slicerData = new GC.Spread.Slicers.GeneralSlicerData(
[
[
{ value: 'Bob', text: 'Bob' },
{ value: 'NewYork', text: 'NewYork' },
{ value: new Date("1968/6/8"), text: '6/8/1968' },
{ value: 10000, text: '10 000' }
],
[
{ value: 'Betty', text: 'Betty' },
{ value: 'NewYork', text: 'NewYork' },
{ value: new Date("1972/7/3"), text: '7/3/1972' },
{ value: 8000, text: '8 000' }
],
[
{ value: 'Alice', text: 'Alice' },
{ value: 'Washington', text: 'Washington' },
{ value: new Date("2012/2/15"), text: '2/15/2012' },
{ value: 5500, text: '5 500' }
],
[
{ value: 'Chris', text: 'Chris' },
{ value: 'Washington', text: 'Washington' },
{ value: new Date("2001/9/2"), text: '9/2/2001' },
{ value: 6200, text: '6 200' }
],
[
{ value: 'James', text: 'James' },
{ value: 'Phoenix', text: 'Phoenix' },
{ value: new Date("1995/11/22"), text: '11/22/1995' },
{ value: 16150, text: '16 150' }
]
], ["Name", "City", "Birthday", "Salary"]
);
// カスタムスライサーを定義します。
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 () {
// スライサー dom ツリーを作成します。
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));
// イベントを 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 () {
// データが Spread.Sheets テーブルによってフィルターされる場合は、ステータスを同期します。
var slicerData = this.slicerData;
var exclusiveIndexes = slicerData.getFilteredIndexes(this.columnName);
$.each($("#slicerContainer").children("input"), function (i, input) {
});
}
MySlicer.prototype.onColumnsRemoved = function (columnName) {
if (columnName === this.columnName) {
this.slicerData.detachListener(this);
this.slicerData = null;
$("#slicerContainer").remove();
}
}
// カスタムスライサーを作成し、このスライサーを「slicerContainer」div に追加します。
var slicer = new MySlicer($("#slicerContainer")[0]);
slicer.setData(slicerData, 'Name');
名前 | 型 | 説明 |
---|---|---|
listener |
ISlicerListener |
リスナー。 |
void
GeneralSlicerData.attachListener
▸ clearPreview(): void
プレビューフィルタ状態をクリアします。スライサーがプレビューでフィルタを実行するかどうかは、slicerData.inPreview() API を使用して確認できます。doFilter() に isPreview フラグを true に設定すると (slicerData.doFilter('Name', {exclusiveRowIndexes: [1]}, true); のように)、clearPreview() API によってプレビュー状態をクリアできます。 これにより、プレビューフィルタの状態が削除されます。
実例
var slicerData = new GC.Spread.Slicers.GeneralSlicerData(
[
[
{ value: 'Bob', text: 'Bob' },
{ value: 'NewYork', text: 'NewYork' },
{ value: new Date("1968/6/8"), text: '6/8/1968' },
{ value: 10000, text: '10 000' }
],
[
{ value: 'Betty', text: 'Betty' },
{ value: 'NewYork', text: 'NewYork' },
{ value: new Date("1972/7/3"), text: '7/3/1972' },
{ value: 8000, text: '8 000' }
],
[
{ value: 'Bob', text: 'Bob' },
{ value: 'Washington', text: 'Washington' },
{ value: new Date("2012/2/15"), text: '2/15/2012' },
{ value: 8000, text: '5 500' }
],
], ["Name", "City", "Birthday", "Salary"]
);
console.log(slicerData.getFilteredOutIndexes('Name', GC.Spread.Slicers.FilteredOutDataType.all)); // []
slicerData.doFilter('Name', {exclusiveRowIndexes: [1, 2]});
console.log(slicerData.getFilteredOutIndexes('Name', GC.Spread.Slicers.FilteredOutDataType.all)); // [0]
console.log(slicerData.inPreview()); // false
slicerData.clearPreview();
console.log(slicerData.getFilteredOutIndexes('Name', GC.Spread.Slicers.FilteredOutDataType.all)); // [0]
slicerData.doUnfilter('Name');
console.log(slicerData.getFilteredOutIndexes('Name', GC.Spread.Slicers.FilteredOutDataType.all)); // []
slicerData.doFilter('Name', {exclusiveRowIndexes: [1, 2]}, true);
console.log(slicerData.getFilteredOutIndexes('Name', GC.Spread.Slicers.FilteredOutDataType.all)); // [0]
console.log(slicerData.inPreview()); // true
slicerData.clearPreview();
console.log(slicerData.inPreview()); // false
console.log(slicerData.getFilteredOutIndexes('Name', GC.Spread.Slicers.FilteredOutDataType.all)); // []
void
GeneralSlicerData.clearPreview
▸ detachListener(listener
): void
リスナーをデタッチします。
実例
// データソースを定義します。
var slicerData = new GC.Spread.Slicers.GeneralSlicerData(
[
[
{ value: 'Bob', text: 'Bob' },
{ value: 'NewYork', text: 'NewYork' },
{ value: new Date("1968/6/8"), text: '6/8/1968' },
{ value: 10000, text: '10 000' }
],
[
{ value: 'Betty', text: 'Betty' },
{ value: 'NewYork', text: 'NewYork' },
{ value: new Date("1972/7/3"), text: '7/3/1972' },
{ value: 8000, text: '8 000' }
],
[
{ value: 'Alice', text: 'Alice' },
{ value: 'Washington', text: 'Washington' },
{ value: new Date("2012/2/15"), text: '2/15/2012' },
{ value: 5500, text: '5 500' }
],
[
{ value: 'Chris', text: 'Chris' },
{ value: 'Washington', text: 'Washington' },
{ value: new Date("2001/9/2"), text: '9/2/2001' },
{ value: 6200, text: '6 200' }
],
[
{ value: 'James', text: 'James' },
{ value: 'Phoenix', text: 'Phoenix' },
{ value: new Date("1995/11/22"), text: '11/22/1995' },
{ value: 16150, text: '16 150' }
]
], ["Name", "City", "Birthday", "Salary"]
);
// カスタムスライサーを定義します。
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 () {
// スライサー dom ツリーを作成します。
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));
// イベントを 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 () {
// データが Spread.Sheets テーブルによってフィルターされる場合は、ステータスを同期します。
var slicerData = this.slicerData;
var exclusiveIndexes = slicerData.getFilteredIndexes(this.columnName);
$.each($("#slicerContainer").children("input"), function (i, input) {
});
}
MySlicer.prototype.onColumnRemoved = function (columnName) {
if (columnName === this.columnName) {
this.slicerData.detachListener(this);
this.slicerData = null;
$("#slicerContainer").remove();
}
}
// カスタムスライサーを作成し、このスライサーを「slicerContainer」div に追加します。
var slicer = new MySlicer($("#slicerContainer")[0]);
slicer.setData(slicerData, 'Name');
名前 | 型 | 説明 |
---|---|---|
listener |
ISlicerListener |
リスナー。 |
void
GeneralSlicerData.detachListener
▸ doFilter(columnName
, conditional
, isPreview?
): void
指定した列名と排他的データのインデックスに対応するデータをフィルタします。
実例
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);
slicerData.getFilteredOutIndexes('Name', GC.Spread.Slicers.FilteredOutDataType.all); // []
slicerData.doFilter('Name', {exclusiveRowIndexes: [0]});
slicerData.getFilteredOutIndexes('Name', GC.Spread.Slicers.FilteredOutDataType.all); // [1, 2]
名前 | 型 | 説明 |
---|---|---|
columnName |
string |
列名。 |
conditional |
ISlicerConditional |
フィルタ条件。 |
isPreview? |
boolean |
- |
void
▸ doUnfilter(columnName
): void
指定した列名に対応するデータをフィルタ解除します。
実例
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);
slicerData.getFilteredOutIndexes('Name', GC.Spread.Slicers.FilteredOutDataType.all); // []
slicerData.doFilter('Name', {exclusiveRowIndexes: [0]});
slicerData.getFilteredOutIndexes('Name', GC.Spread.Slicers.FilteredOutDataType.all); // [1, 2]
slicerData.doUnfilter('Name');
slicerData.getFilteredOutIndexes('Name', GC.Spread.Slicers.FilteredOutDataType.all); // []
名前 | 型 | 説明 |
---|---|---|
columnName |
string |
列名。 |
void
▸ getColumnIndex(columnName
): number
指定した列名によって列インデックスを取得します。
実例
var slicerData = new GC.Spread.Slicers.GeneralSlicerData(
[
[
{ value: 'Bob', text: 'Bob' },
{ value: 'NewYork', text: 'NewYork' },
{ value: new Date("1968/6/8"), text: '6/8/1968' },
{ value: 10000, text: '10 000' }
],
[
{ value: 'Betty', text: 'Betty' },
{ value: 'NewYork', text: 'NewYork' },
{ value: new Date("1972/7/3"), text: '7/3/1972' },
{ value: 8000, text: '8 000' }
],
[
{ value: 'Alice', text: 'Alice' },
{ value: 'Washington', text: 'Washington' },
{ value: new Date("2012/2/15"), text: '2/15/2012' },
{ value: 5500, text: '5 500' }
],
[
{ value: 'Chris', text: 'Chris' },
{ value: 'Washington', text: 'Washington' },
{ value: new Date("2001/9/2"), text: '9/2/2001' },
{ value: 6200, text: '6 200' }
],
[
{ value: 'James', text: 'James' },
{ value: 'Phoenix', text: 'Phoenix' },
{ value: new Date("1995/11/22"), text: '11/22/1995' },
{ value: 16150, text: '16 150' }
]
], ["Name", "City", "Birthday", "Salary"]
);
console.log(slicerData.getColumnIndex('Name')); // 0
console.log(slicerData.getColumnIndex('Unknown')); // -1
console.log(slicerData.getColumnIndex('Salary')); // 3
名前 | 型 | 説明 |
---|---|---|
columnName |
string |
列名。 |
number
列インデックス。
GeneralSlicerData.getColumnIndex
▸ getData(columnName
, range?
): string
[]
指定した列名によってデータを取得します。
実例
var slicerData = new GC.Spread.Slicers.GeneralSlicerData(
[
[
{ value: 'Bob', text: 'Bob' },
{ value: 'NewYork', text: 'NewYork' },
{ value: new Date("1968/6/8"), text: '6/8/1968' },
{ value: 10000, text: '10 000' }
],
[
{ value: 'Betty', text: 'Betty' },
{ value: 'NewYork', text: 'NewYork' },
{ value: new Date("1972/7/3"), text: '7/3/1972' },
{ value: 8000, text: '8 000' }
],
[
{ value: 'Alice', text: 'Alice' },
{ value: 'Washington', text: 'Washington' },
{ value: new Date("2012/2/15"), text: '2/15/2012' },
{ value: 5500, text: '5 500' }
],
[
{ value: 'Chris', text: 'Chris' },
{ value: 'Washington', text: 'Washington' },
{ value: new Date("2001/9/2"), text: '9/2/2001' },
{ value: 6200, text: '6 200' }
],
[
{ value: 'James', text: 'James' },
{ value: 'Phoenix', text: 'Phoenix' },
{ value: new Date("1995/11/22"), text: '11/22/1995' },
{ value: 16150, text: '16 150' }
]
], ["Name", "City", "Birthday", "Salary"]
);
console.log(slicerData.getData('Name')); // ['Bob', 'Betty', 'Alice', 'Chris', 'James']
console.log(slicerData.getData('Salary')); // ['10 000', '8 000', '5 500', '6 200', '16 150']
console.log(slicerData.getData('Salary', {min: 5000, max: 10000})); // ['5 500', '6 200', '8 000', '10 000']
名前 | 型 | 説明 |
---|---|---|
columnName |
string |
列名。 |
range? |
ISlicerRangeConditional |
- |
string
[]
指定した列名に対応するデータ。
▸ getExclusiveData(columnName
): any
[]
指定した列名によって排他的データを取得します。
実例
var slicerData = new GC.Spread.Slicers.GeneralSlicerData(
[
[
{ value: 'Bob', text: 'Bob' },
{ value: 'NewYork', text: 'NewYork' },
{ value: new Date("1968/6/8"), text: '6/8/1968' },
{ value: 10000, text: '10 000' }
],
[
{ value: 'Betty', text: 'Betty' },
{ value: 'NewYork', text: 'NewYork' },
{ value: new Date("1972/7/3"), text: '7/3/1972' },
{ value: 8000, text: '8 000' }
],
[
{ value: 'Bob', text: 'Bob' },
{ value: 'Washington', text: 'Washington' },
{ value: new Date("2012/2/15"), text: '2/15/2012' },
{ value: 8000, text: '8 000' }
],
], ["Name", "City", "Birthday", "Salary"]
);
console.log(slicerData.getData('Name')); // ['Bob', 'Betty', 'Bob']
console.log(slicerData.getExclusiveData('Name')); // ['Bob', 'Betty']
console.log(slicerData.getData('Salary')); // ['10 000', '8 000', '8 000']
console.log(slicerData.getExclusiveData('Salary')); // ['10 000', '8 000']
名前 | 型 | 説明 |
---|---|---|
columnName |
string |
列名。 |
any
[]
指定した列名に対応する排他的データ。
GeneralSlicerData.getExclusiveData
▸ getExclusiveRowIndex(columnName
, rowIndex
): number
指定した列名とデータインデックスによって排他的データのインデックスを取得します。
実例
var slicerData = new GC.Spread.Slicers.GeneralSlicerData(
[
[
{ value: 'Bob', text: 'Bob' },
{ value: 'NewYork', text: 'NewYork' },
{ value: new Date("1968/6/8"), text: '6/8/1968' },
{ value: 10000, text: '10 000' }
],
[
{ value: 'Betty', text: 'Betty' },
{ value: 'NewYork', text: 'NewYork' },
{ value: new Date("1972/7/3"), text: '7/3/1972' },
{ value: 8000, text: '8 000' }
],
[
{ value: 'Bob', text: 'Bob' },
{ value: 'Washington', text: 'Washington' },
{ value: new Date("2012/2/15"), text: '2/15/2012' },
{ value: 8000, text: '8 000' }
],
], ["Name", "City", "Birthday", "Salary"]
);
console.log(slicerData.getRowIndexes('Name', 0)); // [0, 2]
console.log(slicerData.getExclusiveRowIndex('Name', 0)); // 0
console.log(slicerData.getExclusiveRowIndex('Name', 1)); // 1
console.log(slicerData.getExclusiveRowIndex('Name', 2)); // 0
名前 | 型 | 説明 |
---|---|---|
columnName |
string |
列名。 |
rowIndex |
number |
データのインデックス。 |
number
指定した列名とデータインデックスに対応する排他的データのインデックス。
GeneralSlicerData.getExclusiveRowIndex
▸ getFilteredIndexes(columnName
): number
[]
指定した列名によってフィルタされた排他的データのインデックスを取得します。
実例
var slicerData = new GC.Spread.Slicers.GeneralSlicerData(
[
[
{ value: 'Bob', text: 'Bob' },
{ value: 'NewYork', text: 'NewYork' },
{ value: new Date("1968/6/8"), text: '6/8/1968' },
{ value: 10000, text: '10 000' }
],
[
{ value: 'Betty', text: 'Betty' },
{ value: 'NewYork', text: 'NewYork' },
{ value: new Date("1972/7/3"), text: '7/3/1972' },
{ value: 8000, text: '8 000' }
],
[
{ value: 'Alice', text: 'Alice' },
{ value: 'Washington', text: 'Washington' },
{ value: new Date("2012/2/15"), text: '2/15/2012' },
{ value: 5500, text: '5 500' }
],
[
{ value: 'Chris', text: 'Chris' },
{ value: 'Washington', text: 'Washington' },
{ value: new Date("2001/9/2"), text: '9/2/2001' },
{ value: 6200, text: '6 200' }
],
[
{ value: 'James', text: 'James' },
{ value: 'Phoenix', text: 'Phoenix' },
{ value: new Date("1995/11/22"), text: '11/22/1995' },
{ value: 16150, text: '16 150' }
]
], ["Name", "City", "Birthday", "Salary"]
);
console.log(slicerData.getFilteredIndexes('Name')); // [0, 1, 2, 3, 4]
slicerData.doFilter('Name', {exclusiveRowIndexes: [1, 2]});
console.log(slicerData.getFilteredIndexes('Name')); // [1, 2]
slicerData.doUnfilter('Name');
console.log(slicerData.getFilteredIndexes('Name')); // [0, 1, 2, 3, 4]
名前 | 型 | 説明 |
---|---|---|
columnName |
string |
列名。 |
number
[]
指定した列名に対応するフィルタされた排他的データのインデックス。
GeneralSlicerData.getFilteredIndexes
▸ getFilteredOutIndexes(columnName
, filteredOutDataType
): number
[]
指定した列名によってフィルタアウトされた排他的データのインデックスを取得します。
実例
var slicerData = new GC.Spread.Slicers.GeneralSlicerData(
[
[
{ value: 'Bob', text: 'Bob' },
{ value: 'NewYork', text: 'NewYork' },
{ value: new Date("1968/6/8"), text: '6/8/1968' },
{ value: 10000, text: '10 000' }
],
[
{ value: 'Betty', text: 'Betty' },
{ value: 'NewYork', text: 'NewYork' },
{ value: new Date("1972/7/3"), text: '7/3/1972' },
{ value: 8000, text: '8 000' }
],
[
{ value: 'Alice', text: 'Alice' },
{ value: 'Washington', text: 'Washington' },
{ value: new Date("2012/2/15"), text: '2/15/2012' },
{ value: 5500, text: '5 500' }
],
[
{ value: 'Chris', text: 'Chris' },
{ value: 'Washington', text: 'Washington' },
{ value: new Date("2001/9/2"), text: '9/2/2001' },
{ value: 6200, text: '6 200' }
],
[
{ value: 'James', text: 'James' },
{ value: 'Phoenix', text: 'Phoenix' },
{ value: new Date("1995/11/22"), text: '11/22/1995' },
{ value: 16150, text: '16 150' }
]
], ["Name", "City", "Birthday", "Salary"]
);
console.log(slicerData.getFilteredOutIndexes('Name', GC.Spread.Slicers.FilteredOutDataType.all)); // []
slicerData.doFilter('Name', {exclusiveRowIndexes: [1, 2]});
console.log(slicerData.getFilteredOutIndexes('Name', GC.Spread.Slicers.FilteredOutDataType.all)); // [0, 3, 4]
slicerData.doUnfilter('Name');
console.log(slicerData.getFilteredOutIndexes('Name', GC.Spread.Slicers.FilteredOutDataType.all)); // []
名前 | 型 | 説明 |
---|---|---|
columnName |
string |
列名。 |
filteredOutDataType |
FilteredOutDataType |
結果に含める、フィルタアウトされた排他的データのインデックスの種類を示します。 |
number
[]
指定した列名に対応するフィルタアウトされた排他的データのインデックス。
GeneralSlicerData.getFilteredOutIndexes
▸ getFilteredOutRanges(columnName
): ISlicerRangeConditional
[]
他の列によってフィルタアウトされた範囲を取得します。
実例
var slicerData = new GC.Spread.Slicers.GeneralSlicerData(
[
[
{ value: 'Bob', text: 'Bob' },
{ value: 'NewYork', text: 'NewYork' },
{ value: new Date("1968/6/8"), text: '6/8/1968' },
{ value: 10000, text: '10 000' }
],
[
{ value: 'Betty', text: 'Betty' },
{ value: 'NewYork', text: 'NewYork' },
{ value: new Date("1972/7/3"), text: '7/3/1972' },
{ value: 8000, text: '8 000' }
],
[
{ value: 'Alice', text: 'Alice' },
{ value: 'Washington', text: 'Washington' },
{ value: new Date("2012/2/15"), text: '2/15/2012' },
{ value: 5500, text: '5 500' }
],
[
{ value: 'Chris', text: 'Chris' },
{ value: 'Washington', text: 'Washington' },
{ value: new Date("2001/9/2"), text: '9/2/2001' },
{ value: 6200, text: '6 200' }
],
[
{ value: 'James', text: 'James' },
{ value: 'Phoenix', text: 'Phoenix' },
{ value: new Date("1995/11/22"), text: '11/22/1995' },
{ value: 16150, text: '16 150' }
]
], ["Name", "City", "Birthday", "Salary"]
);
slicerData.doFilter('Salary', {
ranges: [
{ min: 5000, max: 10000 },
{ min: 5000, max: 200000 },
{ min: 60000, max: 61000 }
]
});
console.log(slicerData.getFilteredOutRanges('Salary')); // [{min: 60000, max: 61000}]
console.log(slicerData.getFilteredRanges('Salary')); // [{min: 5000, max: 10000}, {min: 5000, max: 200000}]
名前 | 型 | 説明 |
---|---|---|
columnName |
string |
列名。 |
指定した列名に対応する、他の列によってフィルタアウトされた範囲。
GeneralSlicerData.getFilteredOutRanges
▸ getFilteredOutRowIndexes(): number
[]
フィルタアウトされた行のインデックスを取得します。
実例
var slicerData = new GC.Spread.Slicers.GeneralSlicerData(
[
[
{ value: 'Bob', text: 'Bob' },
{ value: 'NewYork', text: 'NewYork' },
{ value: new Date("1968/6/8"), text: '6/8/1968' },
{ value: 10000, text: '10 000' }
],
[
{ value: 'Betty', text: 'Betty' },
{ value: 'NewYork', text: 'NewYork' },
{ value: new Date("1972/7/3"), text: '7/3/1972' },
{ value: 8000, text: '8 000' }
],
[
{ value: 'Alice', text: 'Alice' },
{ value: 'Washington', text: 'Washington' },
{ value: new Date("2012/2/15"), text: '2/15/2012' },
{ value: 5500, text: '5 500' }
],
[
{ value: 'Chris', text: 'Chris' },
{ value: 'Washington', text: 'Washington' },
{ value: new Date("2001/9/2"), text: '9/2/2001' },
{ value: 6200, text: '6 200' }
],
[
{ value: 'James', text: 'James' },
{ value: 'Phoenix', text: 'Phoenix' },
{ value: new Date("1995/11/22"), text: '11/22/1995' },
{ value: 16150, text: '16 150' }
]
], ["Name", "City", "Birthday", "Salary"]
);
slicerData.doFilter('Salary', {
exclusiveRowIndexes: [0, 1, 2]
});
console.log(slicerData.getFilteredOutRowIndexes('Salary')); // [3, 4]
console.log(slicerData.getFilteredRowIndexes('Salary')); // [0, 1, 2]
number
[]
フィルタアウトされた行のインデックス。
GeneralSlicerData.getFilteredOutRowIndexes
▸ getFilteredRanges(columnName
): ISlicerRangeConditional
[]
指定した列名によってフィルタされた範囲を取得します。
実例
var slicerData = new GC.Spread.Slicers.GeneralSlicerData(
[
[
{ value: 'Bob', text: 'Bob' },
{ value: 'NewYork', text: 'NewYork' },
{ value: new Date("1968/6/8"), text: '6/8/1968' },
{ value: 10000, text: '10 000' }
],
[
{ value: 'Betty', text: 'Betty' },
{ value: 'NewYork', text: 'NewYork' },
{ value: new Date("1972/7/3"), text: '7/3/1972' },
{ value: 8000, text: '8 000' }
],
[
{ value: 'Alice', text: 'Alice' },
{ value: 'Washington', text: 'Washington' },
{ value: new Date("2012/2/15"), text: '2/15/2012' },
{ value: 5500, text: '5 500' }
],
[
{ value: 'Chris', text: 'Chris' },
{ value: 'Washington', text: 'Washington' },
{ value: new Date("2001/9/2"), text: '9/2/2001' },
{ value: 6200, text: '6 200' }
],
[
{ value: 'James', text: 'James' },
{ value: 'Phoenix', text: 'Phoenix' },
{ value: new Date("1995/11/22"), text: '11/22/1995' },
{ value: 16150, text: '16 150' }
]
], ["Name", "City", "Birthday", "Salary"]
);
slicerData.doFilter('Salary', {
ranges: [
{ min: 5000, max: 10000 },
{ min: 5000, max: 200000 },
{ min: 60000, max: 61000 }
]
});
console.log(slicerData.getFilteredOutRanges('Salary')); // [{min: 60000, max: 61000}]
console.log(slicerData.getFilteredRanges('Salary')); // [{min: 5000, max: 10000}, {min: 5000, max: 200000}]
名前 | 型 | 説明 |
---|---|---|
columnName |
string |
列名。 |
指定した列名に対応するフィルタされた範囲。
GeneralSlicerData.getFilteredRanges
▸ getFilteredRowIndexes(): number
[]
フィルタされた行のインデックスを取得します。
実例
var slicerData = new GC.Spread.Slicers.GeneralSlicerData(
[
[
{ value: 'Bob', text: 'Bob' },
{ value: 'NewYork', text: 'NewYork' },
{ value: new Date("1968/6/8"), text: '6/8/1968' },
{ value: 10000, text: '10 000' }
],
[
{ value: 'Betty', text: 'Betty' },
{ value: 'NewYork', text: 'NewYork' },
{ value: new Date("1972/7/3"), text: '7/3/1972' },
{ value: 8000, text: '8 000' }
],
[
{ value: 'Alice', text: 'Alice' },
{ value: 'Washington', text: 'Washington' },
{ value: new Date("2012/2/15"), text: '2/15/2012' },
{ value: 5500, text: '5 500' }
],
[
{ value: 'Chris', text: 'Chris' },
{ value: 'Washington', text: 'Washington' },
{ value: new Date("2001/9/2"), text: '9/2/2001' },
{ value: 6200, text: '6 200' }
],
[
{ value: 'James', text: 'James' },
{ value: 'Phoenix', text: 'Phoenix' },
{ value: new Date("1995/11/22"), text: '11/22/1995' },
{ value: 16150, text: '16 150' }
]
], ["Name", "City", "Birthday", "Salary"]
);
slicerData.doFilter('Salary', {
exclusiveRowIndexes: [0, 1, 2]
});
console.log(slicerData.getFilteredOutRowIndexes('Salary')); // [3, 4]
console.log(slicerData.getFilteredRowIndexes('Salary')); // [0, 1, 2]
number
[]
フィルタされた行のインデックス。
GeneralSlicerData.getFilteredRowIndexes
▸ getRowIndexes(columnName
, exclusiveRowIndex
): number
[]
指定した列名と排他的データのインデックスによってデータインデックスを取得します。
実例
var slicerData = new GC.Spread.Slicers.GeneralSlicerData(
[
[
{ value: 'Bob', text: 'Bob' },
{ value: 'NewYork', text: 'NewYork' },
{ value: new Date("1968/6/8"), text: '6/8/1968' },
{ value: 10000, text: '10 000' }
],
[
{ value: 'Betty', text: 'Betty' },
{ value: 'NewYork', text: 'NewYork' },
{ value: new Date("1972/7/3"), text: '7/3/1972' },
{ value: 8000, text: '8 000' }
],
[
{ value: 'Bob', text: 'Bob' },
{ value: 'Washington', text: 'Washington' },
{ value: new Date("2012/2/15"), text: '2/15/2012' },
{ value: 8000, text: '8 000' }
],
], ["Name", "City", "Birthday", "Salary"]
);
console.log(slicerData.getRowIndexes('Name', 0)); // [0, 2]
console.log(slicerData.getRowIndexes('Name', 1)); // [1]
console.log(slicerData.getRowIndexes('Name', 2)); // undefined
console.log(slicerData.getRowIndexes('Salary', 1)); // [1, 2]
名前 | 型 | 説明 |
---|---|---|
columnName |
string |
列名。 |
exclusiveRowIndex |
number |
排他的データのインデックス。 |
number
[]
指定した列名と排他的データのインデックスに対応するデータインデックス。
GeneralSlicerData.getRowIndexes
▸ getTable(): Table
テーブルスライサーデータのテーブルを取得します。
実例
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 = table.getSlicerData(); // GC.Spread.Sheets.Slicers.TableSlicerData
console.log(slicerData.getTable() === table); // true
テーブルスライサーデータのテーブル。
▸ inPreview(): boolean
スライサーがプレビュー状態にあるかどうかを取得します。doFilter() に isPreview フラグを true に設定すると (slicerData.doFilter('Name', {exclusiveRowIndexes: [1]}, true); のように)、スライサーがプレビューでフィルタを実行するかどうかは、slicerData.inPreview() API を使用して確認できます。
実例
var slicerData = new GC.Spread.Slicers.GeneralSlicerData(
[
[
{ value: 'Bob', text: 'Bob' },
{ value: 'NewYork', text: 'NewYork' },
{ value: new Date("1968/6/8"), text: '6/8/1968' },
{ value: 10000, text: '10 000' }
],
[
{ value: 'Betty', text: 'Betty' },
{ value: 'NewYork', text: 'NewYork' },
{ value: new Date("1972/7/3"), text: '7/3/1972' },
{ value: 8000, text: '8 000' }
],
[
{ value: 'Bob', text: 'Bob' },
{ value: 'Washington', text: 'Washington' },
{ value: new Date("2012/2/15"), text: '2/15/2012' },
{ value: 8000, text: '5 500' }
],
], ["Name", "City", "Birthday", "Salary"]
);
console.log(slicerData.getFilteredOutIndexes('Name', GC.Spread.Slicers.FilteredOutDataType.all)); // []
slicerData.doFilter('Name', {exclusiveRowIndexes: [1, 2]});
console.log(slicerData.getFilteredOutIndexes('Name', GC.Spread.Slicers.FilteredOutDataType.all)); // [0]
console.log(slicerData.inPreview()); // false
slicerData.clearPreview();
console.log(slicerData.getFilteredOutIndexes('Name', GC.Spread.Slicers.FilteredOutDataType.all)); // [0]
slicerData.doUnfilter('Name');
console.log(slicerData.getFilteredOutIndexes('Name', GC.Spread.Slicers.FilteredOutDataType.all)); // []
slicerData.doFilter('Name', {exclusiveRowIndexes: [1, 2]}, true);
console.log(slicerData.getFilteredOutIndexes('Name', GC.Spread.Slicers.FilteredOutDataType.all)); // [0]
console.log(slicerData.inPreview()); // true
slicerData.clearPreview();
console.log(slicerData.inPreview()); // false
console.log(slicerData.getFilteredOutIndexes('Name', GC.Spread.Slicers.FilteredOutDataType.all)); // []
boolean
▸ onColumnNameChanged(oldName
, newName
): void
一般スライサーデータの列名を変更します。
実例
var slicerData = new GC.Spread.Slicers.GeneralSlicerData(
[
[
{ value: 'Bob', text: 'Bob' },
{ value: 'NewYork', text: 'NewYork' },
{ value: new Date("1968/6/8"), text: '6/8/1968' },
{ value: 10000, text: '10 000' }
],
[
{ value: 'Betty', text: 'Betty' },
{ value: 'NewYork', text: 'NewYork' },
{ value: new Date("1972/7/3"), text: '7/3/1972' },
{ value: 8000, text: '8 000' }
]
], ["Name", "City", "Birthday", "Salary"]
);
console.log(slicerData.getExclusiveData('Name')); // ['Bob', 'Betty']
slicerData.onColumnNameChanged('Name', 'NewName');
console.log(slicerData.getExclusiveData('Name')); // []
console.log(slicerData.getExclusiveData('NewName')); // ['Bob', 'Betty']
名前 | 型 | 説明 |
---|---|---|
oldName |
string |
列の古い名前。 |
newName |
string |
列の新しい名前。 |
void
GeneralSlicerData.onColumnNameChanged
▸ onColumnsRemoved(colIndex
, colCount
): void
一般スライサーデータの列を削除します。
実例
var slicerData = new GC.Spread.Slicers.GeneralSlicerData(
[
[
{ value: 'Bob', text: 'Bob' },
{ value: 'NewYork', text: 'NewYork' },
{ value: new Date("1968/6/8"), text: '6/8/1968' },
{ value: 10000, text: '10 000' }
],
[
{ value: 'Betty', text: 'Betty' },
{ value: 'NewYork', text: 'NewYork' },
{ value: new Date("1972/7/3"), text: '7/3/1972' },
{ value: 8000, text: '8 000' }
]
], ["Name", "City", "Birthday", "Salary"]
);
console.log(slicerData.getData('Name')); // ['Bob', 'Betty']
slicerData.onColumnsRemoved(0, 1);
console.log(slicerData.getData('Name')); // []
名前 | 型 | 説明 |
---|---|---|
colIndex |
number |
開始列のインデックス。 |
colCount |
number |
削除する列数。 |
void
GeneralSlicerData.onColumnsRemoved
▸ onDataChanged(changedDataItems
): void
一般スライサーデータのデータソースに含まれるデータアイテムを変更します。
実例
var slicerData = new GC.Spread.Slicers.GeneralSlicerData(
[
[
{ value: 'Bob', text: 'Bob' },
{ value: 'NewYork', text: 'NewYork' },
{ value: new Date("1968/6/8"), text: '6/8/1968' },
{ value: 10000, text: '10 000' }
],
[
{ value: 'Betty', text: 'Betty' },
{ value: 'NewYork', text: 'NewYork' },
{ value: new Date("1972/7/3"), text: '7/3/1972' },
{ value: 8000, text: '8 000' }
]
], ["Name", "City", "Birthday", "Salary"]
);
console.log(slicerData.getData('Name')); // ['Bob', 'Betty']
slicerData.onDataChanged([{columnName: 'Name', rowIndex: 1, row: 1, data: {value: 'Alice', text: 'Alice'}}]);
console.log(slicerData.getData('Name')); // ['Bob', 'Alice']
名前 | 型 | 説明 |
---|---|---|
changedDataItems |
ISlicerDataItem |
データソース内の変更されるデータアイテム。 |
void
GeneralSlicerData.onDataChanged
▸ onFiltered(): void
スライサーデータがフィルタされた後に発生します。
void
▸ onRowsAdded(rowIndex
, rowCount
): void
一般スライサーデータのデータソースに行を追加します。
実例
var slicerData = new GC.Spread.Slicers.GeneralSlicerData(
[
[
{ value: 'Bob', text: 'Bob' },
{ value: 'NewYork', text: 'NewYork' },
{ value: new Date("1968/6/8"), text: '6/8/1968' },
{ value: 10000, text: '10 000' }
],
[
{ value: 'Betty', text: 'Betty' },
{ value: 'NewYork', text: 'NewYork' },
{ value: new Date("1972/7/3"), text: '7/3/1972' },
{ value: 8000, text: '8 000' }
]
], ["Name", "City", "Birthday", "Salary"]
);
console.log(slicerData.getData('Name')); // ['Bob', 'Betty']
slicerData.onRowsAdded(1, 2);
console.log(slicerData.getData('Name')); // ['Bob', undefined, undefined, 'Betty']
名前 | 型 | 説明 |
---|---|---|
rowIndex |
number |
開始行のインデックス。 |
rowCount |
number |
追加する行数。 |
void
▸ onRowsRemoved(rowIndex
, rowCount
): void
一般スライサーデータのデータソースから行を削除します。
実例
var slicerData = new GC.Spread.Slicers.GeneralSlicerData(
[
[
{ value: 'Bob', text: 'Bob' },
{ value: 'NewYork', text: 'NewYork' },
{ value: new Date("1968/6/8"), text: '6/8/1968' },
{ value: 10000, text: '10 000' }
],
[
{ value: 'Betty', text: 'Betty' },
{ value: 'NewYork', text: 'NewYork' },
{ value: new Date("1972/7/3"), text: '7/3/1972' },
{ value: 8000, text: '8 000' }
]
], ["Name", "City", "Birthday", "Salary"]
);
console.log(slicerData.getData('Name')); // ['Bob', 'Betty']
slicerData.onRowsAdded(1, 2);
console.log(slicerData.getData('Name')); // ['Bob', undefined, undefined, 'Betty']
slicerData.onRowsRemoved(2, 1);
console.log(slicerData.getData('Name')); // ['Bob', undefined, 'Betty']
名前 | 型 | 説明 |
---|---|---|
rowIndex |
number |
開始行のインデックス。 |
rowCount |
number |
削除する行数。 |
void
GeneralSlicerData.onRowsRemoved
▸ refresh(): void
テーブルスライサーデータを更新します。テーブルスライサー データのデータソースを再構築します。
void
▸ resumeFilteredEvents(): void
onFilteredイベントを再開します。
実例
var slicerData = new GC.Spread.Slicers.GeneralSlicerData(
[
[
{ value: 'Bob', text: 'Bob' },
{ value: 'NewYork', text: 'NewYork' },
{ value: new Date("1968/6/8"), text: '6/8/1968' },
{ value: 10000, text: '10 000' }
],
[
{ value: 'Betty', text: 'Betty' },
{ value: 'NewYork', text: 'NewYork' },
{ value: new Date("1972/7/3"), text: '7/3/1972' },
{ value: 8000, text: '8 000' }
],
], ["Name", "City", "Birthday", "Salary"]
);
// カスタムスライサーを定義します。
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);
}
MySlicer.prototype.onFiltered = function () {
console.log('filter event triggered');
}
// カスタムスライサーを作成し、このスライサーを「slicerContainer」div に追加します。
var slicer = new MySlicer($("#slicerContainer")[0]);
slicer.setData(slicerData, 'Name');
slicerData.doFilter('Name', {exclusiveRowIndexes: [1]});
// コンソール ログの監視: 「フィルタイベントがトリガーされました」
slicerData.suspendFilteredEvents();
slicerData.doFilter('Name', {exclusiveRowIndexes: [0]});
// コンソール ログの監視: 「なし」
slicerData.suspendFilteredEvents();
slicerData.doFilter('Name', {exclusiveRowIndexes: [0, 1]});
// コンソール ログの監視: 「フィルタイベントがトリガーされました」
void
GeneralSlicerData.resumeFilteredEvents
▸ suspendFilteredEvents(): void
onFilteredイベントを中断します。
実例
var slicerData = new GC.Spread.Slicers.GeneralSlicerData(
[
[
{ value: 'Bob', text: 'Bob' },
{ value: 'NewYork', text: 'NewYork' },
{ value: new Date("1968/6/8"), text: '6/8/1968' },
{ value: 10000, text: '10 000' }
],
[
{ value: 'Betty', text: 'Betty' },
{ value: 'NewYork', text: 'NewYork' },
{ value: new Date("1972/7/3"), text: '7/3/1972' },
{ value: 8000, text: '8 000' }
],
], ["Name", "City", "Birthday", "Salary"]
);
// カスタムスライサーを定義します。
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);
}
MySlicer.prototype.onFiltered = function () {
console.log('filter event triggered');
}
// カスタムスライサーを作成し、このスライサーを「slicerContainer」div に追加します。
var slicer = new MySlicer($("#slicerContainer")[0]);
slicer.setData(slicerData, 'Name');
slicerData.doFilter('Name', {exclusiveRowIndexes: [1]});
// コンソール ログの監視: 「フィルタイベントがトリガーされました」
slicerData.suspendFilteredEvents();
slicerData.doFilter('Name', {exclusiveRowIndexes: [0]});
// コンソール ログの監視: 「なし」
slicerData.suspendFilteredEvents();
slicerData.doFilter('Name', {exclusiveRowIndexes: [0, 1]});
// コンソール ログの監視: 「フィルタイベントがトリガーされました」
void