在没有孩子的情况下摆脱'+'扩展树节点

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"); 
    } 
}