层级数据
SpreadJS 在数据模式中提供层次结构选项来定义数据源是层次结构的。
hierarchy选项继承自GC.Data.IDataSourceOption接口，提供如下参数：
type：定义层次结构类型。 它可以是以下值之一：Parent、ChildrenPath、Level 或 Custom。
column：指定将有助于构建分层数据的层次结构键。
levelOffset：表示电平偏移量，可以增加或减少电平。 通常，层次级别从 0 开始。
outlineColumn：继承自GC.Data.IHierarchyOutlineColumnOptions，它指定了可以显示为层次结构的列。
summaryFields：继承自GC.Data.IHierarchySummaryFieldCollection，定义字段的公式。
parse：继承自GC.Data.IHierarchyCustomParseOptions，将自定义层级类型的主键解析为父键。
unparse：继承自GC.Data.IHierarchyCustomUnparseOptions，构建自定义层级类型的主键。
层次结构类型
层次结构有四种类型，Parent、Level、ChildrenPath 和 Custom。 在将表添加到数据管理器时，可以配置它们中的每一个：
父层次结构
在Parent hierarchy中，使用层次结构类型'Parent'，主键用于指示层次结构id。
以下代码示例显示了如何在集算表中设置父层次结构：
<script>
var spread = new GC.Spread.Sheets.Workbook(document.querySelector('#ss'), { sheetCount: 0 });
initSpread(spread)
function initSpread(spread) {
var dataManager = spread.dataManager();
initHierarchyParentType(spread, dataManager);
}
function initHierarchyParentType(spread, dataManager) {
var table = dataManager.addTable("hierarchyParentTable", {
data: initHierarchyParentData(),
schema: {
hierarchy: {
type: 'Parent', // config the parent hierarchy type
column: 'parentId', // specify the column that could be used for building hierarchical view
},
columns: {
'id': { dataName: 'id', isPrimaryKey: true }, // the primary key is required
'parentId': { dataName: 'parentId', dataType: "reorder" },
}
}
});
var sheet = spread.addSheetTab(0, "HierarchyParent", GC.Spread.Sheets.SheetType.tableSheet);
sheet.setDefaultRowHeight(40, GC.Spread.Sheets.SheetArea.colHeader);
sheet.options.allowAddNew = true;
table.fetch().then(function () {
var myView = table.addView("myView", [
{
value: "parentId", width: 200,
outlineColumn: {
showImage: true,
images: ['httpss://en.onboarding.grapecitydev.com/spreadjs/demos/spread/source/images/task-1.png', 'httpss://en.onboarding.grapecitydev.com/spreadjs/demos/spread/source/images/task-2.png', 'httpss://en.onboarding.grapecitydev.com/spreadjs/demos/spread/source/images/task-3.png'],
expandIndicator: 'httpss://en.onboarding.grapecitydev.com/spreadjs/demos/spread/source/images/increaseIndicator.png',
collapseIndicator: 'httpss://en.onboarding.grapecitydev.com/spreadjs/demos/spread/source/images/decreaseIndicator.png',
},
},
{ value: "id", width: 200 },
]);
sheet.setDataView(myView);
});
}
function initHierarchyParentData() {
var data = [
{ id: 1, parentId: -1 },
{ id: 2, parentId: -1 },
{ id: 3, parentId: 1 },
{ id: 4, parentId: 1 },
{ id: 5, parentId: 2 },
{ id: 6, parentId: 2 },
{ id: 6, parentId: 2 },
];
return data;
}
</script>ChildrenPath 层次结构
在 ChildrenPath 层次结构中，使用层次结构类型“ChildrenPath”。 在这种情况下，主键不是必需的，但是，最好为孩子指明主键。
以下代码示例显示了如何在集算表中设置 ChildrenPath 层次结构：
<script>
var spread = new GC.Spread.Sheets.Workbook(document.querySelector('#ss'), { sheetCount: 0 });
initSpread(spread)
function initSpread(spread) {
var dataManager = spread.dataManager();
initHierarchyParentType(spread, dataManager);
}
function initHierarchyParentType(spread, dataManager) {
var taskTable = dataManager.addTable("Tasks", {
data: initHierarchyChildData(),
schema: {
hierarchy: {
type: 'ChildrenPath',
column: 'TaskChildren',
},
columns: {
TaskName: { dataName: 'name' },
TaskChildren: { dataName: 'children' },
// other columns in the child
}
}
});
var sheet = spread.addSheetTab(0, "HierarchyParent", GC.Spread.Sheets.SheetType.tableSheet);
sheet.setDefaultRowHeight(40, GC.Spread.Sheets.SheetArea.colHeader);
sheet.options.allowAddNew = true;
taskTable.fetch().then(r => {
var taskView = taskTable.addView('TaskView', [
{
value: 'TaskName', outlineColumn: true, width: "*" // this option indicates the column showing as outline column
}
]);
sheet.setDataView(taskView);
})
}
function initHierarchyChildData() {
var data = [
{
name: 'USA',
children: [
{
name: 'Texas',
children: [
{
name: 'Houston',
},
{
name: 'Dallas',
},
{
name: 'San Antonio',
}
]
}
]
},
{
name: 'India',
children: [
{
name: 'UP',
children: [
{ name: 'Noida' },
{ name: 'Ghaziabad' },
{ name: 'Agra' },
]
}
]
}
]
return data;
}
</script>级别结构
在级别层次结构中，使用层次结构类型“级别”。 在这种情况下，也不需要主键，但最好指明主键。
以下代码示例显示了如何在集算表中设置级别层次结构：
<script>
var spread = new GC.Spread.Sheets.Workbook(document.querySelector('#ss'), { sheetCount: 0 });
initSpread(spread)
function initSpread(spread) {
var dataManager = spread.dataManager();
initHierarchyParentType(spread, dataManager);
}
function initHierarchyParentType(spread, dataManager) {
var taskTable = dataManager.addTable("Tasks", {
data: initHierarchyLevelData(),
schema: {
hierarchy: {
type: 'Level',
column: 'TaskLevel',
},
columns: {
TaskName: { dataName: 'name' },
TaskId: { dataName: 'id', isPrimaryKey: true }, // using primary key to indicate the hierarchy id optionally if exist
TaskLevel: { dataName: 'level' },
}
}
});
var sheet = spread.addSheetTab(0, "HierarchyParent", GC.Spread.Sheets.SheetType.tableSheet);
sheet.setDefaultRowHeight(40, GC.Spread.Sheets.SheetArea.colHeader);
sheet.options.allowAddNew = true;
taskTable.fetch().then(r => {
var taskView = taskTable.addView('TaskView', [
{
value: 'TaskName', outlineColumn: true// this option indicates the column showing as outline column
}
]);
sheet.setDataView(taskView);
})
}
function initHierarchyLevelData() {
var data = [
{ name: 'USA', level: -1, id: 1 },
{ name: 'Texas', level: 0, id: 2 },
{ name: 'Houston', level: 1, id: 3 },
{ name: 'California', level: 0, id: 4 },
{ name: 'San Francisco', level: 1, id: 5 },
{ name: 'Los Angeles', level: 1, id: 6 },
];
return data;
}
</script>自定义层次结构
在自定义层次结构中，使用层次结构类型“自定义”。 在这里，主键是可选的。
以下代码示例显示了如何在表格中设置自定义层次结构：
<script>
var spread = new GC.Spread.Sheets.Workbook(document.querySelector('#ss'), { sheetCount: 0 });
initSpread(spread)
function initSpread(spread) {
var dataManager = spread.dataManager();
initHierarchyParentType(spread, dataManager);
}
function initHierarchyParentType(spread, dataManager) {
var taskTable = dataManager.addTable("Tasks", {
data: initHierarchyChildData(),
schema: {
hierarchy: {
type: 'Custom',
column: 'id',
parse: function (options) {
// parse the primary key "1.1.1" to "1.1"
// the returned value will be treated as parentId
let seg = options.data.TaskId.split('.');
return seg.slice(0, seg.length - 1).join('.')
},
unparse: function (options) {
let parentIds, currentIndex = options.index, parentData = options.parentData, parentKey = parentData && parentData.TaskId;
if (parentKey) {
let sp = parentKey.split('.');
parentIds = sp;
} else {
parentIds = [];
}
parentIds.push(currentIndex + 1);
return parentIds.join('.');
}
},
columns: {
TaskName: { dataName: 'name' },
TaskId: { dataName: 'id', isPrimaryKey: true }, // using primary key to indicate the hierarchy id optionally
}
}
});
var sheet = spread.addSheetTab(0, "HierarchyParent", GC.Spread.Sheets.SheetType.tableSheet);
sheet.setDefaultRowHeight(40, GC.Spread.Sheets.SheetArea.colHeader);
sheet.options.allowAddNew = true;
taskTable.fetch().then(r => {
var taskView = taskTable.addView('TaskView', [
{
value: 'TaskName', outlineColumn: true, width: "*" // this option indicates the column showing as outline column
}
]);
sheet.setDataView(taskView);
})
}
function initHierarchyChildData() {
var data = [
{
id: '1', name: "1"
},
{ id: '2', name: '2' },
{ id: '1.1', name: "1.1" },
{ id: '1.1.1', name: '1.1.1' },
{ id: '2.1', name: '2.1' }
]
return data;
}
</script>集算表支持以下分层操作：
提升指定行的层级数据层级
TableSheets 允许用户使用 promoteHierarchyLevel(row: number) 方法通过指定索引提升层次结构数据级别。
降低指定行的层级数据级别
TableSheets 允许用户使用 demoteHierarchyLevel(row: number, withChildren?: boolean) 方法降低指定行的层次结构数据级别。
将层级数据向上移动指定行
TableSheets 允许用户使用 moveUp(row: number) 方法按指定索引向上移动层次结构数据。
将层级数据向下移动指定行
TableSheets 允许用户使用 moveDown(row: number) 方法将层次结构数据向上移动指定的索引。
在所选行后添加一条记录
TableSheets 允许用户使用 addHierarchyItemAfter(row: number, rowData: any) 方法在指定行之后添加新行。
在所选行上方添加一条记录
TableSheets 允许用户使用 addHierarchyItemAbove(row: number, rowData: any) 方法在所选行上方添加记录。 添加的记录将替换所选记录的位置，所选记录将成为添加记录的子记录。
在所选行下方添加一条记录
Tablesheet 允许用户使用 addHierarchyItemBelow(row: number, rowData: any) 方法添加新行数据作为指定行的子项。 您可以在所选行下方添加一条记录，添加的记录将是所选记录的最后一个子记录。
删除一条记录
TableSheet 让用户删除子记录和它自己。
展开一条记录
单击列标题时会出现此菜单项。 它使用 expandAllHierarchyLevels() 方法扩展所有层级。
折叠记录
单击列标题时出现菜单项，使用 expandHierarchyLevel(level: number) 方法最多支持 9 级菜单项。
切换菜单项可见性
升级、降级、上移/下移、添加前/后/上/下、展开/折叠级别的菜单项可以在运行时显示或隐藏。
下图展示了单击行标题时显示以下菜单项。
下图展示了在右键单击列标题时显示以下菜单项。
代码示例显示了如何切换菜单项可见性。
// show the menu items for hierarchical records
sheet.options.menuItemVisibility = {
// the options below be on the row header
promoteMenuItemVisible: true,
demoteMenuItemVisible: true,
// the options below be on the column header
expandAllLevelMenuItemVisible: true,
collapseAllLevelMenuItemVisible: true,
expandToLevelMenuItemVisible: true,
// the options below be on the row header
// and the menu items be enable for the dataType of the column be rowOrder
moveUpMenuItemVisible: true,
moveDownMenuItemVisible: true,
addBeforeMenuItemVisible: true,
addAfterMenuItemVisible: true,
addAboveMenuItemVisible: true,
addBelowMenuItemVisible: true,
};使用 SpreadJS 设计器
使用数据源和 TableSheet 功能区的列选项卡，在 SpreadJS Designer 中也支持层次结构数据。 您可以配置层次结构类型、汇总公式、大纲列图像等。
层次结构部分提供以下选项：
层次结构类型：类型可以是 Parent、ChildrenPath 或 Level。
汇总公式：用户可以为表格的指定列输入层级汇总公式。 要了解有关汇总公式的更多信息，请参阅公式主题。
大纲栏：大纲栏可用于自定义大纲栏的显示。