大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

jQuery中EasyUI结合zTree树形结构制作web页面的示例分析

这篇文章给大家分享的是有关jQuery中EasyUI结合zTree树形结构制作web页面的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

成都创新互联基于成都重庆香港及美国等地区分布式IDC机房数据中心构建的电信大带宽,联通大带宽,移动大带宽,多线BGP大带宽租用,是为众多客户提供专业服务器托管报价,主机托管价格性价比高,为金融证券行业绵阳电信机房,ai人工智能服务器托管提供bgp线路100M独享,G口带宽及机柜租用的专业成都idc公司。

easyui 是一个基于 jQuery 的框架,集成了各种用户界面插件。

easyui 提供建立现代化的具有交互性的 javascript 应用的必要的功能。

使用 easyui,您不需要写太多 javascript 代码,一般情况下您只需要使用一些 html 标记来定义用户界面。

HTML 网页的完整框架。

easyui 节省了开发产品的时间和规模。

easyui 非常简单,但是功能非常强大。

需要的导入以下几种js文件和样式表

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

   
 // 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 = ''
       +'
';   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);       // 当点击关闭其他选项卡时       }else if(item.name === 'others'){        var tabs = $('#tt').tabs('tabs');        $(tabs).each(function(){         if($(this).panel('options').title != '消息中心' && $(this).panel('options').title != title){          $('#tt').tabs('close',$(this).panel('options').title);         }        });       // 当点击关闭所有选项卡时       }else if(item.name === 'all'){        var tabs = $('#tt').tabs('tabs');        $(tabs).each(function(){           if($(this).panel('options').title != '消息中心'){          $('#tt').tabs('close',$(this).panel('options').title);         }        });       }      }      });    }   })  }) 

 相应的htm 部分代码


 
 
 
             Accordion for jQuery     

Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.

            // ztree属性结构                  who?              // tabs 面板                        // menu菜单栏     关闭当前选项卡   关闭其他选项卡      关闭所有选项卡  

感谢各位的阅读!关于“jQuery中EasyUI结合zTree树形结构制作web页面的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!


当前标题:jQuery中EasyUI结合zTree树形结构制作web页面的示例分析
本文地址:http://dzwzjz.com/article/pjidsp.html