jQuery无限级ajax加载树形菜单代码,通过ajax调用方法异步获取json数据内容生成无限级树形菜单

jQuery无限级ajax加载树形菜单代码,通过ajax调用方法异步获取json数据内容生成无限级树形菜单

jQuery无限级ajax加载树形菜单代码,通过ajax调用方法异步获取json数据内容生成无限级树形菜单

<!DOCTYPE HTML>
<html>

<head>
<meta charset=”utf-8″ />
<title>jQuery无限级ajax加载树形菜单代码</title>

<!–图标库–>
<link href=”http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css” rel=”stylesheet”>
<style type=”text/css”>
*{
font-family: 微软雅黑;
}
.a{
width: 80%;
border: 2px dashed #666;
margin: 0 auto;
}
h2{
width: 80%;
margin: 0 auto;
padding: 20px;
}
pre{
width: 80%;
margin: 0 auto;
border: 1px solid #ddd;
color: #000;
padding: 10px;
border-radius: 10px;
font-size: 15px;
}
</style>

</head>
<body><script src=”/demos/googlegg.js”></script>

<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” src=”js/jquery.min.js”></script>
<script type=”text/javascript” src=”js/LuTree.js” ></script>
<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’;”>
<p>适用浏览器:360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
</div>
</body>
</html>

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » jQuery无限级ajax加载树形菜单代码,通过ajax调用方法异步获取json数据内容生成无限级树形菜单
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏