jQuery.ui樹狀圖是一款基于jQuery的圖形組件，可以用于展示復雜數據的結構關系，還可以對樹狀圖進行自定義配置和事件綁定，提高用戶交互體驗。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" >
<div id="tree"></div>
<script>
var treeData = [
{
"label": "父節點1",
"children": [
{
"label": "子節點1-1"
},
{
"label": "子節點1-2"
}
]
},
{
"label": "父節點2",
"children": [
{
"label": "子節點2-1"
},
{
"label": "子節點2-2",
"children": [
{
"label": "子節點2-2-1"
},
{
"label": "子節點2-2-2"
}
]
}
]
},
{
"label": "父節點3"
}
];
$("#tree").treeview({
data: treeData
});
</script>

在上面的代碼中，我們首先引入了jQuery和jQuery.ui的庫文件，并且在頁面中創建了一個id為tree的div容器，用于渲染樹狀圖。在JavaScript中，我們定義了一個包含樹狀結構數據的數組treeData，然后通過$("#tree").treeview()方法將數據綁定到div容器上，從而創建出樹狀圖。

除了基本的數據綁定外，jQuery.ui樹狀圖還提供了一些高級功能，如可折疊節點、選擇節點、拖拽節點等，這些功能都可以通過配置項進行自定義。例如：

$("#tree").treeview({
data: treeData,
collapseIcon: "fa fa-minus-square-o",
expandIcon: "fa fa-plus-square-o",
showBorder: true,
onNodeSelected: function(event, node) {
console.log("節點名稱：" + node.text);
}
});

在上述代碼中，我們通過collapseIcon、expandIcon參數指定了可折疊節點的圖標樣式，showBorder參數設置了節點之間是否顯示邊框，onNodeSelected事件綁定了用戶選擇節點后的處理函數，用于輸出所選節點的名稱。

上面只是jQuery.ui樹狀圖的一些基本用法，更多詳細內容可以查看官方文檔。同時，在使用樹狀圖時，我們還需要注意一些性能和兼容性問題，例如數據量較大時的渲染速度、瀏覽器支持程度等。