layui navTree 动态渲染菜单组件演示用后台布局系统

#host layui_fun_cms
server {
	listen       8000;
	server_name  localhost;
	root         D:/Workspace/layui_navtree;
	client_max_body_size 200m;  

	#charset koi8-r;

	#access_log  logs/host.access.log  main;

        #转发 web api 路由	
	location /app/ {
			root   html;    
			index  index.html index.htm;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_set_header Host $http_host;
			proxy_set_header X-NginX-Proxy true;			
			proxy_pass http://0.0.0.0:8080/;
			proxy_redirect off;
			client_max_body_size 200m;	#最大接受200m的文件
		}
}

//渲染导航菜单（仅出现侧边垂直导航）
navTree.render({
	elem: '#sideNav',	//注意框架布局中应存在你指定的垂直导航容器		
	headerNavElem: false,	//不渲染头部水平导航
	url: "api/nav", //获取菜单数据的请求地址
	recursion: true,    //指定菜单数据是否需要递归处理：true表示数据源需要递归处理；false表示数据源已是树形结构，不需要递归处理
	rootValue: "0",    //根节点菜单的主键值
	home: "page/home.html",	//默认或缺省时打开的页面链接
	currentNavKey: "current_nav",
	done: function(){
		//菜单渲染完成后的回调方法
		console.log("后台菜单渲染完成！");
	}
});

//渲染导航菜单（出现头部水平导航+侧边垂直导航，将联动）
navTree.render({
	elem: '#sideNav',	//注意框架布局中应存在你指定的垂直导航容器		
	headerNavElem: '#headerNav',	//出现头部水平导航，注意布局中应存在你指定的头部水平导航容器
	url: 'api/nav', //获取菜单数据的请求地址
	recursion: true,    //指定菜单数据是否需要递归处理：true表示数据源需要递归处理；false表示数据源已是树形结构，不需要递归处理
	rootValue: "0",    //根节点菜单的主键值
	home: "page/home.html",	//默认或缺省时打开的页面链接
	currentNavKey: "current_nav",
	done: function(){
		//菜单渲染完成后的回调方法
		console.log("后台菜单渲染完成！");
	}
});

this.config = {
	elem: '.layui-nav[lay-filter="sideNav"]',	//选取左侧垂直导航菜单容器
	headerNavElem: '.layui-nav[lay-filter="headerNav"]',	//选取头部水平导航条容器（如果设置了此值，将会渲染显示头部水平导航条；不设置不会渲染显示）
	url: null,  //异步请求菜单数据的接口地址，
	headers: null,	//异步接口的请求头，如：headers: {token: 'secret'}
	method: "get",	//异步请求类型，默认：get	
	data: null,	//菜单数据的原生集合（Array），如果直接传入了该配置参数，url 等异步参数将会被忽略
	home: "page/home.html",	//指定一个默认或缺省时打开的页面链接，如：后台首页，防止菜单链接跳转出错
	target: "right",	//指定菜单链接打开窗口的方式
	recursion: false,	//指定菜单数据是否需要递归处理，如果接口返回的菜单数据已经是递归数据（条目属性含有 children 属性），设为 false；当设为 true 时组件将会在前端配合 props 来转换为树形结构
	rootValue: null,	//规定顶级节点的主键值，该参数用于筛选出顶级节点，进而封装多层级的导航菜单结构
	parseData: function(res){	//数据预解析函数：res 即为原始返回的数据
		return {"code": res.code, "data": res.data, "msg": res.msg};	//注意：必须至少同时返回 {"code": xxx, "data": xxx}
	},
	response: {//按需指定，目前仅需指定成功状态码。如果开发者需要配置返回结果属性，请使用 parseData 函数来转换更加实用
		"statusCode": 0,	//规定成功的状态码，默认：0
	},
	props: {	//配置菜单集合数据中各节点的属性名称
		"idKey": "id", //菜单项的主键名称
		"pidKey": "parentId", 	//父级节点属性名称
		"childrenKey": "children", //子节点导航属性名称
		"titleKey": "title", //菜单项标题属性名称（菜单项的显示文字）
		"codeKey": "code", //菜单项编码属性名称，将映射为元素上的 data-code 属性（code 需唯一）
		"hrefKey": "href", //菜单项的链接地址属性名称
		"targetKey": "target", //菜单项超链接打开窗口方式的属性名称（非必须配置）
		"iconKey": "icon", 	//菜单项的图标样式属性名称（非必须配置）
	},
	paddingLeft: "16",	//单位：px，按照层级深度设置菜单元素的左边留白，让内容缩进
	currentDataKey: "current_nav_data",	//是否缓存菜单数据在本地存储中，已提供了一个默认的缓存项的键名称，可自定义；如果不需要缓存，请设置为 false
	currentNavKey: "current_nav",	//是否缓存最近打开的导航菜单项，默认的缓存项的键名称，可自定义；如果不需要缓存，请设置为 false
	done: null	//function(res){}，动态菜单渲染完成后的回调函数
}