Exemple détaillé de jQuery EasyUI combiné avec la structure arborescente zTree pour créer des pages Web

JQuery EasyUI combine la structure arborescente zTree pour créer des pages Web. easyui est relativement simple à utiliser et encapsule bien certaines fonctions de jquery, ce qui le rend plus pratique à utiliser. Cependant, à partir de la version 1.2.3, l'utilisation commerciale est payante. zTree est un plug-in d'arbre jquery développé par des experts nationaux. Il semble facile à utiliser, très puissant et totalement gratuit. L'API est également très bonne.

easyui est un framework basé sur jQuery qui intègre divers plug-ins d'interface utilisateur.

easyui fournit les fonctions nécessaires pour créer des applications javascript interactives modernes.

En utilisant easyui, vous n'avez pas besoin d'écrire trop de code javascript. Généralement, il vous suffit d'utiliser quelques balises html pour définir l'interface utilisateur.

Le framework complet de page web HTML.

easyui permet de gagner du temps et d'évoluer dans le développement de produits.

easyui est très simple mais très puissant.

Vous devez importer les fichiers js et feuilles de style suivants

easyui/themes/default/easyui.css
easyui/themes/icon.css　
jquery-1.8.3.js
easyui/jquery.easyui.min.js
ztree/jquery.ztree.all-3.5.js (ce fichier inclut core, exhide, exedit, excheck)
ztree /zTreeStyle.css

<script type="text/javascript">   
 // ztree菜单设置
 var zTreeObj,
 setting = {
  view: {
   selectedMulti: false
  },
  // 添加编辑设置:修改树节点名称/删除树节点
  edit: {
   enable: true
  },
  data: { 
   simpleData: { 
    enable: true
   }
  },
  callback:{
   onClick: zTreeOnClick
  }
 };
 
 // 回调函数:单击事件
 function zTreeOnClick(event, treeId, treeNode, clickFlag) { 
  alert(treeNode.id + ", " + treeNode.name); 
  var content = &#39;<p style="width:100%;height:100% ;overflow:hidden;">&#39;
       +&#39;<iframe src="&#39;
       +treeNode.url
       +&#39;" scrolling="auto" style="width:100%;height:100%;border:0;"></iframe></p>&#39;;
  if(treeNode.url != undefined && treeNode.url != ""){
   // 当centre中是否存在名称为treeNode.name的tabs
   if($("#tt").tabs(&#39;exists&#39;,treeNode.name)){
    $("#tt").tabs(&#39;select&#39;,treeNode.name);
   }else {
    $("#tt").tabs(&#39;add&#39;,{
     title:treeNode.name,
     content:content,
     closable:true
    })
   }
  };
  event.preventDefault();
 };
 
 // 提供ztree树形菜单数据
 zTreeNodes = [ {"id":1, "pId":0, "name":"海贼王"}, 
        {"id":11, "pId":1, "name":"娜美", "url":"http://man.linuxde.net/"}, 
        {"id":12, "pId":1, "name":"罗宾", "url":"http://www.baidu.com"},
        {"id":13, "pId":1, "name":"汉库克", "url":"http://www.google.cn/"},
        { "id":2, "pId":0, "name":"父节点 2", "open":true},
        {"id":21,"pId":2, "name":"叶子节点 2-1"},
        {"id":22, "pId":2, "name":"叶子节点 2-2"},
        {"id":23,"pId":2, "name":"叶子节点 2-3"},
        {"id":3, "pId":0, "name":"父节点 3", "open":true},
        {"id":31, "pId":3, "name":"叶子节点 3-1"},
        {"id":32, "pId":3, "name":"叶子节点 3-2"},
        {"id":33, "pId":3, "name":"叶子节点 3-3"}
       ];
 
 // 3.生成树形菜单
 $(document).ready(function(){
  zTreeObj = $.fn.zTree.init($("#tree"), setting, zTreeNodes);
 });
 
 // 4.对象选项卡注册右击事件
 $(document).ready(function(){
  $("#tt").tabs({
   onContextMenu:function(e,title,index){
   // 阻止系统默认的右击事件
    e.preventDefault();
    $(&#39;#mm&#39;).menu(&#39;show&#39;, {
     left: e.pageX,
     top: e.pageY
    }); 
   }
  });
 });
 
 // 获取所选取的面板对象
 $(document).ready(function(){
  $("#tt").tabs({
   // 获取所选取的面板对象
   onSelect : function(title,index ){
    // 5. menu的单击事件绑定
    $("#mm").menu({ 
     onClick:function(item){ 
      alert(item.name);
      // 当点击关闭当前选项卡时
      if(item.name===&#39;current&#39;){
       $(&#39;#tt&#39;).tabs(&#39;close&#39;,title);
      // 当点击关闭其他选项卡时
      }else if(item.name === &#39;others&#39;){
       var tabs = $(&#39;#tt&#39;).tabs(&#39;tabs&#39;);
       $(tabs).each(function(){
        if($(this).panel(&#39;options&#39;).title != &#39;消息中心&#39; && $(this).panel(&#39;options&#39;).title != title){
         $(&#39;#tt&#39;).tabs(&#39;close&#39;,$(this).panel(&#39;options&#39;).title);
        }
       });
      // 当点击关闭所有选项卡时
      }else if(item.name === &#39;all&#39;){
       var tabs = $(&#39;#tt&#39;).tabs(&#39;tabs&#39;);
       $(tabs).each(function(){
          if($(this).panel(&#39;options&#39;).title != &#39;消息中心&#39;){
         $(&#39;#tt&#39;).tabs(&#39;close&#39;,$(this).panel(&#39;options&#39;).title);
        }
       });
      }
     } 
    });
   }
  })
 }) 
</script>

Code de pièce htm correspondant

<body class="easyui-layout">
 <p data-options="region:&#39;north&#39;,title:&#39;北丐:洪七公&#39;,split:true" style="height:100px;"></p>
 <p data-options="region:&#39;south&#39;,title:&#39;南帝:一灯大师&#39;,split:true" style="height:100px;"></p>
 <p data-options="region:&#39;east&#39;,iconCls:&#39;icon-reload&#39;,title:&#39;东邪:黄药师&#39;,split:true" style="width:100px;"></p>
 <p data-options="region:&#39;west&#39;,title:&#39;西毒:欧阳锋&#39;,split:true" style="width:250px;">
  <p id="aa" data-options="fit:&#39;true&#39;" class="easyui-accordion">
   <p title="赵敏" data-options="iconCls:&#39;icon-save&#39;" >
    <h3 style="color:#0099FF;">Accordion for jQuery</h3>
    <p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
   </p>
   <p title="大玉儿" data-options="iconCls:&#39;icon-reload&#39;,selected:true" >
    // ztree属性结构
    <ul id="tree" class="ztree" style="width:230px; overflow:auto;"></ul>
   </p>
   <p title="婉容儿" >
    who?
   </p>
  </p>
 </p>
 <p data-options="region:&#39;center&#39;,title:&#39;中神通:周伯通&#39;">
  // tabs 面板
  <p id="tt" class="easyui-tabs" data-options="fit:true">
   <p title="小龙女"data-options="closable:true" ></p>
   <p title="沐剑屏" data-options="closable:true" ></p>
   <p title="阿珂" data-options="iconCls:&#39;icon-reload&#39;,closable:true"></p>
  </p>
 </p>
 
 // menu菜单栏
 <p id="mm" class="easyui-menu" style="width:120px;">
  <p name="current">关闭当前选项卡</p>
  <p name="others">关闭其他选项卡</p>
  <p class="menu-sep"></p>
  <p data-options="iconCls:&#39;icon-cancle&#39;" name="all">关闭所有选项卡</p>
 </p>
</body>

Recommandations associées :

zTree charge et étend de manière asynchrone l'implémentation de la méthode de nœud de premier niveau

ztree implémente l'arborescence générée dynamiquement à gauche et le partage d'instance de fonction de détails de contenu à droite

Exemple détaillé de jQuery utilisant ztree pour implémenter une table arborescente

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!