02zTree - 最簡單的入門例子（JSON 資料）

标準的JSON資料

效果圖：

标準的 JSON 資料需要嵌套表示節點的父子包含關系,例如：

[
			{ name:"父節點1 - 展開", open:true,
				children: [
					{ name:"父節點11 - 折疊",
						children: [
							{ name:"葉子節點111"},
							{ name:"葉子節點112"},
							{ name:"葉子節點113"},
							{ name:"葉子節點114"}
						]},
					{ name:"父節點12 - 折疊",
						children: [
							{ name:"葉子節點121"},
							{ name:"葉子節點122"},
							{ name:"葉子節點123"},
							{ name:"葉子節點124"}
						]},
					{ name:"父節點13 - 沒有子節點", isParent:true}
				]},
			{ name:"父節點2 - 折疊",
				children: [
					{ name:"父節點21 - 展開", open:true,
						children: [
							{ name:"葉子節點211"},
							{ name:"葉子節點212"},
							{ name:"葉子節點213"},
							{ name:"葉子節點214"}
						]},
					{ name:"父節點22 - 折疊",
						children: [
							{ name:"葉子節點221"},
							{ name:"葉子節點222"},
							{ name:"葉子節點223"},
							{ name:"葉子節點224"}
						]},
					{ name:"父節點23 - 折疊",
						children: [
							{ name:"葉子節點231"},
							{ name:"葉子節點232"},
							{ name:"葉子節點233"},
							{ name:"葉子節點234"}
						]}
				]},
			{ name:"父節點3 - 沒有子節點", isParent:true}

		]
      

格式化後：

簡單 JSON 資料

[
			{ id:1, pId:0, name:"父節點1 - 展開", open:true},
			{ id:11, pId:1, name:"父節點11 - 折疊"},
			{ id:111, pId:11, name:"葉子節點111"},
			{ id:112, pId:11, name:"葉子節點112"},
			{ id:113, pId:11, name:"葉子節點113"},
			{ id:114, pId:11, name:"葉子節點114"},
			{ id:12, pId:1, name:"父節點12 - 折疊"},
			{ id:121, pId:12, name:"葉子節點121"},
			{ id:122, pId:12, name:"葉子節點122"},
			{ id:123, pId:12, name:"葉子節點123"},
			{ id:124, pId:12, name:"葉子節點124"},
			{ id:13, pId:1, name:"父節點13 - 沒有子節點", isParent:true},
			{ id:2, pId:0, name:"父節點2 - 折疊"},
			{ id:21, pId:2, name:"父節點21 - 展開", open:true},
			{ id:211, pId:21, name:"葉子節點211"},
			{ id:212, pId:21, name:"葉子節點212"},
			{ id:213, pId:21, name:"葉子節點213"},
			{ id:214, pId:21, name:"葉子節點214"},
			{ id:22, pId:2, name:"父節點22 - 折疊"},
			{ id:221, pId:22, name:"葉子節點221"},
			{ id:222, pId:22, name:"葉子節點222"},
			{ id:223, pId:22, name:"葉子節點223"},
			{ id:224, pId:22, name:"葉子節點224"},
			{ id:23, pId:2, name:"父節點23 - 折疊"},
			{ id:231, pId:23, name:"葉子節點231"},
			{ id:232, pId:23, name:"葉子節點232"},
			{ id:233, pId:23, name:"葉子節點233"},
			{ id:234, pId:23, name:"葉子節點234"},
			{ id:3, pId:0, name:"父節點3 - 沒有子節點", isParent:true}
		]