温馨提示:本文翻译自stackoverflow.com,查看原文请点击:vscode extensions - Simple Example to implement VS Code TreeDataProvider with JSON data

vscode extensions - 使用JSON数据实现VS Code TreeDataProvider的简单示例

发布于 2020-03-27 15:44:28

我正在尝试将树形视图添加到我的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

任何指针如何实现这一目标,或者知道回购协议,我可以看看那是否有类似之处?

查看更多

查看更多

提问者
Arnoldiusss
被浏览
77
Gama11 2019-06-11 17:00

这是一个简单的实现:

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数据动态创建方式的方法,但是为了使示例尽可能简单,我只是在构造函数中静态创建了该示例。

发布
问题

分享
好友

手机
浏览

扫码手机浏览