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天

知道了
顺丰彩票 www.431144.com-竞彩足球单关统计| www.576212.com-东莞福彩网点| www.654413.com-南昌25人合买彩票| www.726618.com-网易彩票网站| www.366354.com-福利彩票33期色| www.991468.com-中彩啦能买彩票吗| www.653096.com-贵州快三怎么预测| www.xv95.com-pk10彩票贴吧| www.94xk.com-足彩分析微博| www.4155.vip-七彩国际平台| www.00791.com-有vr彩票的网| www.44337.com-彩色沥青混凝土报价| www.223037.com-3d彩票走势图跨度| www.466587.com-七乐彩兑奖方式| www.382825.com-穿越成九彩僵神| www.874364.com-福彩快三走势一定牛| www.983814.com-离我最近的彩票店| www.da43.com-彩神x邀请码| www.xw20.cc-彩6官网下载ios| www.73nv.com-家彩开机号试机号| www.2896.shop-彩票美女骗局| www.49677.com-足彩加ios-| www.0413.date-迪士尼彩乐园假网址| www.636478.com-彩虹4无人机售价| www.bs82.com-彩票榜有几个软件| www.2716.org-轩彩娱乐注册下载| www.986828.com-七乐彩预测最准专家| www.l33.cc-下载大发彩票| www.133966.cc-福彩山东-| www.225554.com-可以合买彩票的平台| www.318452.com-江西福彩网官方网站| www.410558.com-家彩开奖app下载| www.539009.com-欢乐时时彩开奖| www.617446.com-延边州福彩中心地址| www.34826.com-辽宁福彩3d和值| www.028049.com-娜彩快开平台在哪| www.169779.com-快三走势图如何分析| www.9274.cn-福乐彩注册-| www.51947.cc-体彩5d中奖-| www.66702.com-福彩3d助手安卓版| www.005938.com-河内五分彩开奖计划| www.404086.com-e彩乐手机登录版| www.sn48.com-时时彩漏洞破解| www.251870.com-双色球专业版旺彩| www.442072.com-体育彩七星彩规则| www.863342.com-彩票123vip-| www.968569.com-中乐彩75秒-| www.71qh.com-福彩结束时间| www.15215.com-浙i江体彩手机版| www.796.date-新浪福彩双色球| www.7518.org-支付宝上兑换的彩票| www.i47.com-福彩心水3d论坛| www.57er.com-玩京彩犯法吗| www.2323.cm-福利彩票十选五玩法| www.639338.com-体彩店网上经营| www.744456.com-7星彩长条-| www.zi24.com-彩票开奖信息公告| www.74yd.com-体彩怎么看中奖结果| www.3770.biz-今天跑狗彩图| www.431058.com-福彩每周开奖时间| www.539838.cc-时时彩跨度走势图| www.611487.com-m5彩票总代理| www.220293.com-禁止互联网销售彩票| www.5415.cc-中彩乐购代理| www.17276.com-彩票官网软件下载| www.68621.cc-新加坡天天彩资料綱| www.019130.com-8k彩票主页-| www.116977.com-体彩七星彩机选号码| www.213628.com-彩神2合法合法不| www.89qd.com-u9彩票可靠不| www.764598.com-玩彩app兼职| www.400941.com-七星彩和值走劳| www.492013.com-黑彩11选5爆冷号| www.564051.com-中国贵州福利彩票| www.575305.com-竞彩奖报-| www.719224.com-520快三彩票平台| www.873870.com-查体育彩票中奖号码| 彩票大家乐www.21202t.com| www.996041.com-竞彩足球北单投注| www.708.mobi-今天开什么码七星彩| www.330747.com-a9彩票有人在玩吗| www.045377.com-福利彩票店装修费用| www.163123.com-福彩定胆杀号| www.240979.com-彩库宝典官方正版下| www.554255.cc-宣传体彩标语| www.630208.com-266彩票-| www.705544.com-福彩彩票扫码| www.47hn.com-金手指足彩应用| www.737707.com-福彩快三送彩金| www.873910.com-广州福彩网站主之家| www.8299.site-浙江在线福彩| www.6982.net-买的彩票如何注销| www.20224.com-体彩河南泳运夺金| www.6305.vip-福彩中福在线| www.206761.com-彩票106cc苹果| www.107991.com-足球彩票排行榜| www.40440.com-世界杯足彩销售额| www.99.win-福彩大发-| www.69459.com-八马彩票是真的吗| www.847227.com-网彩pc蛋蛋-| www.885387.com-众彩网专家推荐预测| www.uj66.com-福利彩票的真实性| www.9209.vip-彩票刷亏损平台| www.532180.com-彩库宝典官方正版| www.699310.com-足彩开奖比分直播| www.870587.com-鼎盛娱乐彩票| www.191133.com-快三开奖号码内蒙古| www.562293.com-上海体彩购买网站| www.m00.club-乐彩大发快三下载| www.9275.org-快三打计划表| www.01wj.com-彩虹色暗恋-| www.37sc.cc-中国彩礼图-| www.aj67.com-七星彩论坛-| www.865313.com-昨日福彩3d中奖| www.42936.com-玉泉路福利彩票站| www.xm62.com-彩票投注站利润| www.175782.com-北京快三软件下载| www.781741.com-彩票怎么交税的| www.656668.com-竞彩冠亚军玩法介绍| www.874176.com-体彩基诺游戏| www.932087.com-河北快三推号| www.987595.com-福利彩票全国通兑吗| www.nt1.com-福彩3d和值跨度表| www.98859.com-打彩票截止时间| www.292932.com-福彩3d新彩吧字谜| www.355999.com-中国福彩双色球图片| www.417747.com-中福福彩-| www.519411.com-投彩网平台怎么样| www.573888.cc-如何卸载趣发彩票| www.621761.com-彩神vii下载注册| www.691523.com-烟台福利彩票转让| www.275761.com-苏州体育彩票点| 99彩票www.29699.com| www.030.club-体彩61玩法介绍| www.956213.com-老郑足彩今日分析| www.cai9488.com福彩快三河北| www.768682.com-足彩app哪个靠谱| www.923397.com-手机购买竞彩| 佰萬彩票www.982pk.com| www.255033.com-新疆时时彩96| www.625355.com-七乐彩杀号预测| www.8687.cn-丰富多彩中彩的意思| www.763862.com-足彩网胜负彩| www.850933.com-重庆时时彩斗牛玩法| www.892736.com-可靠的快三平台下载| www.997182.com-北京快中彩走势| www.ft64.com-1加彩票-| www.66703.cc-竞彩与外围间的漏洞| www.375935.com-菲律宾时时彩网址| www.449116.com-大连彩票站电话| www.520527.com-金沙彩票软件下载| www.581837.com-尚景欣园体育彩票| www.641516.com-体彩logo含义| www.226394.com-彩票双色球专家预测| www.303014.com-福彩三d走势图表图| www.973279.com-彩虹岛w国服公测| www.ai62.com-廉江好彩哥规律| www.wp77.com-彩经网3d走势| www.42wm.com-彩色沥青价格是多少| www.774420.com-天天中彩怎么倒闭了| www.119273.com-彩神app网站登录| www.5098.biz-广州福利彩票投注站| www.516712.com-下载趣博彩票| www.589908.com-今日3d彩报第一版|