【SpreadJS v16.0 新特性预览】支持表格分层数据及树形展示

收藏

SpreadJS V16 新增了对分层数据的支持，并且可以根据用户提供的分层数据自动生成对应的树形表格。

对分层数据的支持是在 SpreadJS 的 DataManager 中实现的，并通过集算表进行展示和交互。
相关信息请了解集算表相关特性：
https://demo.grapecity.com.cn/sp ... eet/overview/purejs

分层数据源类型：

1. 记录具有id和parentId的属性：

<div>[
{ id: 1, parentId: -1 },
{ id: 2, parentId: -1 },
{ id: 3, parentId: 1 },
{ id: 4, parentId: 1 },
{ id: 5, parentId: 2 }
]</div>

复制代码

2. 记录有属性表示层级，层级由记录的顺序确定，每条记录都可以有这个属性作为主键：

<div>[
{ 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 },
]</div>

复制代码

3. 记录有属性表示分层子级，记录一直是没有根记录的树数据，每个子级都可以有该属性作为主键：

<div>[
{
name: 'USA',
children: [
{
name: 'Texas',
children: [
{
name: 'Houston',
}
]
}
]
}
]</div>

复制代码

4. 记录有主键，键可以通过自定义函数解析为层次结构：

<div>[
{ id: '1' },
{ id: '2' },
{ id: '1.1' },
{ id: '1.1.1' },
{ id: '2.1' }
]</div>

复制代码

分层数据源配置
1. 数据源选项可以配置分层选项：

<div>interface GC.Data.IDataSourceOption {
//others options...
schema?: {
hierarchy: GC.Data.IHierarchyOption // define whether the data source is hierarchical
//others options...
}
}
interface GC.Data.IHierarchyOption {
type: 'Parent' | 'ChildrenPath' | 'Level' | 'Custom', // the hierarchy type
column: string // the hierarachy key that will help to build the hierarchical data
outlineColumn?: string | GC.Data.IHierarchyOutlineColumnOptions; // the options for self-defined outline
summaryFields: GC.Data.IHierarchySummaryFieldCollection // define the formulas for the fields
parse: (options: GC.Data.IHierarchyCustomParseOptions) => any; // parse the primary key of the custom hierarchy type to the parent key
unparse?: (options: GC.Data.IHierarchyCustomUnparseOptions) => any; // build the primary key of the custom hierarchy type
}
interface GC.Data.IHierarchySummaryFieldCollection {
[key: string]: string; // the key is the field name, and the value is the formula
}
interface GC.Data.IHierarchyCustomParseOptions {
data: any,
index: number,
}
interface GC.Data.IHierarchyCustomUnparseOptions {
data: any,
index: number,
parentData: any
}
interface GC.Data.IOutlineColumnOptions {
showCheckBox?: boolean;
showImage?: boolean;
images?: string[];
showIndicator?: boolean;
expandIndicator?: string;
collapseIndicator?: string;
}
interface GC.Data.IHierarchyOutlineColumnOptions {
value: string; // specify the column name that will be outline column
showCheckBox?: boolean;
showImage?: boolean;
images?: string[];
showIndicator?: boolean;
expandIndicator?: string;
collapseIndicator?: string;
}
interface GC.Data.IColumn {
//other options...
// the rowOrder in the dataType is used for the ordering the records, the value of the column should be a number,
// it's used by the data manager when moving or inserting
// it's better to hide the column for the end user
dataType?: "string" | "number" | "boolean" | "object" | "array" | "date" | "rowOrder";
outlineColumn?: boolean | GC.Data.IOutlineColumnOptions // indicates the column be an outline column or the outline column options, and there should be only one outline column in the columns
}
</div>

复制代码

<div>var taskTable = dataManager.addTable("Tasks", {
remote: { ... },
schema: {
hierarchy: {
type: 'Parent',
column: 'TaskParentId',
},
columns: {
TaskName: {dataName: 'name' },
TaskId: { dataName: 'id', isPrimaryKey: true }, // using primary key to indicate the hierarchy id
TaskParentId: { dataName: 'parentId' },
TaskRowOrder: { dataName: 'rowOrder', dataType: "rowOrder" }, // optional property for inserting and moving up/down
}
}
});
var taskView = taskTable.addView('TaskView',[
{
value: 'TaskName', outlineColumn: true // this option indicates the column showing as outline column
}
]);
</div>

复制代码

<div>var taskTable = dataManager.addTable("Tasks", {
remote: { ... },
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' },
TaskRowOrder: { dataName: 'rowOrder', dataType: "rowOrder" }, // optional property for inserting and moving up/down
}
}
});
var taskView = taskTable.addView('TaskView',[
{
value: 'TaskName', outlineColumn: true// this option indicates the column showing as outline column
}
]);
</div>

复制代码

<div>var taskTable = dataManager.addTable("Tasks", {
remote: { ... },
schema: {
hierarchy: {
type: 'ChildrenPath',
column: 'TaskChildren',
},
columns: {
TaskName: {dataName: 'name' },
TaskChildren: { dataName: 'children' },
// other columns in the child
}
}
});
var taskView = taskTable.addView('TaskView',[
{
value: 'TaskName', outlineColumn: true // this option indicates the column showing as outline column
}
]);
</div>

复制代码

<div>var taskTable = dataManager.addTable("Tasks", {
remote: { ... },
schema: {
hierarchy: {
type: 'Custom',
column: 'TaskId',
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 taskView = taskTable.addView('TaskView',[
{
value: 'TaskName', outlineColumn: true // this option indicates the column showing as outline column
}
]);
</div>

复制代码

2. 降级记录，将当前记录的 parentId 替换为其上面记录的 id，如果 withChildren 为 true，则当前记录的子级将降低：

<div> /**
* Demote the hierarchy data level of the specified row.
* @param {number} row - The row index.
* @param {boolean} withChildren - Optional, the children will be demoted with the record by default.
* @returns {void}
* @example
* //This example demote the hierarchy data level by specified index.
* tableSheet.demoteHierarchyLevel(8);
*/
function demoteHierarchyLevel(row: number, withChildren?: boolean): void
</div>

复制代码

3. 上移一条记录：
当列的 dataType 为 rowOrder 且列的 value 类型为 number 时，记录可以上下移动。
在层次数据中，向上移动只能在同一父级下的记录之间移动，
当父记录移动时，子记录将移动。

<div> /**
* Move the hierarchy data by the specified row up.
* @param {number} row - The row index.
* @returns {void}
* @example
* //This example move the hierarchy data by specified index up.
* tableSheet.moveUp(8);
*/
function moveUp(row: number): void</div>

复制代码

4. 向下移动一个记录，它与向上移动相同：

/**
   * Move the hierarchy data by the specified row down.
   * @param {number} row - The row index.
   * @returns {void}
   * @example
   * //This example move the hierarchy data by specified index down.
   * tableSheet.moveDown(8);
   */
   function moveDown(row: number): void

image.png408199462.png

5. 添加记录：
默认情况下，它将在选择位置之前插入一条记录，并且插入的记录应该是选择记录的兄弟。

image.png677301330.png

5.1 选中前添加记录：

<div> /**
* Add a new row data before the specified row.
* @param {number} row - The row index.
* @param {Object} rowData - The row data.
* @returns {void}
* @example
* //This example adds a new row data before the specified row.
* tableSheet.addHierarchyItemBefore(8, {id: 8, name: "grapecity"});
*/
function addHierarchyItemBefore(row: number, rowData: any): void</div>

复制代码

5.2 选中后添加记录：

<div> /**
* Add a new row data after the specified row.
* @param {number} row - The row index.
* @param {Object} rowData - The row data.
* @returns {void}
* @example
* //This example adds a new row data after the specified row.
* tableSheet.addHierarchyItemAfter(8, {id: 8, name: "grapecity"});
*/
function addHierarchyItemAfter(row: number, rowData: any): void</div>

复制代码

5.3 在选中的上面添加记录，添加的记录会替换选中记录的位置，选中的记录会是被添加记录的子：

<div> /**
* Add a new row data as the parent of the specified row.
* @param {number} row - The row index.
* @param {Object} rowData - The row data.
* @returns {void}
* @example
* //This example adds a new row data as the parent of the specified row.
* tableSheet.addHierarchyItemAbove(8, {id: 8, name: "grapecity"});
*/
function addHierarchyItemAbove(row: number, rowData: any): void</div>

复制代码

5.4 在选中的下方添加记录，添加的记录将是选中记录的最后一个子记录：

<div> /**
* Add a new row data as the child of the specified row.
* @param {number} row - The row index.
* @param {Object} rowData - The row data.
* @returns {void}
* @example
* //This example adds a new row data as the child of the specified row.
* tableSheet.addHierarchyItemBelow(8, {id: 8, name: "grapecity"});
*/
function addHierarchyItemBelow(row: number, rowData: any): void</div>

复制代码

6. 删除一条记录，它会删除子记录和它自己。
7. 展开所有级别：
单击列标题时将显示菜单项。

<div> /**
* Expand the all hierarchy levels.
* @returns {void}
* @example
* //This example expand the all hierarchy levels.
* tableSheet.expandAllHierarchyLevels();
*/
function expandAllHierarchyLevels(): void
</div>

复制代码

8. 折叠所有级别：

<div> /**
* Collapse the all hierarchy levels.
* @returns {void}
* @example
* //This example collapse the all hierarchy levels.
* tableSheet.collapseAllHierarchyLevels();
*/
function collapseAllHierarchyLevels(): void</div>

复制代码

9. 将记录扩展到指定级别：

单击列标题时会显示菜单，最多支持9级菜单项。

<div> /**
* Expand the hierarchy data by specified level.
* @param {number} level - The level to expand.
* @returns {void}
* @example
* //This example expand the hierarchy data by specified level.
* tableSheet.expandHierarchyLevel(8);
*/
function expandHierarchyLevel(level: number): void</div>

复制代码

10. 切换菜单项的可见性：

提升、降级、上移/下移、前/后/上/下添加、展开/折叠级别的菜单项可以通过选项显示或隐藏：

<div>interface GC.Spread.Sheets.TableSheet.ITableSheetOptions {
// other properties...
menuItemVisibility?: {
// the options below be on the row header
promoteMenuItemVisible?: boolean;
demoteMenuItemVisible?: boolean;
// the options below be on the row header
// and the menu items be enable for the dataType of the column be rowOrder
moveUpMenuItemVisible?: boolean;
moveDownMenuItemVisible?: boolean;
addBeforeMenuItemVisible?: boolean;
addAfterMenuItemVisible?: boolean;
addAboveMenuItemVisible?: boolean;
addBelowMenuItemVisible?: boolean;
// the options below be on the column header
expandAllLevelMenuItemVisible?: boolean;
collapseAllLevelMenuItemVisible?: boolean;
expandToLevelMenuItemVisible?: boolean;
};
}
tableSheet.options.menuItemVisibility = {
promoteMenuItemVisible: true,
demoteMenuItemVisible: true,
moveUpMenuItemVisible: true,
moveDownMenuItemVisible: true,
addBeforeMenuItemVisible: true,
addAfterMenuItemVisible: true,
addAboveMenuItemVisible: true,
addBelowMenuItemVisible: true,
expandAllLevelMenuItemVisible: true,
collapseAllLevelMenuItemVisible: true,
expandToLevelMenuItemVisible: true,
}</div>

复制代码

11. 对层次记录进行排序意味着按级别对记录的任何属性进行排序。

12. 过滤结果将显示父记录及其本身，如果记录有孩子，孩子也会显示。

13. 自定义轮廓列，带有outlineColumn选项的列将在表格中显示轮廓样式，并且只有一列是轮廓：

13.1 . 在架构中：

<div>var taskTable = dataManager.addTable("Tasks", {
remote: { ... },
schema: {
hierarchy: {
type: 'Parent',
column: 'TaskParentId',
outlineColumn: {
value: 'TaskName', // specify the column name that will be outline column
showCheckBox: true
}
},
columns: {
TaskName: {dataName: 'name' },
TaskId: { dataName: 'id', isPrimaryKey: true }, // using primary key to indicate the hierarchy id
TaskParentId: { dataName: 'parentId' },
TaskRowOrder: { dataName: 'rowOrder', dataType: "rowOrder" }, // optional property for inserting and moving up/down
}
}
});</div>

复制代码

13.2. 在视图列中，优先级更高：

<div>var taskTable = dataManager.addTable("Tasks", {
remote: { ... },
schema: {
hierarchy: {
type: 'Parent',
column: 'TaskParentId',
outlineColumn: 'TaskName'
},
columns: {
TaskName: {dataName: 'name' },
TaskId: { dataName: 'id', isPrimaryKey: true }, // using primary key to indicate the hierarchy id
TaskParentId: { dataName: 'parentId' },
TaskRowOrder: { dataName: 'rowOrder', dataType: "rowOrder" }, // optional property for inserting and moving up/down
}
}
});
var taskView = taskTable.addView('TaskView',[
{
value: 'TaskName', outlineColumn: { showCheckBox: true } // this option indicates the column showing as outline column
}
]);</div>

复制代码

14. 该功能可能与层次结构发生冲突
14.1 . groupBy 不能处理层次结构数据；
14.2. 固定行不能与层次结构数据一起使用；
14.3 . 对于仅影响当前行数据的特征，resetRow 不能很好地处理层次数据，但一些用于层次特征的属性不会受到影响。

层次结构远程接口
在父层级类型中，远程接口和之前一样，
但如果它是级别或子路径层次结构类型，每个远程接口都会将整个记录发送到远程而不被删除，
因为它不能识别插入记录的父记录。

		自动登录	找回密码
密码			立即注册

【SpreadJS v16.0 新特性预览】支持表格分层数据及树形展示

0 个回复

讲师达人

悬赏达人

元老葡萄

SpreadJS 认证

SpreadJS 高级认证

微信认证勋章