jQuery动态加载多级树形菜单代码,通过ajax调用方法异步获取json数据内容生成无限级树形菜单,还可以自定义添加删除树形菜单内容。
js代码
<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>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791