[]
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树
//The "slicerHost" is the div you want to add the slicer's dom to.
$("#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 |
特定区域 range.min: 数值类型,最小值 range.max: 数值类型,最大值 |
number
聚合数据
GeneralSlicerData.aggregateData
▸ attachListener(listener
): void
附加切片器
代码示例
//Define data source.
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"]
);
//Define custom slicer.
function MySlicer(container) {
this.container = container;
this.slicerData = null;
this.columnName = null;
}
MySlicer.prototype.setData = function (slicerData, columnName) {
this.slicerData = slicerData;
this.columnName = columnName;
// attach listener here
this.slicerData.attachListener(this);
this.onDataLoaded();
}
MySlicer.prototype.onDataLoaded = function () {
//create slicer dom tree.
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));
//attach events to 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 () {
//Sync the status if the data has been filtered by the Spread.Sheets table.
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();
}
}
//create a custom slicer and add this slicer to the "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
移除切片器
代码示例
//Define data source.
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"]
);
//Define custom slicer.
function MySlicer(container) {
this.container = container;
this.slicerData = null;
this.columnName = null;
}
MySlicer.prototype.setData = function (slicerData, columnName) {
this.slicerData = slicerData;
this.columnName = columnName;
// attach listener here
this.slicerData.attachListener(this);
this.onDataLoaded();
}
MySlicer.prototype.onDataLoaded = function () {
//create slicer dom tree.
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));
//attach events to 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 () {
//Sync the status if the data has been filtered by the Spread.Sheets table.
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();
}
}
//create a custom slicer and add this slicer to the "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 |
有条件的筛选 conditional.exclusiveRowIndexes: 数字数组类型,可见的排他行索引 conditional.ranges: {min:number, max:number} 数组类型,可见区域 |
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 |
特定区域 range.min: 数值类型,最小值 range.max: 数值类型,最大值 |
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"]
);
//Define custom slicer.
function MySlicer(container) {
this.container = container;
this.slicerData = null;
this.columnName = null;
}
MySlicer.prototype.setData = function (slicerData, columnName) {
this.slicerData = slicerData;
this.columnName = columnName;
// attach listener here
this.slicerData.attachListener(this);
}
MySlicer.prototype.onFiltered = function () {
console.log('filter event triggered');
}
//create a custom slicer and add this slicer to the "slicerContainer" div.
var slicer = new MySlicer($("#slicerContainer")[0]);
slicer.setData(slicerData, 'Name');
slicerData.doFilter('Name', {exclusiveRowIndexes: [1]});
// watch console log: 'filter event triggered'
slicerData.suspendFilteredEvents();
slicerData.doFilter('Name', {exclusiveRowIndexes: [0]});
// watch console log: nothing
slicerData.suspendFilteredEvents();
slicerData.doFilter('Name', {exclusiveRowIndexes: [0, 1]});
// watch console log: 'filter event triggered'
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"]
);
//Define custom slicer.
function MySlicer(container) {
this.container = container;
this.slicerData = null;
this.columnName = null;
}
MySlicer.prototype.setData = function (slicerData, columnName) {
this.slicerData = slicerData;
this.columnName = columnName;
// attach listener here
this.slicerData.attachListener(this);
}
MySlicer.prototype.onFiltered = function () {
console.log('filter event triggered');
}
//create a custom slicer and add this slicer to the "slicerContainer" div.
var slicer = new MySlicer($("#slicerContainer")[0]);
slicer.setData(slicerData, 'Name');
slicerData.doFilter('Name', {exclusiveRowIndexes: [1]});
// watch console log: 'filter event triggered'
slicerData.suspendFilteredEvents();
slicerData.doFilter('Name', {exclusiveRowIndexes: [0]});
// watch console log: nothing
slicerData.suspendFilteredEvents();
slicerData.doFilter('Name', {exclusiveRowIndexes: [0, 1]});
// watch console log: 'filter event triggered'
void