JavaScript樹形控件是現在Web開發中常用的一種組件，可以將數據以樹形結構的方式進行展示，方便用戶瀏覽、操作。

在實際的項目開發中，常用到的樹形控件包括三種類型：

<ul> / <li> 樹型結構
<select> 下拉列表樹
<div> / <span> 遞歸樹形結構

其中，使用<ul> / <li> 標簽組織的樹形結構在實際開發中更常見，因為它可以比較方便地進行樣式定制和事件綁定。下面是一段常見的JSON數據，我們可以將它使用JavaScript樹形控件展示：

var data = {
"id": 1,
"text": "parent 1",
"state": {
"opened": true
},
"children": [
{
"id": 2,
"text": "child 1",
"state": {
"opened": true
}
},
{
"id": 3,
"text": "child 2"
}
]
};

為了演示方便，我們使用了開源的jstree插件來創建樹形控件。首先需要在html中引入相關的js和css文件：

<link rel="stylesheet" href="path/to/themes/default/style.css" />
<script src="path/to/jquery.js"></script>
<script src="path/to/jstree.min.js"></script>

接下來，在html中添加一個id為"jstree_demo_div"的div元素，用于放置樹形控件：

<div id="jstree_demo_div"></div>

最后，在JavaScript中創建樹形控件，并將數據傳入：

$('#jstree_demo_div').jstree({
'core': {
'data': [data]
}
});

除了基礎的數據展示和選擇功能，jstree插件還支持很多其他的擴展功能，比如右鍵菜單、搜索、拖拽、復制、剪切、粘貼等。需要的時候可以去官網查看相關文檔。

除此之外，在實際開發中樹形控件的需求可能會更加復雜。比如，需要支持異步加載、懶加載、多選、復選框等功能。這時候，我們可以考慮使用其他的開源插件，比如zTree、FancyTree等。

綜上所述，JavaScript樹形控件是Web開發中常用的一種組件，可以將數據以樹形結構進行展示。在實際開發中，我們需要根據需求選擇合適的開源插件來實現這些功能。