如何（綁定）一個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

回答

相關問題