QQ客服
當前位置 : 中国福彩快乐十分开奖分布图 > 代碼 > 網頁特效 > 導航菜單 > jQuery動態獲取json樹形菜單

浙江大乐透规律分布图: jQuery動態獲取json樹形菜單

jQuery通過ajax調用方法異步獲取json數據內容,可自定義編輯添加多級樹形菜單內容代碼。
分享到微信朋友圈
X

使用方法:


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

1、這里介紹幾種調用方法:

//預加載數據格式
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",//葉子圖標
	mouIconOpen: " fa fa-folder-open",//展開圖標
	mouIconClose:"fa fa-folder",//關閉圖標
	callback: function(id) {
		console.log("你選擇的id是" + id);
	}
});

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

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


[聲明]本站素材來自用戶分享,僅限學習交流請勿用于商業用途。如損害你的權益請聯系客服QQ:2447402004給予處理。
舉報×
舉報原因:

相關代碼

二維碼
意見反饋
×
×

注冊

QQ注冊 立即下載 中国福彩快乐十分开奖分布图

簽到成功!

已連續簽到1天,簽到3天將獲得積分VIP1天

知道了