Question

jquery ztree+jquery easyUI创建tab页签问题

如上图，布局使用jquery easyUI做的，右侧的树形菜单是使用jquery ztree做的，现在我想实现一个功能，为什么每次我点击树节点都是，在浏览器新打开一个tab页签呢，我想实现当点击右侧菜单时，在主页面创建一个tab页签怎么做？请在我代码基础上完善。

我的jsp页面代码如下：
var ztree;
var setting = {
data: {
simpleData: {
enable: true
},
callback: {
beforeClick:function(e, treeId, treeNode){
alert(treeId);
var url = treeNode.url;
alert(url);
}
}
}
};
$(function(){
$.getJSON('${thisPath}/menu/init.do',{id:'0'},function(data){
data=eval(data);
zTree=$.fn.zTree.init($("#menu"), setting, data);
});
});

</html>

java代码如下：
/**
* 加载菜单
* @author Chris Suk
* @date 2014-4-22 下午10:13:57
* @param request
* @param ioc
*/
@At("/menu/init")
@Ok("json")
// 返回形式是jsp
public String init(HttpServletRequest request, Ioc ioc) {
String nodes="[{id:'0', pId:0, name:'系统菜单',url:'', open:true,isParent:true},";
try {
List<MenuModel> list = this.menuService.initialize();
if(!list.isEmpty()){
for(MenuModel model : list){
nodes+="{id:'"+model.getId()+"', pId:'"+model.getPid()+"', name:'"+model.getName()+"',url:'"+model.getUrl()+"', target:'main', open:true},";
}
}
if(nodes.length()>1&&nodes.endsWith(",")){
nodes=nodes.substring(0, nodes.length()-1);
}
nodes+="]";
} catch (Exception e) {
e.printStackTrace();
}
System.out.println(nodes);
return nodes;
}

Answer 1

要在主页面创建tab标签，你得使用easyui的tabs，没看到你上边相关的代码呀。

刚好最近做了类似的项目，大致思路供参考：

1、tab标签放在你的主页面

region='center'的那个div对应你的主页面，id为content_tabs的div是所有tab的面板

下面给出了带有一个默认标签的例子

<div region='center' id="content">
    <div id="content_tabs" class="easyui-tabs">
        <div title="我是默认页面" href="..." closable=true></div> 
    </div>
</div>

2、当你点击ztree时响应一个函数，这个函数在content_tabs中新建tab

function openTab(title,url){ // title是显示的标题，作为tab的标识，url是载入的地址
    if(!$("#content_tabs").tabs('exists',title)) // 如果不存在此tab则创建
        $("#content_tabs").tabs('add',{
            title:title, 
            href:url,
            closable:true,
        });
    else                                         // 如果已经打开则选中
        $("#content_tabs").tabs('select',title);
}

追问

如果我的ztree数据定义为如下类型var nodes='[{id:1,pid:0,name:'基础数据',url:''},{id:1,pid:0,name:'职务维护',url:'duty.jsp'}]';,但是当我点击该“职务节点”时，就会在浏览器新打开一个tab页面，我想自己控制其打开方式，怎么办？现在主要是这个问题。
即使我定义其beforeClick函数，但是这个函数都不执行。

追答

你没有给ztree添加单击处理事件，修改ztree的setting如下：

var setting = {
    data: {
        simpleData: {
            enable: true
        }
    },
    callback: {
        onClick:openTab  // 单击ztree的响应函数
    }
};

相应的，上面第二步的openTab函数作如下修改

function openTab(event, treeId, treeNode){
    if(!$("#content_tabs").tabs('exists',title)){ // 如果不存在此tab则创建
        if(treeNode.url!="")
            $("#content_tabs").tabs('add',{
                title:treeNode.name, 
                href:treeNode.url,
                closable:true,
            });
    }else{                                       // 如果已经打开则选中
        $("#content_tabs").tabs('select',title);
    }
}

追问

为什么你的代码都有样式，我的却没有样式呢，到底怎么回事。
非常感谢你的耐心回答。不过你的代码没有解决我的根本问题，也就是说我的节点有url属性值，但是每当点击的时候，就会新打开页面，我想控制不让它打开，而由我自己处理。我找到答案了，
设置其setting.key.url=''_url;既可以禁用url了。
var setting = {
data: {
key:{
url:'_url'
}

};