jQuery動態(tài)獲取json樹形菜單

使用方法：

由于樹形菜單數(shù)據(jù)量比較大的時候，我們通過預(yù)加載數(shù)據(jù)的方式生成菜單可能對前后端交互延遲較長。所以研究了下可以預(yù)加載也可以異步加載數(shù)據(jù)的樹形菜單插件。

1、這里介紹幾種調(diào)用方法：

//預(yù)加載數(shù)據(jù)格式
var arr = [{
		id: 1,
		name: "一級",
		open: true,
		child: [
			{
				id: 5,
				name: "二級",
				type:'leaf'
			},
			{
				id: 6,
				name: "二級",
				child: [
				{
					id: 7,
					name: "三級",
					type:'leaf'
				},
				{
					id: 9,
					name: "三級",
					child: [
					{
						id: 10,
						name: "四級",
						child: [
						{
							id: 11,
							name: "五級",
							type:'leaf'
						},
						{
							id: 12,
							name: "五級",
							type:'leaf'
						}
					]}
				]}
			]}]
	}, {
		id: 2,
		name: "一級",
		child: [
			{
				id: 3,
				name: "二級",
				pid: 2,
				type:'leaf'
			},
			{
				id: 3,
				name: "二級",
				pid: 2,
				type:'leaf'
			},{
				id: 4,
				name: "二級",
				pid: 2,
				type:'leaf'
			}
		]
	},{
		id: 8,
		name: "一級",
		pid: 0,
		type:'leaf'
	}
];

//無限級菜單生成
$("#toUl").LuTree({
	arr: arr,
	sign:true,
	simIcon: "fa fa-file-o",//葉子圖標(biāo)
	mouIconOpen: " fa fa-folder-open",//展開圖標(biāo)
	mouIconClose:"fa fa-folder",//關(guān)閉圖標(biāo)
	callback: function(id) {
		console.log("你選擇的id是" + id);
	}
});

//無限級請求節(jié)點下的菜單
$("#ajaxUl").LuAjaxTree({
	url:'./data.json',
	simIcon: "fa fa-file-o",//葉子圖標(biāo)
	Demo:true,//模式，是否在服務(wù)器環(huán)境，true是演示模式，不需要后臺，false是需要后臺配合的使用模式
	Method: "POST",//請求方法
	mouIconOpen: " fa fa-folder-open",//展開圖標(biāo)
	mouIconClose:"fa fa-folder",//關(guān)閉圖標(biāo)
	callback: function(id) {
		console.log("你選擇的id是" + id);
	}
});

//可操作異步加載數(shù)據(jù)生成無限級樹形菜單
$("#updateUl").LuUpdateTree({
	url:'./data.json',
	simIcon: "fa fa-file-o",//葉子圖標(biāo)
	Demo:true,//模式，是否在服務(wù)器環(huán)境，true是演示模式，不需要后臺，false是需要后臺配合的使用模式
	Method: "POST",//請求方法
	mouIconOpen: " fa fa-folder-open",//展開圖標(biāo)
	mouIconClose:"fa fa-folder",//關(guān)閉圖標(biāo)
	callback: function(id) {
		console.log("你選擇的id是" + id);
	}
});