About the background page development tutorial of uery EasyUI combined with ztrIee

Earlier we shared with you jQuery EasyUI combined with zTree tree structure to create web pages. Below, the editor will bring you an example of backend page development using JQuery EasyUI combined with ztree. The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

JQuery EasyUI combines zTree tree structure to create web pages. easyui is relatively simple to use. It encapsulates some functions of jquery very well and is more convenient to use. However, from version 1.2.3 onwards, commercial use is required Paid,

zTree is a jquery tree plug-in developed by domestic experts. It feels easy to use, very powerful, and completely free. The API is also very good. Recommended

easyui is a jQuery-based framework that integrates various user interface plug-ins.

easyui provides the necessary functionality to build modern interactive javascript applications.

Using easyui, you don’t need to write too much javascript code. Generally, you only need to use some html tags to define the user interface.

The complete framework of HTML web page.

easyui saves time and scale in product development.

easyui is very simple, but very powerful.

The following js files and style sheets need to be imported

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(该文件包括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>

The corresponding htm part code

<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 id="Accordion-nbsp-for-nbsp-jQuery">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>

Related recommendations:

Example detailed explanation jQuery EasyUI combined with zTree tree structure to create a web page

zTree asynchronous loading and expansion First-level node method implementation

ztree implements dynamically generated tree on the left and content details function instance sharing on the right

The above is the detailed content of About the background page development tutorial of uery EasyUI combined with ztrIee. For more information, please follow other related articles on the PHP Chinese website!