<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>main</title>
</head>
<!-- jquery核心库 -->
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<!-- easyui核心库 -->
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<!-- easyui核心UI文件 css -->
<link href="easyui/themes/default/easyui.css" rel="stylesheet"
type="text/css" />
<!-- easyui图标 -->
<link href="easyui/themes/icon.css" rel="stylesheet" type="text/css" />
<!-- easyui国际化文件 -->
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script>
var datajson=[
{
text: "部门管理",
state: "closed",
children: [
{
text: "部门列表",
attributes: {
url:"./add.html"
}
},
{
text: "部门设置",
attributes: {
url:"./add.html"
}
},
{
text: "部门操作",
attributes: {
url:"./add.html"
}
},
]
},
{
text: "员工管理",
state: "closed",
children: [{
text: "员工列表",
attributes: {
url:"./add.html"
}
}]
},
{
text: "角色管理",
state: "closed",
children: [{
text: "角色列表",
attributes: {
url:"./add.html"
}
}]
},
{
text: "权限管理",
state: "closed",
children: [{
text: "权限列表",
attributes: {
url:"./add.html"
}
}]
},
{
text: "系统管理",
state: "closed",
children: [{
text: "退出系统",
attributes: {
url:"./add.html"
}
}]
}
]
/* 树形结构加载的是文件或者访问的是地址的时候 使用属性url
如果加载固定数据 使用属性data */
$(function(){
$('#tt').tree({
data:datajson,
onSelect : function(node) {
//有地址对应的进行跳转
if(node.attributes){
//alert(node.attributes.url);
OpenTab(node.text,node.attributes.url);
}
}
});
function OpenTab(Text,URL) {
//alert(Text);
// 添加一个未选中状态的选项卡面板,具体参考Easyui table 选项卡
if ($("#MenusTabs").tabs('exists', text)) {
$('#MenusTabs').tabs('select', text);
} else {
var Content = '<iframe scrolling="auto" frameborder="0" src="'+URL+'" style="width:100%;height:100%;"></iframe>';
$('#MenusTabs').tabs('add', {
title : Text,
closable : true,
content : Content
});
}
}
})
</script>
<body class="easyui-layout">
<div data-options="region:'north',title:'North Title',split:true" style="height: 100px;"></div>
<div data-options="region:'west',title:'West',split:true" style="width: 200px;">
<ul id="tt"></ul>
</div>
<div data-options="region:'center'" style="padding: 5px; background: #eee;">
<div id="MenusTabs" class="easyui-tabs" fit="true" border="false">
<div title="首页">
<div align="center" style=" padding-top:100px;">
<font color="red" size="15">
Welcome ! Enjoy To Use EasyUI!
</font></br>
<font color="red" size="15">
欢迎 ！ 享受 easyUI！~
</font>
</div>
</div>
</div>
</div>
</body>
</html>
可能原因 1浏览器问题，换其他浏览器试试
12是否缺少
3 $('#tt').tree({ 执行这个函数了么，tab导航都是 url:"./add.html" 是否由于这个原因
url:"./add.html" 是不是这个url有问题？