easyUI（ accordion +tree）动态生成导航菜单（数据库读取数据）
easyUI accordion（折叠面板） +tree（树）动态的生成导航菜单
-- 改变easyUI树的一些css样式-->
li {
padding: 2px 0px;
}
.panel-body.accordion-body{
background-color: black;
}
span.tree-indent {
display: none;
}
/* 树节点的图标 */
span.tree-icon {
display: none;
}
/* 树节点的文字 */
span.tree-title {
color: white;
}
/* 树节点的属性 */
.tree-node {
height: 60px;text-align: center;
}
/* 鼠标悬停的颜色 */
.tree-node:hover {
background-color: #FFA500;
}
/* 选中的颜色 */
.tree-node-selected{background-color:red;color:#fff}
.cc-north{
background-image:url('${pageContext.request.contextPath}/images/maintop.gif') ;
background-repeat: no-repeat;
background-size: 100%;
}
.cc-info a{
text-decoration: none;
color: white;
}html代码，easyUI布局
<div id="cc" class="easyui-layout" data-options="fit:true">
<div class="cc-north"
data-options="region:'north',split:false,collapsible:false,border:false" style="height: 130px;">
div>
<div id="cc_west"
data-options="region:'west',title:'菜单导航',split:false,collapsible:true,border:false"
style="width: 200px;">
<div id="layout_west_accordion" class="easyui-accordion"
data-options="fit:true,border:false,nimate:true,lines:true">div>
div>
<div data-options="region:'center',border:false">
<div data-options="region:'north',split:false,collapsible:false,border:false" style="height: 26px;background-color: black;">
<div class="cc-info" style="color: white;line-height: 26px">
<a href="#" style="float: right;margin-left: 40px;margin-right: 20px">注销a>
<a href="#" style="float: right;margin-left: 20px">帮助a>
<a href="#" style="float: right;margin-left: 50px">关于a>
<span style="float: right;">当前用户：xxxxxspan>
div>
div>
<div id="tt">div>
div>
div>JavaScript代码
<script>
$(function() {
$.ajax({
type: 'POST',
async: false,
dataType: "json",
url: '${pageContext.request.contextPath}/queryPMenu',//获取菜单
success: function(data) {
$.each(data, function(i, n) { //加载父类节点即一级菜单
var id = n.id;
var text1 = n.text;
if(i == 0) { //显示第一个一级菜单下的二级菜单
$('#layout_west_accordion').accordion('add', {
title: n.text,
iconCls: n.iconCls,
selected: true,
//可在这加HTML代码，改变布局
content: ''">
',
});
} else {
$('#layout_west_accordion').accordion('add', {
title: n.text,
iconCls: n.iconCls,
selected: false,
content: ''">
',
});
}
$.ajax({
type: 'POST',
async: false,
dataType: "json",
url: '${pageContext.request.contextPath}/queryCMenuById?pId=' + id,
success: function(data) {
$("#tree" + id).tree({
data: data,
animate: true,
//iconCls: icon-blank,
//在树节点加图片
formatter:function(node){
return '
'+node.text;
},
//lines: true, //显示虚线效果
onClick: function(node) { // 在用户点击一个子节点即二级菜单时触发addTab()方法,用于添加tabs
//if(node.url){//判断url是否存在，存在则创建tabs
if(node) {
addTab(node);
}
}
});
}
});
})
}
});
});
//添加标签页/选项卡（相当于一个父tabs，其他的都是添加在这个之上，没有这个下面添加不起tabs）
$('#tt').tabs({
border: false,
onSelect: function(title) {
}
});
// add a new tab panel
function addTab(node) {
//var t=$.trim(t);
var tabExitOrNot = $('#tt').tabs('exists', node.text);//判断此选项卡是否已存在
if(tabExitOrNot == true) {
$('#mt-tabs').tabs('select', node.text);
return;
}
//添加选项卡
$('#tt').tabs('add', {
title: node.text,
//content: '',
closable: true,
tools:[{
iconCls:'icon-mini-refresh',
handler:function(){
alert('refresh');
}
}]
});
}
script>