为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

子衿沉夜 2019-03-28 18:17:48
如上图,布局使用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")// 返回形式是jsppublic 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;}
查看完整描述

2 回答

?
红颜莎娜

TA贡献1842条经验 获得超12个赞

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

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

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

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

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

1

2

3

4

5

<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

1

2

3

4

5

6

7

8

9

10

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);

}


 


查看完整回答
反对 回复 2019-03-30
  • 2 回答
  • 0 关注
  • 520 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信