Question

我有一个dojo树，树上没有孩子的节点不应该有＆＃39; +＆＃39;旁边通常点击以展开并看到孩子们。我正在使用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

我想要的是在dojo示例中看到的内容（以编程方式运行扩展和选择树节点的示例：

Expanding and selecting tree nodes programmatically

你会在道场的例子中注意到埃及＆＃39;没有＆＃39; +＆＃39;当它启动并显示一个打开的文件夹，因为没有孩子。

Answer 1

在该演示中，创建dijit/Tree的新实例，其中属性autoExpand设置为true
（请参阅正文最后一行中的data-dojo-props）。

＆＃13;

    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",	"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) {
	       return function(obj, options) {
	         if (options && options.parent) {
	           obj.parent = options.parent.id;
	         }
	         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,
	      checkItemAcceptance:itemTreeCheckItemAcceptance,
	      dragThreshold:8,
	      betweenThreshold: 5
      });

      tree.placeAt('currTree');

		  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;
}

＆＃13;

  <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>

＆＃13;

Answer 2

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

Answer 3

我想出了一个解决方案，可以删除没有子节点的树元素旁边的“+”图像图标而不更改任何默认树行为。为什么这不是dojo树的默认行为超出我的范围。

总之，当树项目没有任何孩子时，我改变了样式 expando节点对象的background-image的{{1}}的css更改为+

在none事件中：

onOpen

Updated jsfiddle showing a working example

在初始化期间加载树时，我通过调用此函数创建父ID的哈希值，并计算引用id的次数（不需要计数，但我还是计算了）：

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

然后，在创建树对象时，我覆盖了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"; } } } }即可轻松查看哪些树元素没有孩子。您仍然可以点击+曾经导致文件夹打开的位置，因为没有孩子，所以没有显示任何内容。

摆脱＆＃39; +＆＃39;用于在没有孩子出现时扩展树节点

3 个答案: