好资源导航 » 文章资讯 » zTree树形菜单交互选项卡效果的实现方法

zTree树形菜单交互选项卡效果的实现方法

2023-09-18 21:26:05 60

1、添加自定义属性page

2、为ztree每个树形节点，添加点击事件






ztree树形菜单的使用












//页面加载后执行
$(function(){
//1.进行ztree树形菜单设置，开启简单json数据支持
varsetting={
data:{
simpleData:{
enable:true//开启简单json数据格式支持
}
},
callback:{
onClick:function(event,treeId,treeNode,clickFlag){
varcontent=''+'

' //没有设置page属性的树形菜单，不打开选项卡 if(treeNode.page!=undefined&&treeNode.page!=""){ //如果选项卡已经打开，就选中 if($("#mytabs").tabs('exists',treeNode.name)){ //选中选项卡 $("#mytabs").tabs('select',treeNode.name); }else{ //如果没有打开，添加选项卡 $("#mytabs").tabs('add',{ title:treeNode.name, content:content, closable:true }); } } } } }; //2.提供ztree树形菜单数据 varzNodes=[ {id:1,pId:0,name:"父节点一"}, {id:2,pId:0,name:"父节点二"}, {id:11,pId:1,name:"子节点一"}, {id:12,pId:1,name:"子节点二"}, {id:13,pId:2,name:"CSDN博客",page:"http://blog.csdn.net/a772304419"}, {id:14,pId:2,name:"博客园",page:"http://www.cnblogs.com/niwotaxuexiba/"} ]; //3.生成树形菜单 $.fn.zTree.init($("#baseMenu"),setting,zNodes); });

你我他学习吧

选项卡面板一选项卡面板二

以上这篇zTree树形菜单交互选项卡效果的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

zTree树形菜单交互选项卡效果的实现方法

热门推荐

随机推荐