Heim > Artikel > Web-Frontend > So implementieren Sie interaktive Registerkarten in zTree

So implementieren Sie interaktive Registerkarten in zTree

亚连Original: 2018-06-15 16:48:472312Durchsuche

Jetzt werde ich mit Ihnen teilen, wie Sie den interaktiven Tab-Effekt des zTree-Baummenüs implementieren. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich ist.

1. Benutzerdefinierte Attributseite hinzufügen

2. Klickereignis für jeden Baumknoten von ztree hinzufügen

<!DOCTYPE html>
<html>

 <head>
 <meta charset="UTF-8">
 <title>ztree树形菜单的使用</title>
 <!-- 导入jquery核心类库 -->
 <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
 <!-- 导入easyui类库 -->
 <link id="easyuiTheme" rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css" rel="external nofollow" >
 <link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css" rel="external nofollow" >
 <link rel="stylesheet" type="text/css" href="../css/default.css" rel="external nofollow" >
 <script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
 <!--引入ztree-->
 <script src="../js/ztree/jquery.ztree.all-3.5.js" type="text/javascript" charset="utf-8"></script>
 <link rel="stylesheet" type="text/css" href="../js/ztree/zTreeStyle.css" rel="external nofollow" />

 <script type="text/javascript">
  //页面加载后执行
  $(function() {
  //1.进行ztree树形菜单设置，开启简单json数据支持
  var setting = {
   data:{
   simpleData:{
    enable:true//开启简单json数据格式支持
   }
   },
   callback:{
   onClick:function(event,treeId,treeNode,clickFlag){
    var content = &#39;<p style="width:100%;height:100%;overflow:hidden;">&#39;+&#39;<iframe src="&#39;+treeNode.page+&#39;" scrolling="auto" style="width:100%;height:100%;border:0;"></iframe></p>&#39;
    //没有设置page属性的树形菜单，不打开选项卡
    if(treeNode.page!=undefined && treeNode.page!=""){
    //如果选项卡已经打开，就选中
    if($("#mytabs").tabs(&#39;exists&#39;,treeNode.name)){
     //选中选项卡
     $("#mytabs").tabs(&#39;select&#39;,treeNode.name);
    }else{
     //如果没有打开，添加选项卡
     $("#mytabs").tabs(&#39;add&#39;,{
     title:treeNode.name,
     content:content,
     closable:true
     });
    }
    }
   }
   }
  };

  //2.提供ztree树形菜单数据
  var zNodes = [
   {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);
  });
 </script>
 </head>

 <body class="easyui-layout">
 <p data-options="region:&#39;north&#39;,title:&#39;你我他学习吧-学习Java的好博客！&#39;" style="height:100px"></p>
 <p data-options="region:&#39;west&#39;,title:&#39;菜单导航&#39;" style="width:200px">
  <!--折叠面板-->
  <p class="easyui-accordion" data-options="fit:true">
  <p data-options="title:&#39;基础菜单&#39;">
   <!--通过ztree插件，制作树形菜单-->
   <ul id="baseMenu" class="ztree"></ul>
  </p>
  <p data-options="title:&#39;系统菜单&#39;">你我他学习吧</p>
  </p>
 </p>
 <p data-options="region:&#39;center&#39;,title:&#39;中部区域&#39;">
  <!--选项卡面板-->
  <p id="mytabs" class="easyui-tabs" data-options="fit:true">
  <p data-options="title:&#39;选项卡面板一&#39;,closable:true">选项卡面板一</p>
  <p data-options="title:&#39;选项卡面板二&#39;,closable:true">选项卡面板二</p>
  </p>
 </p>
 <p data-options="region:&#39;east&#39;,title:&#39;东部区域&#39;" style="width:100px"></p>
 <p data-options="region:&#39;south&#39;,title:&#39;南部区域&#39;" style="height:100px"></p>
 </body>

</html>

Das Obige ist, was ich für alle zusammengestellt habe, ich hoffe, dass es so sein wird Wird in Zukunft verwendet. Hilfreich für alle.

Verwandte Artikel:

So kehren Sie nach einem Seitensprung in Vue zur Ausgangsposition der Originalseite zurück

So richten Sie es ein Verwenden von vue-router Die Titelmethode jeder Seite

So lösen Sie das Problem, wenn Vue.js Daten anzeigt und die Seite blinkt

Ajax request+vue.js-Rendering+ Seitenladen

So verwenden Sie Ajax zum Rendern einer Seite in vue.js

Verwendung des MySQL-Verbindungspools über Node .js

So verweisen Sie auf das Ali-Schriftsymbol in Vue

Das obige ist der detaillierte Inhalt vonSo implementieren Sie interaktive Registerkarten in zTree. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

mysql node.js ajax vue.js JS 事件

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：js verhindert Standardereignisse und js verhindert das Bubbling von Ereignissen. Beispiele zum Teilen von js verhindert das Bubbling von EreignissenNächster Artikel：js verhindert Standardereignisse und js verhindert das Bubbling von Ereignissen. Beispiele zum Teilen von js verhindert das Bubbling von Ereignissen

In Verbindung stehende Artikel

Mehr sehen