[]
• new ItemSlicer(name
, slicerData
, columnName
)
项切片器
代码示例
//本示例创建一个项切片器
//创建表格
var dataSource = [
{ Name: "Bob", City: "NewYork", Birthday: "1968/6/8" },
{ Name: "Betty", City: "NewYork", Birthday: "1972/7/3" },
{ Name: "Alice", City: "Washington", Birthday: "2012/2/15" },
var table = activeSheet.tables.addFromDataSource("table1", 1, 1, dataSource);
var slicerData = new GC.Spread.Sheets.Slicers.TableSlicerData(table)
//给项切片器设置项切片器数据
var slicer = new GC.Spread.Sheets.Slicers.ItemSlicer("slicer", slicerData, "Name");
//将项切片器添加到dom树
//The "slicerHost" is the div you want to add the slicer's dom to.
$("#slicerHost").append(slicer.getDOMElement());
属性名 | 类型 | 说明 |
---|---|---|
name |
string |
项切片器名称 |
slicerData |
GeneralSlicerData |
GeneralSlicerData或TableSlicerData的实例 |
columnName |
string |
与项切片器相关的列名称 |
▸ captionName(value?
): any
获取或设置项切片器头部名称
代码示例
var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
var dataSource = [
{ Name: "Bob", City: "NewYork", Birthday: "1968/6/8" },
{ Name: "Betty", City: "NewYork", Birthday: "1972/7/3" },
{ Name: "Alice", City: "Washington", Birthday: "2012/2/15" },
];
var table = activeSheet.tables.addFromDataSource("table1", 1, 1, dataSource);
var slicerData = new GC.Spread.Sheets.Slicers.TableSlicerData(table)
//Set slicer data to item slicer.
var slicer = new GC.Spread.Sheets.Slicers.ItemSlicer("slicer", slicerData, "Name");
var oldValue = slicer.captionName();
console.log(oldValue);
slicer.captionName('Slicer_Caption');
var newValue = slicer.captionName();
console.log(newValue);
属性名 | 类型 |
---|---|
value? |
string |
any
如果未设置任何值,则返回项切片器头部名称;否则,返回项切片器
▸ columnCount(value?
): any
获取或设置项切片器的列数
代码示例
var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
var dataSource = [
{ Name: "Bob", City: "NewYork", Birthday: "1968/6/8" },
{ Name: "Betty", City: "NewYork", Birthday: "1972/7/3" },
{ Name: "Alice", City: "Washington", Birthday: "2012/2/15" },
];
var table = activeSheet.tables.addFromDataSource("table1", 1, 1, dataSource);
var slicerData = new GC.Spread.Sheets.Slicers.TableSlicerData(table)
//Set slicer data to item slicer.
var slicer = new GC.Spread.Sheets.Slicers.ItemSlicer("slicer", slicerData, "Name");
var oldValue = slicer.columnCount();
console.log(oldValue);
slicer.columnCount(3);
var newValue = slicer.columnCount();
console.log(newValue);
属性名 | 类型 |
---|---|
value? |
number |
any
如果未设置任何值,则返回项切片器的列数;否则,返回项切片器
▸ getDOMElement(): HTMLElement
获取项切片器的dom元素
代码示例
//This example creates an item slicer.
//create 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)
//Set slicer data to item slicer.
var slicer = new GC.Spread.Sheets.Slicers.ItemSlicer("slicer", slicerData, "Name");
//Add the item slicer to the dom tree.
//The "slicerHost" is the div you want to add the slicer's dom to.
$("#slicerHost").append(slicer.getDOMElement());
HTMLElement
项切片器的dom元素
▸ getStyleName(): undefined
| string
获取或设置表项切片器的样式名称。
undefined
| string
返回表项切片器样式名称。
▸ height(value?
): any
获取或设置项切片器的高度
代码示例
var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
var dataSource = [
{ Name: "Bob", City: "NewYork", Birthday: "1968/6/8" },
{ Name: "Betty", City: "NewYork", Birthday: "1972/7/3" },
{ Name: "Alice", City: "Washington", Birthday: "2012/2/15" },
];
var table = activeSheet.tables.addFromDataSource("table1", 1, 1, dataSource);
var slicerData = new GC.Spread.Sheets.Slicers.TableSlicerData(table)
//Set slicer data to item slicer.
var slicer = new GC.Spread.Sheets.Slicers.ItemSlicer("slicer", slicerData, "Name");
var oldValue = slicer.height();
console.log(oldValue);
slicer.height(120);
var newValue = slicer.height();
console.log(newValue);
属性名 | 类型 |
---|---|
value? |
number |
any
如果未设置任何值,则返回项切片器的高度;否则,返回项切片器
▸ itemHeight(value?
): any
获取或设置项切片器的项高度
代码示例
var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
var dataSource = [
{ Name: "Bob", City: "NewYork", Birthday: "1968/6/8" },
{ Name: "Betty", City: "NewYork", Birthday: "1972/7/3" },
{ Name: "Alice", City: "Washington", Birthday: "2012/2/15" },
];
var table = activeSheet.tables.addFromDataSource("table1", 1, 1, dataSource);
var slicerData = new GC.Spread.Sheets.Slicers.TableSlicerData(table)
//Set slicer data to item slicer.
var slicer = new GC.Spread.Sheets.Slicers.ItemSlicer("slicer", slicerData, "Name");
var oldValue = slicer.itemHeight();
console.log(oldValue);
slicer.itemHeight(34);
var newValue = slicer.itemHeight();
console.log(newValue);
属性名 | 类型 |
---|---|
value? |
number |
any
如果未设置任何值,则返回项切片器的项高度;否则,返回项切片器
▸ name(value?
): any
获取或设置项切片器的名称
代码示例
var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
var dataSource = [
{ Name: "Bob", City: "NewYork", Birthday: "1968/6/8" },
{ Name: "Betty", City: "NewYork", Birthday: "1972/7/3" },
{ Name: "Alice", City: "Washington", Birthday: "2012/2/15" },
];
var table = activeSheet.tables.addFromDataSource("table1", 1, 1, dataSource);
var slicerData = new GC.Spread.Sheets.Slicers.TableSlicerData(table)
//Set slicer data to item slicer.
var slicer = new GC.Spread.Sheets.Slicers.ItemSlicer("slicer", slicerData, "Name");
var oldValue = slicer.name();
console.log(oldValue);
slicer.name('SlicerA');
var newValue = slicer.name();
console.log(newValue);
属性名 | 类型 |
---|---|
value? |
string |
any
如果未设置任何值,则返回项切片器的名称;否则,返回项切片器
▸ showHeader(value?
): any
获取或设置是否显示项切片器头部
代码示例
var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
var dataSource = [
{ Name: "Bob", City: "NewYork", Birthday: "1968/6/8" },
{ Name: "Betty", City: "NewYork", Birthday: "1972/7/3" },
{ Name: "Alice", City: "Washington", Birthday: "2012/2/15" },
];
var table = activeSheet.tables.addFromDataSource("table1", 1, 1, dataSource);
var slicerData = new GC.Spread.Sheets.Slicers.TableSlicerData(table)
//Set slicer data to item slicer.
var slicer = new GC.Spread.Sheets.Slicers.ItemSlicer("slicer", slicerData, "Name");
var oldValue = slicer.showHeader();
console.log(oldValue);
slicer.showHeader(false);
var newValue = slicer.showHeader();
console.log(newValue);
属性名 | 类型 |
---|---|
value? |
boolean |
any
如果未设置任何值,则返回是否显示项切片器头部;否则,返回项切片器
▸ showNoDataItems(value?
): any
获取或设置是否显示项切片器的无数据项
代码示例
var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
var dataSource = [
{ Name: "Bob", City: "NewYork", Birthday: "1968/6/8" },
{ Name: "Betty", City: "NewYork", Birthday: "1972/7/3" },
{ Name: "Alice", City: "Washington", Birthday: "2012/2/15" },
];
var table = activeSheet.tables.addFromDataSource("table1", 1, 1, dataSource);
var slicerData = new GC.Spread.Sheets.Slicers.TableSlicerData(table)
//Set slicer data to item slicer.
var slicer = new GC.Spread.Sheets.Slicers.ItemSlicer("slicer", slicerData, "Name");
var oldValue = slicer.showNoDataItems();
console.log(oldValue);
slicer.showNoDataItems(false);
var newValue = slicer.showNoDataItems();
console.log(newValue);
属性名 | 类型 |
---|---|
value? |
boolean |
any
如果未设置任何值,则返回是否显示项切片器的无数据项;否则,返回项切片器
▸ showNoDataItemsInLast(value?
): any
获取或设置是否最后显示无数据项
代码示例
var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
var dataSource = [
{ Name: "Bob", City: "NewYork", Birthday: "1968/6/8" },
{ Name: "Betty", City: "NewYork", Birthday: "1972/7/3" },
{ Name: "Alice", City: "Washington", Birthday: "2012/2/15" },
];
var table = activeSheet.tables.addFromDataSource("table1", 1, 1, dataSource);
var slicerData = new GC.Spread.Sheets.Slicers.TableSlicerData(table)
//Set slicer data to item slicer.
var slicer = new GC.Spread.Sheets.Slicers.ItemSlicer("slicer", slicerData, "Name");
var oldValue = slicer.showNoDataItemsInLast();
console.log(oldValue);
slicer.showNoDataItemsInLast(false);
var newValue = slicer.showNoDataItemsInLast();
console.log(newValue);
属性名 | 类型 |
---|---|
value? |
boolean |
any
如果未设置任何值,则返回是否最后显示无数据项;否则,返回项切片器
▸ sortState(value?
): any
获取或设置项切片器的排序状态
代码示例
var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
var dataSource = [
{ Name: "Bob", City: "NewYork", Birthday: "1968/6/8" },
{ Name: "Betty", City: "NewYork", Birthday: "1972/7/3" },
{ Name: "Alice", City: "Washington", Birthday: "2012/2/15" },
];
var table = activeSheet.tables.addFromDataSource("table1", 1, 1, dataSource);
var slicerData = new GC.Spread.Sheets.Slicers.TableSlicerData(table)
//Set slicer data to item slicer.
var slicer = new GC.Spread.Sheets.Slicers.ItemSlicer("slicer", slicerData, "Name");
var oldValue = slicer.sortState();
console.log(oldValue);
slicer.sortState(GC.Spread.Sheets.SortState.descending);
var newValue = slicer.sortState();
console.log(newValue);
属性名 | 类型 |
---|---|
value? |
SortState |
any
如果未设置任何值,则返回项切片器的排序状态;否则,返回项切片器
▸ style(value?
): any
获取或设置项切片器的样式
代码示例
样式是json数据,其json模式如下:
{
"$schema" : "http://json-schema.org/draft-04/schema#",
"title" : "style",
"type" : "object",
"properties" : {
"wholeSlicerStyle" : {
"$ref" : "#/definitions/StyleInfo"
},
"headerStyle" : {
"$ref" : "#/definitions/StyleInfo"
},
"selectedItemWithDataStyle" : {
"$ref" : "#/definitions/StyleInfo"
},
"selectedItemWithNoDataStyle" : {
"$ref" : "#/definitions/StyleInfo"
},
"unSelectedItemWithDataStyle" : {
"$ref" : "#/definitions/StyleInfo"
},
"unSelectedItemWithNoDataStyle" : {
"$ref" : "#/definitions/StyleInfo"
},
"hoveredSelectedItemWithDataStyle" : {
"$ref" : "#/definitions/StyleInfo"
},
"hoveredSelectedItemWithNoDataStyle" : {
"$ref" : "#/definitions/StyleInfo"
},
"hoveredUnSelectedItemWithDataStyle" : {
"$ref" : "#/definitions/StyleInfo"
},
"hoveredUnSelectedItemWithNoDataStyle" : {
"$ref" : "#/definitions/StyleInfo"
}
},
"definitions" : {
"StyleInfo" : {
"type" : "object",
"properties" : {
"backColor" : {
"type" : "string"
},
"foreColor" : {
"type" : "string"
},
"font" : {
"type" : "string"
},
"borderLeft" : {
"$ref" : "#/definitions/SlicerBorder"
},
"borderTop" : {
"$ref" : "#/definitions/SlicerBorder"
},
"borderRight" : {
"$ref" : "#/definitions/SlicerBorder"
},
"borderBottom" : {
"$ref" : "#/definitions/SlicerBorder"
},
"textDecoration":{
"type" : "string"
}
}
},
"SlicerBorder":{
"type":"object",
"properties":{
"borderWidth":{
"type":"number"
},
"borderStyle":{
"type":"string"
},
"borderColor":{
"type":"string"
}
}
}
}
}
using sample:
var style = new GC.Spread.Sheets.Slicers.SlicerStyle();
style.wholeSlicerStyle(new GC.Spread.Sheets.Slicers.SlicerStyleInfo('red', 'blue', '16pt Calibri'));
style.headerStyle(new GC.Spread.Sheets.Slicers.SlicerStyleInfo(undefined, 'green'));
style.selectedItemWithDataStyle(new GC.Spread.Sheets.Slicers.SlicerStyleInfo(undefined, undefined, undefined, new GC.Spread.Sheets.LineBorder('pink', GC.Spread.Sheets.LineStyle.double)));
var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
var dataSource = [
{ Name: "Bob", City: "NewYork", Birthday: "1968/6/8" },
{ Name: "Betty", City: "NewYork", Birthday: "1972/7/3" },
{ Name: "Alice", City: "Washington", Birthday: "2012/2/15" },
];
var table = activeSheet.tables.addFromDataSource("table1", 1, 1, dataSource);
var slicerData = new GC.Spread.Sheets.Slicers.TableSlicerData(table)
//Set slicer data to item slicer.
var slicer = new GC.Spread.Sheets.Slicers.ItemSlicer("slicer", slicerData, "Name");
var oldValue = slicer.style();
console.log(oldValue);
slicer.style(style);
var newValue = slicer.style();
console.log(newValue);
属性名 | 类型 | 说明 |
---|---|---|
value? |
any |
项切片器的样式 |
any
如果未设置任何值,则返回项切片器的样式;否则,返回项切片器
▸ visuallyNoDataItems(value?
): any
获取或设置是否在视觉上区分没有数据的项
代码示例
var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
var dataSource = [
{ Name: "Bob", City: "NewYork", Birthday: "1968/6/8" },
{ Name: "Betty", City: "NewYork", Birthday: "1972/7/3" },
{ Name: "Alice", City: "Washington", Birthday: "2012/2/15" },
];
var table = activeSheet.tables.addFromDataSource("table1", 1, 1, dataSource);
var slicerData = new GC.Spread.Sheets.Slicers.TableSlicerData(table)
//Set slicer data to item slicer.
var slicer = new GC.Spread.Sheets.Slicers.ItemSlicer("slicer", slicerData, "Name");
var oldValue = slicer.visuallyNoDataItems();
console.log(oldValue);
slicer.visuallyNoDataItems(false);
var newValue = slicer.visuallyNoDataItems();
console.log(newValue);
属性名 | 类型 |
---|---|
value? |
boolean |
any
如果未设置任何值,则返回是否在视觉上区分没有数据的项;否则,返回项切片器
▸ width(value?
): any
获取或设置项切片器的宽度
代码示例
var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
var dataSource = [
{ Name: "Bob", City: "NewYork", Birthday: "1968/6/8" },
{ Name: "Betty", City: "NewYork", Birthday: "1972/7/3" },
{ Name: "Alice", City: "Washington", Birthday: "2012/2/15" },
];
var table = activeSheet.tables.addFromDataSource("table1", 1, 1, dataSource);
var slicerData = new GC.Spread.Sheets.Slicers.TableSlicerData(table)
//Set slicer data to item slicer.
var slicer = new GC.Spread.Sheets.Slicers.ItemSlicer("slicer", slicerData, "Name");
var oldValue = slicer.width();
console.log(oldValue);
slicer.width(120);
var newValue = slicer.width();
console.log(newValue);
属性名 | 类型 |
---|---|
value? |
number |
any
如果未设置任何值,则返回项切片器的宽度;否则,返回项切片器