我正在尝试将树形视图添加到我的VS Code扩展中。数据是一个复杂的JSON对象。我努力使此方法起作用,因为示例并非直接针对我。
可以说我有一个简单的对象:
"cars": [
{ "name":"Ford", "models":[ "Fiesta", "Focus", "Mustang" ] },
{ "name":"BMW", "models":[ "320", "X3", "X5" ] }
]
我想在树视图中呈现如下:
Cars
> Ford
> Fiesta
> Focus
> Mustang
> BMW
> 320
> X3
> X5
任何指针如何实现这一目标,或者知道回购协议,我可以看看那是否有类似之处?
这是一个简单的实现:
import * as vscode from 'vscode';
export function activate(context: vscode.ExtensionContext) {
vscode.window.registerTreeDataProvider('exampleView', new TreeDataProvider());
}
class TreeDataProvider implements vscode.TreeDataProvider<TreeItem> {
onDidChangeTreeData?: vscode.Event<TreeItem|null|undefined>|undefined;
data: TreeItem[];
constructor() {
this.data = [new TreeItem('cars', [
new TreeItem(
'Ford', [new TreeItem('Fiesta'), new TreeItem('Focus'), new TreeItem('Mustang')]),
new TreeItem(
'BMW', [new TreeItem('320'), new TreeItem('X3'), new TreeItem('X5')])
])];
}
getTreeItem(element: TreeItem): vscode.TreeItem|Thenable<vscode.TreeItem> {
return element;
}
getChildren(element?: TreeItem|undefined): vscode.ProviderResult<TreeItem[]> {
if (element === undefined) {
return this.data;
}
return element.children;
}
}
class TreeItem extends vscode.TreeItem {
children: TreeItem[]|undefined;
constructor(label: string, children?: TreeItem[]) {
super(
label,
children === undefined ? vscode.TreeItemCollapsibleState.None :
vscode.TreeItemCollapsibleState.Expanded);
this.children = children;
}
}
在package.json
:
{
[...]
"contributes": {
"views": {
"explorer": [
{
"id": "exampleView",
"name": "exampleView"
}
]
}
}
}
您可能想要一种data
从JSON数据动态创建方式的方法,但是为了使示例尽可能简单,我只是在构造函数中静态创建了该示例。
这是一个很好的开始,谢谢。我最终把孩子当作对象。在getChildren函数中,迭代到children对象,并将其转换为适当的TreeItem对象,然后返回该对象。这是因为我的JSON具有不同格式的多个级别
谢谢@ Gama11,这极大地帮助了我。这应该是官方示例中的代码。