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天

知道了
1分快三 www.203862.com-体彩排列五开奖号| www.340059.com-ge金彩国际-| www.105170.com-乐和彩竞彩是正规吗| www.123002.cc-欢乐彩大发快3| www.224241.com-快三计算机计算公式| www.313386.com-彩神1邀请码| www.507850.com-竞彩猫小鱼儿微博| www.601533.com-彩漂怎么样-| www.682085.com-足彩代买app| www.770959.com-a彩娱乐app-| www.846900.com-如何买外围足彩| www.911191.com-北京福彩公益活动| www.974337.com-安徽福彩双色球规则| www.wc5.com-排三彩经网-| www.to08.com-大奖快三算号神器| www.718844.com-彩虹腐女是什么意思| www.29791.com-云购彩票邀请码| www.578529.com-体彩店设计-| www.282786.com-高手彩坛网-| www.904557.com-360购彩大厅首| www.wd56.com-购彩吧688345| www.47fu.com-三分彩走势-| www.623171.com-天天中彩票提现不了| www.730411.com-福彩技巧大全| www.839123.com-竞彩258pc版| www.926251.com-体彩排列三众彩网| www.991048.com-3d中国彩吧图| www.nv28.com-为什么体彩不算赌博| www.5fc.cc-彩乃奈奈中文百度云| www.60qx.com-足彩11248计划| www.0862.cm-福利彩票怎么扫码| www.6705.vip-新疆时时采彩app| www.20734.com-竞彩360比分| www.254829.com-体彩任选三-| www.787054.com-澳门彩票入口| www.872174.com-彩票中奖者的技巧| www.948285.com-乐透乐福彩3d| www.999604.com-152彩下载-| www.jt41.com-新3d彩定位胆技巧| www.953877.com-360足彩比分| www.663481.com-乐和彩竞彩-| www.069968.com-彩神辅助器-| www.166339.com-河北快三推荐号| www.265533.com-福彩3d论坛贴吧| www.347654.com-天天彩票集团软件| www.438566.com-体彩世界杯赔率| www.533933.com-七星彩排列技巧法| www.599837.com-中国什么彩票金额大| www.666928.com-国乐彩软件苹果下载| www.733771.com-福建体彩官方网下载| www.801130.com-永旺彩票网-| www.876533.com-甘肃快三早知道| www.971465.com-88彩票是正规网站| www.cp6808.com-快三跨度走势| www.ms07.com-福彩快3网址一分钟| www.5km.com-刘军玩彩-| www.63dc.com-今天彩民乐树图| www.ds32.com-亿彩网址-| www.163074.com-中国福彩双色球时间| www.259200.com-红彩网是不是骗局| www.315827.com-彩虹六号手机版游戏| www.488547.com-足彩19010-| www.cp61.com-彩迷网开奖-| www.202295.com-福利彩票投注技巧| www.449393.com-十四彩是什么意思| www.207568.com-中国福彩快三软件| www.300725.com-18彩票网-| www.384925.com-七星彩解诗网老头子| www.505779.com-彩票店杀人案| www.bm47.com-内蒙快三今天预测号| www.16fg.com-周口体彩8选5| www.587433.com-竞彩足球竞彩版| www.870587.com-鼎盛娱乐彩票| www.57nw.com-体彩排列五小助手| www.939778.com-彩票捡漏-| TT彩票www.633813.com| www.ww63.com-南方双彩首页| www.93763.cc-福利彩票是什么单位| www.104225.com-福彩23选5一等奖| www.575580.com-好运彩-登录| www.689723.com-彩票77app安卓| www.786746.com-福彩有极速快三吗| www.870733.com-体彩广西-| www.04zg.com-水溶性彩铅画人物| www.1256.cc-快三豹子多少钱奖金| www.01617.com-江苏快三走势图振幅| www.332213.com-彩票一般是买几个数| www.817281.com-网易传统彩-| www.672324.com-全民星彩下载| www.591556.com-香港博彩公司招人| www.51my.com-59博论坛免费彩| www.0594.la-破解快三-| www.7186.pw-彩宝哪个品牌好| www.344698.com-上海体彩销售网点| www.418055.com-皇冠彩票提款不给提| www.514882.com-国产口碑好的彩妆| www.49535.com-四场进球彩开奖| www.529368.com-体彩开奖直播平台有| www.675365.com-中国福彩神牛嚼图| www.426178.com-聚氨酯彩钢板板型| www.569247.com-福彩丹东图-| www.634276.com-仲博彩票是骗局吗| www.711513.com-500w彩票app| www.794721.cc-爱购彩app下载| www.869782.com-唯彩会三d-| www.66314.com-五星乐彩可靠吗| www.53012.com-福彩五码遗漏| www.590751.com-378彩票下载| www.672816.com-奥克足彩缩水软件| www.759218.com-微彩网是做什么的| www.829243.com-彩558下载-| www.77901.com-乐娱彩票-| www.314460.com-彩票最稳的打法| www.415986.com-竞彩今日推荐号码| www.540081.com-马会彩票-| www.669777.com-星期几可以买彩票| www.737363.com-福利彩票有专家分析| www.33bq.com-排列三字谜凤彩网| www.2732.com-嬴钱彩是什么| www.9097.loan-中国更懂便民彩吧| www.52216.cc-爱乐彩浙江-| www.055662.com-彩票容易中奖类型| www.124897.com-如何区分体彩和福彩| www.565.la-极速赛车是官方彩吗| www.7345.net-彩票票面符号| www.30630.com-福彩3d网址-| www.76903.com-中国体育彩票投注| www.640289.com-天天盈彩-| www.932950.com-内蒙快三二同号遗漏| www.8265.org-彩之源登录口| www.50255.cc-778彩票下载| www.005941.cc-五分钟时时彩计划| www.136580.cc-彩票77腾牛网| www.4767.me-鸳鸯彩票-| www.9141.cn-体育彩票金七乐开奖| www.68881.cc-彩票说彩-| www.040678.com-足球博彩技巧一招鲜| www.vd38.com-智慧彩票预测下载| www.yi.cc-福彩走势图-| www.328339.com-中彩吧一更懂彩吧| www.337864.com-大家乐彩票机技巧| 中国福利彩票www.6364l.com| www.93841.com-网易彩票注册| www.505443.com-博瑞彩票提现密码| www.568640.com-梦见彩票中奖后真中| www.5312.cm-福州金山体彩店转让| www.874801.com-118彩票网可信吗| www.951834.com-菲律宾彩天下合法吗| 红旗彩票www.39957d.com| www.ik19.com-中国彩票下载手机版| www.l90.net-彩票官网开奖| www.39hw.com-嘉兴福彩中心站| www.0566.cc-迅盈彩票靠谱吗| www.37ax.com-七星彩前4位数定位| www.60sx.com-安卓彩票摇奖模拟器| www.68588.com-内蒙古快三豹子预测| www.516222.com-华彩手机彩票| www.228675.com-河南彩色道路| www.3742.win-彩票空打机官方网站| www.37983.cc-大赢家彩票万人金花| www.565081.com-梦见彩票中大奖预兆| www.657206.com-金龙彩-| www.766772.com-彩票充值代理加盟| 99彩票www.5799.cc|