如何（绑定）一个dijit.Menu与dijit.Tree

我已经能够简单的dijit.Menu绑定两个的MenuItems到dijit.Tree wtih Menu.bindDomNode的节点（树的特定节点相关联。 domNode），但我想细化哪些节点获取上下文菜单，并且无法从Tree项目获取domNode来绑定菜单。我希望有一个更简单的方法来做到这一点？如何（绑定）一个dijit.Menu与dijit.Tree

datStore = this.DataStore; 

    mdl = this.Model; 

    tree = this.Tree; 

    datStore.fetch({ 

     query: { nodeType: "ROOT" }, 
     onItem: function(item, request) { 

      dojo.forEach(datStore.getValues(item, "children"), function(childItem) { 

    var itemNode = tree.getNodesByItem(mdl.getIdentity(childItem)); 

    console.log(itemNode): //returns the widget, and the widget has a domNode property that seems ok with firebug traversing of the itemNode object, though the div value is 'dimmed' in firebug (not valid node yet in the DOM?) 

       console.log(itemNode.domNode);//returns 'undefined', so the binding below does not work 

       if (childItem.nodeType == "MATCHED_VALUE") { 

        Menu.bindDomNode(itemNode.domNode); 

       } 

      }); 
     } 
    });

来源

2010-07-09 mortalCamel

你的方式看起来没问题。你也可以保持绑定到Tree节点本身，但是重写Menu._openMyself（）。在test_Tree.html中有类似的代码：

dojo.connect(menu, "_openMyself", this, function(e){ 
// get a hold of, and log out, the tree node that was the source of this open event 
var tn = dijit.getEnclosingWidget(e.target); 
console.debug(tn); 

// now inspect the data store item that backs the tree node: 
console.debug(tn.item); 

// contrived condition: if this tree node doesn't have any children, disable all of the menu items 
dojo.forEach(menu.getChildren(), function(i){ i.set('disabled', !tn.item.children); }); 

// IMPLEMENT CUSTOM MENU BEHAVIOR HERE 
});

但是，我认为这不一定比你的方式更好。

来源

2010-07-15 02:35:06

我相信问题是;

itemNode.domNode

如`itemNode”是一个数组，根据文档： http://dojotoolkit.org/api/1.6/dijit.Tree/getNodesByItem

使用： itemNode [0] .domNode

来源

2011-05-24 10:43:34

我已经作出这样的事情： http://www.yarpo.pl/2011/07/23/menu-kontekstowe-na-drzewie-dijit-tree/

我知道它在波兰的 - 对不起：P

而T3这里有许多在线演示，如：

http://www.yarpo.pl/download/examples/dojo/tree/menu/dijit.Menu-on-tree-menu2node.html：它的工作原理，你想让它
http://www.yarpo.pl/download/examples/dojo/tree/menu/dijit.Menu-on-tree-menu2node-hack.html：更好的解决方案

来源

2011-07-23 19:39:38

这帮助我，特别是最后一个环节的菜单的onclick。基本上，您使用dijit/Tree的onOpen（）方法遍历树的节点，并使用dijit/Menu的bindDomNode（）方法为每个节点添加正确的dijit/Menu。 – voidstate 2012-10-18 20:19:43

您还可以，如果你使用菜单中的onfocus事件对于这一点，不喜欢使用像“_openMyself”这样的伪私有方法。尽管如此，您应该右键单击更改当前选定的节点。

var tree = new dijit.Tree({ 
    onMouseDown:function(ev,node){ 
     if(ev.button==2){ // right-click 
      var here=dijit.getEnclosingWidget(ev.target); 
      this.set('selectedNode',here); 
     } 
    } 
}); 
var menuItem=new dijit.MenuItem({...}); 
var myMenu = new dijit.Menu({ 
    onFocus:function(){ 
     var selected=tree.selectedItem; 
     // do stuff here like: 
     menuItem.attr('disabled',(selected.children)?true:false); 
    } 
}); 
myMenu.addChild(menuItem); 
myMenu.bindDomNode(tree.domNode);

由于臭名昭着的Dojo文档，这花了我数小时的试验和错误才发现。这就是为什么我在这里发布这个问题，在问题后的两年。

来源

2012-02-29 13:06:13 DanMan

谢谢你的男人。我也是这样。你救了我几个小时的头撞:) – Sasho 2012-12-25 08:35:19

不客气。 :) – DanMan 2012-12-25 11:06:26

如果您有大而不同的菜单，禁用这些项目会造成无法使用的混乱。我试图用这种方法动态地将显示设置为none，但这会产生图形故障，并且任何菜单分隔符都完全消失。 – user2867288 2015-07-07 15:25:12

下面的代码显示了树节点

<!DOCTYPE html> 
<html > 
<head> 

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.7.2/dijit/themes/claro/claro.css" />  
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/resources/dojo.css" /> 
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dijit/themes/tundra/tundra.css" /> 
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js" data-dojo-config="parseOnLoad: true"></script> 

<script>require(["dojo/parser", "dojo/store/Memory", "dijit/Menu", "dijit/MenuItem", "dijit/tree/ObjectStoreModel", "dijit/Tree"]);</script> 
<script type="text/javascript"> 
    dojo.require("dojo.data.ItemFileReadStore"); 
    dojo.require("dijit.Tree"); 
    dojo.require("dijit.Menu"); 
    dojo.require("dijit.MenuItem"); 
    dojo.require("dijit.tree.ForestStoreModel"); 
    dojo.require("dojo.data.ItemFileReadStore"); 
    dojo.require("dijit.Tree"); 

    var rawdata = [ { 
     label: 'Vegetables', 
     id: '1', 
     children: [ { label: 'tomato', id: '1.1' }, { label: 'onion', id: '1.2' } ] 
    }, { 
     label: 'Fruits', 
     id: '2', 
     children: [ 
      { id: '2.1', label: 'Apple' },   
      { id: '2.3', label: 'Grapes' } 
     ] 
    } ]; 

    function prepare(){ 
     var store = new dojo.data.ItemFileReadStore({ 
      data: { identifier: 'id', label : 'label', items: rawdata } 
     }); 
     var treeModel = new dijit.tree.ForestStoreModel({ store: store }); 
     var treeControl = new dijit.Tree({ 
      model: treeModel, 
      showRoot: false, 
      _createTreeNode: function(/*Object*/ args){ 
       var tnode = new dijit._TreeNode(args); 
       tnode.labelNode.innerHTML = args.label; 
       return tnode; 
      } 
     }, "treeOne"); 

     var AllMenu = new dijit.Menu({ style: "display: none;"}); 
     var menuItem1 = new dijit.MenuItem({ 
       label: "Add Instance", 
       iconClass:"", 
       style:"background-color:#4B57FA", 
       onClick: function(){ alert('started'); } 
      }); 
     AllMenu.addChild(menuItem1); 
     AllMenu.bindDomNode(treeControl.domNode); 

    } 


    dojo.ready(prepare); 
</script> 


</head> 
<body class="claro"> 
    <div id="treeOne"> </div> 


</body> 
</html>

来源

2012-08-01 10:06:02 ram

这并不回答这个问题，因为它不允许dijit/Tree的不同节点使用不同的dijit /菜单。 – voidstate 2012-10-18 20:12:58

如何（绑定）一个dijit.Menu与dijit.Tree

回答

相关问题