最近的项目中用到了easyui，还有ztree菜单。在这里将我遇到的一些问题写出来算是做个笔记吧。
这是我头一次在博客园里分享代码，我的处女作，写的不好的地方还望各位见谅！
由于很久没有写过前台的东西手有点生，刚开始还以为很简单（不过确实很简单）然后咚咚咚的一顿狂敲，再然后一运行，。。。哎呀！ 点击ztree的节点除了选项卡有页面外，浏览器还给我生成了一个页面。 仔细一想 ：也是，点击节点时 ztree会根据treeNode的url属性去访问后台，然后肯定会生成一个新的jsp页面，虽然你把url的给了easyui-tabs 但是然并卵，跟easyui-tabs又没关系。于是我就想 如果点击节点时不让他去访问后台不就完了吗？然后百度了一下，结合ztree的API 发现 ；
废话不多说，上代码。。。
<script type="text/javascript" charset="utf-8">
$(function(){
/* 用于展现 zTree 的 DOM 容器 */
var obj = $("#ztree");
/*配置节点信息 */
var zSetting = {
data:{
simpleData:{
enable:true,
idKey:"id",
pIdKey:"pId"
},
key:{
url:'_url'
}
},
/* 点击节点事件 */
callback: {
onClick: zTreeOnClick
}
};
/*获取节点数据 */
var uid = "${user.uid}";
$.ajax({
type:"post",
url:"<%=path%>/main/getPowerList.action",
async:false,
data:{uid:uid},
dataType:"json",
success:function(mes){
zNodes = mes;
}
});
/* zTree 初始化方法 */
$.fn.zTree.init(obj, zSetting, zNodes);
/* 展开全部节点 */
var treeObj = $.fn.zTree.getZTreeObj("ztree");
treeObj.expandAll(true);
});
/* 点击节点时触发的函数 */
function zTreeOnClick(event, treeId, treeNode) {
//如果点击的是父节点 则折叠该节点
var zTree = $.fn.zTree.getZTreeObj("ztree");
if (treeNode.isParent) {
zTree.expandNode(treeNode);
return false;
} else {
var url = "<%=path%>/"+treeNode.url;
var name = treeNode.name;
easyui_tab(name,url);
return true;
}
};
//生成新的选项卡
function easyui_tab(text,url) {
//若选项卡已存在，选择该选项卡
if ($("#tabs").tabs('exists', text)) {
$("#tabs").tabs('select', text);
} else {
var content = "<iframe frameborder='0' scrolling='auto' style='width:100%;height:100%' src="
+ url + "></iframe>";
//生成新的选项卡，
$("#tabs").tabs('add', {
title : text,
closable : true,
content : content,
});
}
}
</script>
<body class="easyui-layout">
<div data-options="region:'north',split:false,collapsible:false" style="height:100px;"></div>
<div data-options="region:'south',split:false" style="height:100px;"></div>
<!-- ztree盒子 -->
<div data-options="region:'west',title:'操作',collapsible:false,split:false" style="width:180px;">
<div id="ztree" class="zTree" >
</div>
</div>
<div data-options="region:'center'" style="padding:0px;background:#eee;">
<!-- 选型卡 -->
<div id="tabs" class="easyui-tabs" data-options="border:false" style="height:410px;">
<div title="首页" style="padding:20px;display:none;">
<center>
<h1>欢迎使用</h1>
</center>
</div>
</div>
</div>
</body>
最后上一张简单的Demo效果图