现在的位置: 首页 > 综合 > 正文

yui-tree动态加载树

2013年12月09日 ⁄ 综合 ⁄ 共 6787字 ⁄ 字号 小 中 大 ⁄ 评论关闭
  1. /**
  2.  * 依赖以下文件
  3.  *<link rel="stylesheet" type="text/css" href="common/js/yui/build/fonts/fonts-min.css" />
  4.  *<link rel="stylesheet" type="text/css" href="common/js/tree/treeview/css/menu/tree.css">
  5.  *<link rel="stylesheet" type="text/css" href="common/js/yui/build/menu/assets/skins/sam/menu.css"> 
  6.  *右键菜单样式需要在body标签添加class="yui-skin-sam"
  7.  *<link rel="stylesheet" type="text/css" href="resources/indexeli/images/ctxmenu.css">
  8.  *<script type="text/javascript" src="common/js/yui/build/yahoo/yahoo-min.js"></script>
  9.  *<script type="text/javascript" src="common/js/yui/build/event/event-min.js"></script>
  10.  *<script type="text/javascript" src="common/js/yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
  11.  *<script type="text/javascript" src="common/js/yui/build/animation/animation-min.js"></script>
  12.  *<script type="text/javascript" src="common/js/yui/build/connection/connection-min.js"></script>
  13.  *<script type="text/javascript" src="common/js/yui/build/treeview/treeview-min.js"></script>
  14.  *<script type="text/javascript" src="common/js/yui/build/container/container_core-min.js"></script>
  15.  *<script type="text/javascript" src="common/js/yui/build/menu/menu-min.js"></script>
  16.  */
  17. (function(){
  18.     var tree, currentIconMode=0,tempNode;
  19.     //Map of YAHOO.widget.TextNode instances
  20.     var oTextNodeMap = {};
  21.     //The YAHOO.widget.TextNode instance whose "contextmenu" 
  22.     //DOM event triggered the display of the ContextMenu instance.
  23.     var oCurrentTextNode = null;
  24.     function loadNodeData(node, fnLoadComplete){
  25.         var sUrl = "tree/orgTree!buildOrgTree.action?node=" + node.data.id;
  26.         var callback = {
  27.             success: function(oResponse){
  28.                 var oResults = eval("(" + oResponse.responseText + ")");
  29.                 if (oResults && (oResults.length)) {//oResults is an array 
  30.                     for (var i = 0, j = oResults.length; i < j; i++) {
  31.                         tempNode = new YAHOO.widget.TextNode(oResults[i], node, false);
  32.                         tempNode.label = oResults[i].text;
  33.                         tempNode.isLeaf = oResults[i].leaf;
  34.                         oTextNodeMap[tempNode.labelElId]=tempNode;
  35.                     }
  36.                 }
  37.                 else {
  38.                     alert("返回数据错误!");
  39.                 }
  40.                 //When we're done creating child nodes, we execute the node's
  41.                 //loadComplete callback method which comes in via the argument
  42.                 //in the response object (we could also access it at node.loadComplete,
  43.                 //if necessary):
  44.                 fs.firstChild.style.fontStyle="";
  45.                 oResponse.argument.fnLoadComplete();
  46.             },
  47.             failure: function(oResponse){
  48.                 alert("异步请求失败!");
  49.                 fs.firstChild.style.fontStyle="";
  50.                 oResponse.argument.fnLoadComplete();
  51.             },
  52.             //our handlers for the XHR response will need the same
  53.             //argument information we got to loadNodeData, so
  54.             //we'll pass those along:
  55.             argument: {
  56.                 "node": node,
  57.                 "fnLoadComplete": fnLoadComplete
  58.             },
  59.             timeout: 7000
  60.         };
  61.         YAHOO.util.Connect.asyncRequest('GET', sUrl, callback);
  62.         var fs=node.getEl();
  63.         fs.firstChild.style.fontStyle="italic";
  64.     }
  65.     
  66.     function buildTree(){
  67.         tree = new YAHOO.widget.TreeView("OrgTree-div");
  68.         tree.setDynamicLoad(loadNodeData, currentIconMode);
  69.         tree.setExpandAnim("SlidDown");
  70.         tree.setCollapseAnim("SlidUp");
  71.         var root = tree.getRoot();
  72.         var f=new YAHOO.widget.TextNode({
  73.             label: "root",
  74.             id: 0
  75.         }, root, false);
  76.         oTextNodeMap[f.labelElId]=f;
  77.         tree.draw();
  78.         f.expand();
  79.         buildContextMenu();
  80.     }
  81.     var init=function(){  
  82.            buildTree();
  83.         }
  84.     
  85.     var buildContextMenu=function(){
  86.      /*
  87.         "contextmenu" event handler for the elements that 
  88.         triggered the display of the ContextMenu instance - used
  89.         to set a reference to the TextNode instance that triggered
  90.         the display of the ContextMenu instance.
  91.       */
  92.     function onTriggerContextMenu(p_oEvent) {
  93.         var oTarget = this.contextEventTarget,
  94.             Dom = YAHOO.util.Dom;
  95.         //Get the TextNode instance that that triggered the display of the ContextMenu instance.
  96.         var oTextNode = Dom.hasClass(oTarget, "ygtvlabel") ? 
  97.                             oTarget : Dom.getAncestorByClassName(oTarget, "ygtvlabel");
  98.         if (oTextNode) {
  99.             oCurrentTextNode = oTextNodeMap[oTarget.id];
  100.         }
  101.         else{
  102.             // Cancel the display of the ContextMenu instance.
  103.             this.cancel();
  104.         }
  105.     }
  106.     //refresh
  107.     function refresh(){
  108.           if(oCurrentTextNode.children.length){
  109.             tree.removeChildren(oCurrentTextNode);              
  110.             var t=setInterval(
  111.               function(){
  112.                 if(!oCurrentTextNode.children.length){
  113.                     clearInterval(t);
  114.                     tree.unsubscribe("animComplete");
  115.                     setTimeout(function(){oCurrentTextNode.expand()},200);                      
  116.                     return;
  117.                   }
  118.                 },200);
  119.           }else{
  120.             oCurrentTextNode.expand();
  121.           }
  122.     }
  123.     
  124.      /*
  125.          Instantiate a ContextMenu:  The first argument passed to 
  126.          the constructor is the id of the element to be created; the 
  127.          second is an object literal of configuration properties.
  128.      */
  129.     var oContextMenu = new YAHOO.widget.ContextMenu("mytreecontextmenu", {
  130.                                                     trigger: "OrgTree-div",
  131.                                                     lazyload: true, 
  132.                                                     itemdata: [
  133.                                                         { text: "增加项目",classname:"pro"},
  134.                                                         { text: "增加计划",classname:"proplan"},
  135.                                                         { text: "增加项目资源",classname:"proresource"},
  136.                                                         { text: "修改",classname:"modify"},
  137.                                                         { text: "查看",classname:"view"},
  138.                                                         { text: "刷新",classname:"refresh",onclick:{fn:refresh}},
  139.                                                         { text: "发送IM",classname:"im"}
  140.                                             ] });
  141.     /*
  142.          Subscribe to the "contextmenu" event for the element(s)
  143.          specified as the "trigger" for the ContextMenu instance.
  144.     */
  145.     oContextMenu.subscribe("triggerContextMenu", onTriggerContextMenu);
  146.     }
  147.         
  148.     //Add an onDOMReady handler to build the tree when the document is ready
  149.     YAHOO.util.Event.onDOMReady(init);
  150. })();
返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞