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;">当前用户：xxxxx</span>
</div>
</div>
<div id="tt"></div>
</div>
</div>

<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: '<div style="padding:10px 0px"><ul id="tree' + id + '"></ul></div>',
});
} else {
$('#layout_west_accordion').accordion('add', {
title: n.text,
iconCls: n.iconCls,
selected: false,
content: '<div style="padding:10px 0px"><ul id="tree' + id + '"></ul></div>',
});
}

$.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 '<img src="images/admin.gif"/><br>'+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: '<iframe scrolling="auto" frameborder="0" src="${pageContext.request.contextPath}'+ node.url +'" style="width:100%;height:600px;"></iframe>',
closable: true,
tools:[{
iconCls:'icon-mini-refresh',
handler:function(){
alert('refresh');
}
}]

});
}

</script>