在沒有孩子的情況下襬脫'+'擴展樹節點

Question

我有一個道場樹，沒有孩子的樹上的節點不應該有它旁邊的'+'，通常點擊展開並看到孩子。我正在使用dojo版本1.10.4。

var treeJSON = [{"id": "0", "name":"TreeTop", "type":"Enterprise", "parent":"", "sort_key":"0",},{"id": "1", "name":"West", "type":"Region", "parent":"0", "sort_key":"1"},{"id": "2", "name":"East", "type":"Region", "parent":"0", "sort_key":"2"},{"id": "3", "name":"SE", "type":"Region", "parent":"2", "sort_key":"0"}]; 

dojo tree jsfiddle

我想就是在道場示例所示（運行擴大和編程選擇樹節點的例子：

Expanding and selecting tree nodes programmatically

你會發現在'埃及'的dojo例子在啓動時沒有'+'，並且因爲沒有孩子而顯示打開的文件夾。

Answer 1

我想出了一個解決方案，消除了「+」圖像圖標旁邊沒有孩子，不改變任何默認樹行爲樹元素。 爲什麼這不是一個dojo樹的默認行爲是超越我的。

總之，當一個樹項目沒有任何孩子，我改變了expando節點對象的樣式 所以background-image爲+的CSS更改爲none

在onOpen事件：

itemObj.expandoNode.style['background-image'] = "none"; 

Updated jsfiddle showing a working example

在初始化過程中加載樹時，我創建了一個父id的散列通過調用該函數，計算有多少參考ID（不是需要計數，但是我算反正）：

var parentIds = {}; 
function buildParentIds(treeJSON) { 
    for (var i=0;i<treeJSON.length;i++) { 
    var parentId = treeJSON[i].parent; 
    if (!parentIds.hasOwnProperty(parentId)) { 
     parentIds[parentId] = 0; 
    } 
    parentIds[parentId]++; 
    } 
    console.log('buildParentIds()'); 
    console.dir(parentIds); 
} 

然後，創建樹對象時，我重寫onOpen事件：

onOpen: function(item,node) { 
    console.log('onOpen'); 
    if (node.containerNode) { 
    for (var i = 0; i < node.containerNode.childElementCount; i++) { 
     var chldNode = node.containerNode.childNodes[i]; 
     console.log('Node id: ' + chldNode.id); 
     var itemObj = dijit.byId(chldNode.id); 
     console.log('itemObj for ' + itemObj.item.name); 
     console.dir(itemObj); 
     //If item.id is not in parentIds then it has no children 
     if (!parentIds.hasOwnProperty(itemObj.item.id)) { 
     itemObj.expandoNode.style['background-image'] = "none"; 
     } 
    } 
    } 
} 

這樣更加美觀，並且直觀易用，因此無需單擊樹節點上的每個+即可輕鬆查看哪些樹元素沒有孩子。您仍然可以點擊+原來的位置，這會導致文件夾打開，因爲沒有孩子，所以不會顯示任何內容。

Answer 2

在該演示中，創建了dijit/Tree的新實例，並將屬性autoExpand設置爲true
（請參見data-dojo-props位於主體的最後一行）。

require(["dojo/aspect", "dojo/_base/window","dojo/store/Memory", "dojo/store/Observable", 
 
     "dijit/tree/ObjectStoreModel", "dijit/Tree", "dojo/parser", 
 
     "dijit/tree/dndSource","dojo/topic"], function(aspect, win, Memory, Observable, ObjectStoreModel, Tree, parser, dndSource, topic){ 
 
try{ 
 
     var treeJSON = [{"id": "0", "name":"TreeTop", \t "type":"Enterprise", "parent":"", "sort_key":"0",},{"id": "1", "name":"West", "type":"Region", "parent":"0", "sort_key":"1"},{"id": "2", "name":"East", "type":"Region", "parent":"0", "sort_key":"2"},{"id": "3", "name":"SE", "type":"Region", "parent":"2", "sort_key":"0"}]; 
 
     var myStore = new Memory({data: treeJSON}); 
 
     myStore.getChildren = function(object) { 
 
     return this.query({parent: object.id}, {sort: [{attribute: "sort_key"}]}); 
 
     }; 
 

 
     aspect.around(myStore, "put", function(originalPut) { 
 
\t  return function(obj, options) { 
 
\t   if (options && options.parent) { 
 
\t   obj.parent = options.parent.id; 
 
\t   } 
 
\t   return originalPut.call(myStore, obj, options); 
 
     } 
 
     }); 
 
     myStore = new Observable(myStore); 
 
     EvModel = new ObjectStoreModel({ 
 
     store: myStore, 
 
     query: { id: "0" } 
 
     }); 
 
     
 
     topic.subscribe("/dnd/drop",treeDropEvt2); 
 
     
 
     tree = new Tree({ 
 
     autoExpand: true, // <== this was missing 
 
     model: EvModel, 
 
     dndController: dndSource, 
 
     //onDndDrop: treeDropEvt, 
 
     checkAcceptance:dndAccept, 
 
\t  checkItemAcceptance:itemTreeCheckItemAcceptance, 
 
\t  dragThreshold:8, 
 
\t  betweenThreshold: 5 
 
     }); 
 

 
     tree.placeAt('currTree'); 
 

 
\t \t tree.onLoadDeferred.then(function(){ 
 
     console.log('onLoad event'); 
 
     }); 
 
     
 
     tree.set('paths',[['0','2','3']]); // Expand tree and highligh 'SE' 
 
     
 
     tree.startup(); 
 
     
 
    } catch(err) { 
 
     alert(err); 
 
    } 
 
    }) 
 
    
 
function treeDropEvt(source, nodes, copy) { 
 
    console.log('treeDropEvt'); 
 
    console.dir(source); 
 
    console.dir(nodes); 
 
    console.dir(copy); 
 
} 
 

 
function treeDropEvt2(source, nodes, copy, target) { 
 
    console.log('treeDropEvt2'); 
 
    console.dir(source); 
 
    console.dir(nodes); 
 
    console.dir(copy); 
 
} 
 

 
function dndAccept(source,nodes){ 
 
    console.log('dndAccept'); 
 
    console.dir(source); 
 
    console.dir(nodes); 
 
    return this.tree.id != "myTree"; 
 
} 
 

 
function itemTreeCheckItemAcceptance(node,source,position){ 
 
    source.forInSelectedItems(function(item){ 
 
    console.log("testing to drop item of type " + item.type[0] + " and data " + item.data + ", position " + position); 
 
    }); 
 
    var item = dijit.getEnclosingWidget(node).item; 
 
    console.log('getEnclosingWidget(node).item: '); 
 
    console.dir(item); 
 
    console.dir(dijit.getEnclosingWidget(node)); 
 
    return position; 
 
} 
 

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script> 
 
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css" /> 
 
    
 
    <body class="claro"> 
 
    <table border=1> 
 
    <tr><td style="text-align: center;">Current Tree</td></tr> 
 
    <tr><td style="vertical-align: top"> 
 
    <div id="currTree"></div> 
 
    </td></tr> 
 
    </table>  
 
    </body>

Answer 3

在樹的onOpenTreeNode功能，我檢查每一個孩子和替換類就是這樣，但我已經知道他們是否有子女或沒有。

onOpenTreeNode: function(item, node) { 
    if (node.containerNode) 
    for (var i in node.containerNode.children) { 
     var elem = node.containerNode.children[i]; 
     if (i < node.containerNode.childElementCount) 
     domClass.replace(elem.children[0].children[1], "dijitTreeExpando dijitTreeExpandoLeaf"); 
    } 
}