利用jQuery实现无限级ajax加载菜单代码



69 274 92



特效描述:利用jQuery实现 无限级 ajax加载 菜单代码,利用jQuery实现无限级ajax加载菜单代码

代码结构

1. 引入CSS

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/LuTree.js" ></script>

3. HTML代码

<h2>No.1预加载数据生成无限级树形菜单</h2>
<pre>
	$("ele").LuTree({
		arr: arr,//节点json数据
		sign:true,//是否全部展开
		simIcon: "fa fa-folder",//叶子图标
		mouIconOpen: " fa fa-folder-open",//展开图标
		mouIconClose:"fa fa-folder",//关闭图标
		callback: function(id) {
			//点击回调选中节点id
			console.log("你选择的id是" + id);
		}
	});
</pre>
<br/>
	<div class="a" id="toUl">
	</div>
<h2>No.2异步加载数据生成无限级树形菜单</h2>
<pre>
	$("ele").LuAjaxTree({
		url:'./json.php',//请求url,请求会带上id,在此节点下加载节点。
		simIcon: "fa fa-file-o",//叶子图标
		mouIconOpen: " fa fa-folder-open",//展开图标
		mouIconClose:"fa fa-folder",//关闭图标
		callback: function(id) {
			//点击回调选中节点id
			console.log("你选择的id是" + id);
		}
	})
</pre>
<br/>
	<div class="a" id="ajaxUl">
	</div>
<h2>No.3可操作异步加载数据生成无限级树形菜单</h2>
<pre>
	$("ele").LuAjaxTree({
		url:'./data.json',//请求url,请求会带上id、type:query:查询,createChild:添加,delete:删除,新增还会带上name,在此节点下加载节点。
		simIcon: "fa fa-file-o",//叶子图标
		mouIconOpen: " fa fa-folder-open",//展开图标
		mouIconClose:"fa fa-folder",//关闭图标
		callback: function(id) {
			//点击回调选中节点id
			console.log("你选择的id是" + id);
		}
	})
</pre>
<br/>
<div class="a" id="updateUl"></div>
<script type="text/javascript">
	//预加载数据格式
	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);
		}
	});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册
小小的太阳
关注
TA的相关作品 >>更多
热搜关键词


热门标签: 右键菜单 图片头像上传 文字提示框 文件上传 提示框/弹出层 文本框 layer 下拉框 lightbox 复选 单选 Tooltip工具提示框 登录框 浮动提示框 注册框 html5弹窗动画 搜索框 验证码 二级联动 三级联动 城市选择 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 弹出层拖动 窗口提示框 切换按钮 form表单

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到