EasyUI是一種基于jQuery的UI插件框架，它提供了各種易于使用的UI組件和庫，其中包括了Json Tree組件。

Json Tree組件可以向用戶展示整個樹形結構，非常適合用于顯示導航菜單、文件夾結構以及網站目錄等列表數據。它不需要服務器端代碼支持，而是通過傳遞JSON參數進行操作。

//首先需要引入easyui和jquery文件
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.9.1/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="jquery-easyui-1.9.1/themes/icon.css"><script type="text/javascript" src="jquery-easyui-1.9.1/jquery.min.js"></script><script type="text/javascript" src="jquery-easyui-1.9.1/jquery.easyui.min.js"></script>//HTML部分需要指定id屬性
<ul id="tree"></ul>

接下來我們需要創建Json Tree的數據，數據格式如下：

var data = [
{
"id":1,
"text":"Parent 1",
"state":"closed",
"children":[
{
"id":11,
"text":"Child 1",
"iconCls":"icon-help",
"children":[
{
"id":111,
"text":"Grandchild 1"
},
{
"id":112,
"text":"Grandchild 2"
}
]
},
{
"id":12,
"text":"Child 2",
"state":"closed"
}
]
},
{
"id":2,
"text":"Parent 2",
"state":"closed"
},
{
"id":3,
"text":"Parent 3",
"state":"closed"
}
];

最后我們需要將數據綁定到Html頁面上：

$(function(){
$('#tree').tree({
data: data
});
});

現在我們寫好了EasyUI Json Tree組件的代碼，打開頁面后我們可以看到Json Tree成功地顯示了出來。

Json Tree組件還有很多其它的配置項可以滿足我們自定義需求，如節點右鍵菜單、節點拖拉等功能。