EasyUI は zTree ツリー構造を組み合わせて Web ページを作成します

今回は、EasyUIとzTreeツリー構造を組み合わせてWebページを作成する場合の注意事項を紹介します。実際の事例を見てみましょう。

JQuery EasyUIの組み合わせ zTree ツリー構造は、Web ページを作成するために使用されます。easyui は、jquery のいくつかの機能をうまくカプセル化しており、より使いやすくなっています。ただし、zTree の商用利用には有料が必要です。私たちは jquery ツリー プラグインを作成しました。非常に使いやすく、完全に無料です。 easyui は、さまざまなユーザー インターフェイス プラグインを統合する jQuery ベースのフレームワークです。

easyui は、最新のインタラクティブな

javascript

アプリケーションを構築するために必要な機能を提供します。 easyui を使用すると、多くの JavaScript コードを記述する必要がなく、通常、いくつかの HTML タグを使用してユーザー インターフェイスを定義するだけで済みます。

HTML Web ページの完全なフレームワーク。

easyui は、製品開発の時間と規模を節約します。

easyui は非常にシンプルですが、非常に強力です。

必要に応じて、次の js ファイルとスタイル シートをインポートします

easyui/主題/default/easyui.css

easyui/主題/icon.css —

jquery-1.8.3.js
easyui/jquery.easyui.min.js
ztree/jquery.ztree.all-3.5.js(thisファイル core,exhide,exedit,excheck を含む)
ztree/zTreeStyle.css

<script type="text/javascript">  
 // ztree菜单设置
 varzTreeObj,
 setting = {
  view: {
   selectedMulti:false
  },
  // 添加编辑设置:修改树节点名称/删除树节点
  edit: {
   enable:true
  },
  data: {
   simpleData: {
    enable:true
   }
  },
  callback:{
   onClick: zTreeOnClick
  }
 };
  
 // 回调函数:单击事件
 functionzTreeOnClick(event, treeId, treeNode, clickFlag) {
  alert(treeNode.id +", "+ treeNode.name);
  varcontent ='<p style="width:100%;height:100% ;overflow:hidden;">'
       +'<iframe src="&#39;
       +treeNode.url
       +&#39;" scrolling="auto" style="width:100%;height:100%;border:0;"></iframe></p>';
  if(treeNode.url != undefined && treeNode.url !=""){
   // 当centre中是否存在名称为treeNode.name的tabs
   if($("#tt").tabs('exists',treeNode.name)){
    $("#tt").tabs('select',treeNode.name);
   }else{
    $("#tt").tabs('add',{
     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();
    $('#mm').menu('show', {
     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==='current'){
       $('#tt').tabs('close',title);
      // 当点击关闭其他选项卡时
      }elseif(item.name ==='others'){
       vartabs = $('#tt').tabs('tabs');
       $(tabs).each(function(){
        if($(this).panel('options').title !='消息中心'&& $(this).panel('options').title != title){
         $('#tt').tabs('close',$(this).panel('options').title);
        }
       });
      // 当点击关闭所有选项卡时
      }elseif(item.name ==='all'){
       vartabs = $('#tt').tabs('tabs');
       $(tabs).each(function(){
          if($(this).panel('options').title !='消息中心'){
         $('#tt').tabs('close',$(this).panel('options').title);
        }
       });
      }
     }
    });
   }
  })
 })
</script>

対応する htm 部分コード

<bodyclass="easyui-layout">
 <pdata-options="region:&#39;north&#39;,title:&#39;北丐:洪七公&#39;,split:true"style="height:100px;"></p>
 <pdata-options="region:&#39;south&#39;,title:&#39;南帝:一灯大师&#39;,split:true"style="height:100px;"></p>
 <pdata-options="region:&#39;east&#39;,iconCls:&#39;icon-reload&#39;,title:&#39;东邪:黄药师&#39;,split:true"style="width:100px;"></p>
 <pdata-options="region:&#39;west&#39;,title:&#39;西毒:欧阳锋&#39;,split:true"style="width:250px;">
  <pid="aa"data-options="fit:&#39;true&#39;"class="easyui-accordion">
   <ptitle="赵敏"data-options="iconCls:&#39;icon-save&#39;">
    <h3style="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>
   <ptitle="大玉儿"data-options="iconCls:&#39;icon-reload&#39;,selected:true">
    // ztree属性结构
    <ulid="tree"class="ztree"style="width:230px; overflow:auto;"></ul>
   </p>
   <ptitle="婉容儿">
    who?
   </p>
  </p>
 </p>
 <pdata-options="region:&#39;center&#39;,title:&#39;中神通:周伯通&#39;">
  // tabs 面板
  <pid="tt"class="easyui-tabs"data-options="fit:true">
   <ptitle="小龙女"data-options="closable:true"></p>
   <ptitle="沐剑屏"data-options="closable:true"></p>
   <ptitle="阿珂"data-options="iconCls:&#39;icon-reload&#39;,closable:true"></p>
  </p>
 </p>
  
 // menu菜单栏
 <pid="mm"class="easyui-menu"style="width:120px;">
  <pname="current">关闭当前选项卡</p>
  <pname="others">关闭其他选项卡</p>
  <pclass="menu-sep"></p>
  <pdata-options="iconCls:&#39;icon-cancle&#39;"name="all">关闭所有选项卡</p>
 </p>
</body>

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

jQueryを使ってマウスホイール操作で画像をズーム

jQueryでキーボードイベントを使う方法

以上がEasyUI は zTree ツリー構造を組み合わせて Web ページを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。