素材牛VIP会员

Ajax请求后台无限级可编辑树形菜单

 所属分类:网页特效-导航菜单

 浏览:1489次  评论:1次  更新时间:2019-04-11
牛币素材VIP可免积分下载
Ajax请求后台无限级可编辑树形菜单兼容IE10
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:由于树形菜单数据量比较大的时候,我们通过预加载数据的方式生成菜单可能对前后端交互延迟较长。所以研究了下可以预加载也可以异步加载数据的树形菜单插件。

详细介绍

//预加载数据格式
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'
}];
//无限级菜单生成
$("element").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);
	}
});
//无限级请求节点下的菜单
$("element").LuAjaxTree({
	url: './data.json',
	simIcon: "fa fa-file-o", //叶子图标
	mouIconOpen: " fa fa-folder-open", //展开图标
	mouIconClose: "fa fa-folder", //关闭图标
	callback: function (id) {
		console.log("你选择的id是" + id);
	}
});
//可操作异步加载数据生成无限级树形菜单
$("element").LuUpdateTree({
	url: './data.json',
	, //请求url,请求会带上id、type:query:查询,createChild:添加,:删除,新增还会带上name,在此节点下加载节点。
	simIcon: "fa fa-file-o", //叶子图标
	mouIconOpen: " fa fa-folder-open", //展开图标
	mouIconClose: "fa fa-folder", //关闭图标
	callback: function (id) {
		console.log("你选择的id是" + id);
	}
});
//后台返回json数据格式
{
	"code": 200, //code为200是成功
	"data": [ //获取的时候返回多个,新增是放回一个
		{
			"id": 4,
			"name": "二级AA",
			"type": "leaf"
		}
	],
	"msg": "success" //任意定义,会弹出此信息
}

文件目录结构

  • css
    • ┝ font-awesome.min.css
  • ┝ data.json
  • ┝ index.html
  • js
    • ┝ LuTree.js

相关素材 - 导航菜单

讨论这个素材(1)回答他人问题或分享使用心得会奖励牛币

〒_〒 居然一个评论都没有……

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0
所需牛币:5 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)